Pixel Art Office

Pixel Art Office import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // --- Scene Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x333333); // --- Camera --- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 15, 15); // Positioned above and looking slightly down // --- Renderer --- const renderer = new THREE.WebGLRenderer({ antialias: false }); // No antialiasing for pixel style renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(1); // Force pixel ratio to 1 for crisp pixels document.body.appendChild(renderer.domElement); // --- Controls --- const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 0, 0); // Look at the center of the office floor // --- Lighting --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 5); scene.add(directionalLight); // --- Materials (Pixel Style) --- const wallMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, flatShading: true }); const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x555555, flatShading: true }); const tableMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, flatShading: true }); // Brown const personMaterial = new THREE.MeshStandardMaterial({ color: 0x0088ff, flatShading: true }); // Blue // --- Geometry --- const wallHeight = 5; const wallThickness = 0.5; const officeWidth = 20; const officeDepth = 15; const personSize = { width: 0.6, height: 1.2, depth: 0.6 }; const tableHeight = 1; const tableTopThickness = 0.2; // --- Create Office Elements --- // Floor const floorGeometry = new THREE.BoxGeometry(officeWidth, 0.1, officeDepth); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.y = -0.05; // Slightly below origin scene.add(floor); // Walls const wallGeometry1 = new THREE.BoxGeometry(officeWidth + wallThickness, wallHeight, wallThickness); const wallGeometry2 = new THREE.BoxGeometry(wallThickness, wallHeight, officeDepth + wallThickness); const wallNorth = new THREE.Mesh(wallGeometry1, wallMaterial); wallNorth.position.set(0, wallHeight / 2, -officeDepth / 2); scene.add(wallNorth); const wallSouth = new THREE.Mesh(wallGeometry1, wallMaterial); wallSouth.position.set(0, wallHeight / 2, officeDepth / 2); scene.add(wallSouth); const wallWest = new THREE.Mesh(wallGeometry2, wallMaterial); wallWest.position.set(-officeWidth / 2, wallHeight / 2, 0); scene.add(wallWest); const wallEast = new THREE.Mesh(wallGeometry2, wallMaterial); wallEast.position.set(officeWidth / 2, wallHeight / 2, 0); scene.add(wallEast); // Helper function to create a person function createPerson(x, y, z) { const personGeo = new THREE.BoxGeometry(personSize.width, personSize.height, personSize.depth); const person = new THREE.Mesh(personGeo, personMaterial); person.position.set(x, y + personSize.height / 2, z); scene.add(person); return person; } // Helper function to create a table function createTable(width, depth, x, y, z) { const tableTopGeo = new THREE.BoxGeometry(width, tableTopThickness, depth); const tableTop = new THREE.Mesh(tableTopGeo, tableMaterial); tableTop.position.set(x, y + tableHeight - tableTopThickness / 2, z); scene.add(tableTop); // Simple block legs for pixel style const legHeight = tableHeight - tableTopThickness; const legSize = 0.2; const legGeo = new THREE.BoxGeometry(legSize, legHeight, legSize); const legPositions = [ { x: width / 2 - legSize, z: depth / 2 - legSize }, { x: -width / 2 + legSize, z: depth / 2 - legSize }, { x: width / 2 - legSize, z: -depth / 2 + legSize }, { x: -width / 2 + legSize, z: -depth / 2 + legSize }, ]; legPositions.forEach(pos => { const leg = new THREE.Mesh(legGeo, tableMaterial); leg.position.set(x + pos.x, y + legHeight / 2, z + pos.z); scene.add(leg); }); return tableTop; // Return the main part for reference if needed } // Table 1 (4 people) const table1Width = 4; const table1Depth = 1.5; const table1X = -5; const table1Z = -3; createTable(table1Width, table1Depth, table1X, 0, table1Z); createPerson(table1X - table1Width / 4, 0, table1Z + table1Depth / 2 + personSize.depth); createPerson(table1X + table1Width / 4, 0, table1Z + table1Depth / 2 + personSize.depth); createPerson(table1X - table1Width / 4, 0, table1Z - table1Depth / 2 - personSize.depth); createPerson(table1X + table1Width / 4, 0, table1Z - table1Depth / 2 - personSize.depth); // Table 2 (3 people) const table2Width = 3; const table2Depth = 1.5; const table2X = 5; const table2Z = -3; createTable(table2Width, table2Depth, table2X, 0, table2Z); createPerson(table2X, 0, table2Z + table2Depth / 2 + personSize.depth); createPerson(table2X - table2Width / 3, 0, table2Z - table2Depth / 2 - personSize.depth); createPerson(table2X + table2Width / 3, 0, table2Z - table2Depth / 2 - personSize.depth); // Individual Tables (3 people) const table3Width = 1.5; const table3Depth = 1; const table3Positions = [ { x: -7, z: 4 }, { x: 0, z: 4 }, { x: 7, z: 4 }, ]; table3Positions.forEach(pos => { createTable(table3Width, table3Depth, pos.x, 0, pos.z); createPerson(pos.x, 0, pos.z + table3Depth / 2 + personSize.depth); }); // --- Window Resize --- window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); // Keep pixel ratio at 1 even on resize renderer.setPixelRatio(1); }); // --- Animation Loop --- function animate() { requestAnimationFrame(animate); controls.update(); // Only required if controls.enableDamping = true renderer.render(scene, camera); } animate();