Computer on Table

Computer on Table import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { createTable } from './table.js'; import { createComputer } from './computer.js'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xcccccc); // Camera setup const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.5, 3); // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; // Enable shadows document.body.appendChild(renderer.domElement); // Orbit Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 0.8, 0); // Target the center of the table/computer area // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; // Enable shadow casting // Configure shadow properties directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -10; directionalLight.shadow.camera.right = 10; directionalLight.shadow.camera.top = 10; directionalLight.shadow.camera.bottom = -10; scene.add(directionalLight); // Floor const floorGeometry = new THREE.PlaneGeometry(20, 20); const floorMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; // Allow floor to receive shadows scene.add(floor); // Create Table const table = createTable(); table.position.y = 0; // Place table base on the floor scene.add(table); // Create Computer const computer = createComputer(); computer.position.y = 0.75; // Position computer on the table top (table height is 0.75) scene.add(computer); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); }); // Animation loop function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export function createTable() { const tableGroup = new THREE.Group(); // Materials const woodMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, // SaddleBrown roughness: 0.8, metalness: 0.1 }); // Tabletop const topGeometry = new THREE.BoxGeometry(2, 0.1, 1); const tabletop = new THREE.Mesh(topGeometry, woodMaterial); tabletop.position.y = 0.7; // Height of legs + half of tabletop thickness tabletop.castShadow = true; tabletop.receiveShadow = true; tableGroup.add(tabletop); // Legs const legGeometry = new THREE.BoxGeometry(0.1, 0.7, 0.1); // Height 0.7 const legPositions = [ { x: 0.9, z: 0.4 }, { x: -0.9, z: 0.4 }, { x: 0.9, z: -0.4 }, { x: -0.9, z: -0.4 } ]; legPositions.forEach(pos => { const leg = new THREE.Mesh(legGeometry, woodMaterial); leg.position.set(pos.x, 0.35, pos.z); // Position legs under the top (center Y at half height) leg.castShadow = true; leg.receiveShadow = true; tableGroup.add(leg); }); return tableGroup; } import * as THREE from 'three'; // Function to create the code texture function createCodeTexture() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 512; canvas.height = 256; // Background ctx.fillStyle = '#282c34'; // Dark editor background ctx.fillRect(0, 0, canvas.width, canvas.height); // Code lines ctx.font = '14px monospace'; ctx.fillStyle = '#abb2bf'; // Light grey text const lines = [ "import * as THREE from 'three';", "", "const scene = new THREE.Scene();", "const camera = new THREE.PerspectiveCamera(75, ...);", "const renderer = new THREE.WebGLRenderer();", "document.body.appendChild(renderer.domElement);", "", "function animate() {", " requestAnimationFrame(animate);", " renderer.render(scene, camera);", "}", "", "animate();" ]; lines.forEach((line, index) => { ctx.fillText(line, 10, 20 + index * 18); }); const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; return texture; } export function createComputer() { const computerGroup = new THREE.Group(); // Materials const darkPlasticMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.6, metalness: 0.2 }); const screenMaterial = new THREE.MeshBasicMaterial({ // Use MeshBasicMaterial for screen so it's not affected by light map: createCodeTexture(), }); const silverMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.4, metalness: 0.8 }); // Monitor Screen const screenGeometry = new THREE.BoxGeometry(0.8, 0.45, 0.02); // Width, Height, Depth const screenMesh = new THREE.Mesh(screenGeometry, [ darkPlasticMaterial, // right darkPlasticMaterial, // left darkPlasticMaterial, // top darkPlasticMaterial, // bottom screenMaterial, // front - code texture darkPlasticMaterial // back ]); screenMesh.position.set(0, 0.25, -0.05); // Position slightly back and up screenMesh.castShadow = true; computerGroup.add(screenMesh); // Monitor Stand Base const standBaseGeometry = new THREE.CylinderGeometry(0.15, 0.15, 0.02, 32); const standBase = new THREE.Mesh(standBaseGeometry, silverMaterial); standBase.position.set(0, 0.01, 0); // Base sits on the table standBase.castShadow = true; computerGroup.add(standBase); // Monitor Stand Neck const standNeckGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.2, 32); const standNeck = new THREE.Mesh(standNeckGeometry, silverMaterial); standNeck.position.set(0, 0.1, 0); // Connects base to screen back standNeck.castShadow = true; computerGroup.add(standNeck); // Keyboard const keyboardGeometry = new THREE.BoxGeometry(0.6, 0.02, 0.2); const keyboard = new THREE.Mesh(keyboardGeometry, darkPlasticMaterial); keyboard.position.set(0, 0.01, 0.2); // In front of the monitor base keyboard.castShadow = true; computerGroup.add(keyboard); // Mouse const mouseGeometry = new THREE.BoxGeometry(0.06, 0.03, 0.1); // Small box for mouse const mouse = new THREE.Mesh(mouseGeometry, darkPlasticMaterial); mouse.position.set(0.4, 0.015, 0.2); // To the right of the keyboard mouse.rotation.y = -Math.PI / 12; // Slightly angled mouse.castShadow = true; computerGroup.add(mouse); return computerGroup; }