import React, { useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; const CitySimulator = () => { const mountRef = useRef(null); const controlsRef = useRef({ isBirdView: true, moveForward: false, moveBackward: false, moveLeft: false, moveRight: false, currentYaw: 0 }); useEffect(() => { // Scene setup const scene = new THREE.Scene(); // Create sky hemisphere const skyLight = new THREE.HemisphereLight(0x87ceeb, 0x555577, 0.8); scene.add(skyLight); // Sky dome for better sky appearance const skyGeo = new THREE.SphereGeometry(2000, 32, 32); const skyMat = new THREE.ShaderMaterial({ uniforms: { topColor: { value: new THREE.Color(0x1c4a7e) }, // Deeper blue middleColor: { value: new THREE.Color(0x69a4d4) }, // Light blue bottomColor: { value: new THREE.Color(0xdde8f0) }, // Very light blue-white offset: { value: 20 }, exponent: { value: 0.8 }, time: { value: 0 } }, vertexShader: ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 topColor; uniform vec3 middleColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; uniform float time; varying vec3 vWorldPosition; // Noise function float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } void main() { float h = normalize(vWorldPosition + offset).y; h = max(pow(max(h, 0.0), exponent), 0.0); // Add some noise for subtle variation vec2 noiseCoord = vWorldPosition.xz * 0.001 + time * 0.0001; float noise = random(noiseCoord) * 0.03; h += noise; // Three-way color mix vec3 color; if (h < 0.5) { color = mix(bottomColor, middleColor, h * 2.0); } else { color = mix(middleColor, topColor, (h - 0.5) * 2.0); } gl_FragColor = vec4(color, 1.0); } `, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Add ambient and directional lighting const ambientLight = new THREE.AmbientLight(0x1a1a2a, 0.2); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffcc, 0.3); directionalLight.position.set(100, 100, 50); directionalLight.castShadow = true; // Improve shadow quality directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 500; directionalLight.shadow.camera.left = -100; directionalLight.shadow.camera.right = 100; directionalLight.shadow.camera.top = 100; directionalLight.shadow.camera.bottom = -100; directionalLight.shadow.bias = -0.0001; directionalLight.shadow.normalBias = 0.02; scene.add(directionalLight); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 4000); const setBirdView = () => { camera.position.set(120, 80, 120); camera.lookAt(0, 0, 0); }; const setPersonalView = () => { camera.position.set(0, 2, 0); camera.lookAt(0, 2, -10); }; setBirdView(); const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; renderer.outputColorSpace = THREE.SRGBColorSpace; mountRef.current.appendChild(renderer.domElement); // Ground const groundGeometry = new THREE.PlaneGeometry(200, 200); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x3c8f3c, roughness: 0.8, metalness: 0.2 }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.position.y = -0.05; // Slightly lower the ground scene.add(ground); // City Grid Setup const GRID_SIZE = 180; // Total city size const BLOCK_SIZE = 20; // Size of each city block const STREET_WIDTH = 8; // Width of streets const buildings = []; const buildingColliders = []; // Store building collision boxes const streetLights = []; // Store streetlight references const fireflies = []; // Store firefly references // Create street grid const createStreets = () => { const streetMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, roughness: 0.9, metalness: 0.1 }); // Horizontal streets for (let z = -GRID_SIZE/2; z <= GRID_SIZE/2; z += BLOCK_SIZE + STREET_WIDTH) { const streetGeometry = new THREE.PlaneGeometry(GRID_SIZE, STREET_WIDTH); const street = new THREE.Mesh(streetGeometry, streetMaterial); street.rotation.x = -Math.PI / 2; street.position.set(0, 0, z); // At ground level since ground is now lower scene.add(street); } // Vertical streets for (let x = -GRID_SIZE/2; x <= GRID_SIZE/2; x += BLOCK_SIZE + STREET_WIDTH) { const streetGeometry = new THREE.PlaneGeometry(STREET_WIDTH, GRID_SIZE); const street = new THREE.Mesh(streetGeometry, streetMaterial); street.rotation.x = -Math.PI / 2; street.position.set(x, 0, 0); // At ground level since ground is now lower scene.add(street); } }; // Create streetlights const createStreetLights = () => { const poleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 4, 8); const poleMaterial = new THREE.MeshStandardMaterial({ color: 0x202020, roughness: 0.7, metalness: 0.4 }); const lampGeometry = new THREE.SphereGeometry(0.3, 8, 8); const lampMaterial = new THREE.MeshStandardMaterial({ color: 0xffffcc, emissive: 0xffffcc, emissiveIntensity: 1.2 }); // Place streetlights along the streets for (let x = -GRID_SIZE/2 + STREET_WIDTH/2; x <= GRID_SIZE/2; x += BLOCK_SIZE + STREET_WIDTH) { for (let z = -GRID_SIZE/2 + STREET_WIDTH/2; z <= GRID_SIZE/2; z += BLOCK_SIZE + STREET_WIDTH) { const pole = new THREE.Mesh(poleGeometry, poleMaterial); const lamp = new THREE.Mesh(lampGeometry, lampMaterial); pole.position.set(x, 2, z); lamp.position.set(x, 4, z); pole.castShadow = true; pole.receiveShadow = true; scene.add(pole); scene.add(lamp); streetLights.push({ pole, lamp }); // Add point light for each streetlight const light = new THREE.PointLight(0xffffcc, 2.5, 25); light.position.set(x, 4, z); scene.add(light); } } }; // Create fireflies const createFireflies = () => { const fireflyGeometry = new THREE.SphereGeometry(0.05, 8, 8); for(let i = 0; i < 100; i++) { const fireflyMaterial = new THREE.MeshBasicMaterial({ color: 0x88ff88, transparent: true, opacity: 0.8 }); const firefly = new THREE.Mesh(fireflyGeometry, fireflyMaterial); // Random position near street level firefly.position.x = Math.random() * GRID_SIZE - GRID_SIZE/2; firefly.position.z = Math.random() * GRID_SIZE - GRID_SIZE/2; firefly.position.y = 1 + Math.random() * 2; // Add animation properties firefly.originalY = firefly.position.y; firefly.phase = Math.random() * Math.PI * 2; firefly.speed = 0.001 + Math.random() * 0.002; scene.add(firefly); fireflies.push(firefly); } }; // Create buildings in a grid pattern const createBuildings = () => { for (let x = -GRID_SIZE/2 + STREET_WIDTH; x < GRID_SIZE/2; x += BLOCK_SIZE + STREET_WIDTH) { for (let z = -GRID_SIZE/2 + STREET_WIDTH; z < GRID_SIZE/2; z += BLOCK_SIZE + STREET_WIDTH) { // Create 2-4 buildings per block const buildingsPerBlock = 2 + Math.floor(Math.random() * 3); const blockArea = { minX: x, maxX: x + BLOCK_SIZE, minZ: z, maxZ: z + BLOCK_SIZE }; for (let b = 0; b < buildingsPerBlock; b++) { const height = 10 + Math.random() * 30; const width = 5 + Math.random() * (BLOCK_SIZE/2 - 2); const depth = 5 + Math.random() * (BLOCK_SIZE/2 - 2); // Create building with windows const geometry = new THREE.BoxGeometry(width, height, depth); const material = new THREE.MeshStandardMaterial({ color: new THREE.Color( 0.7 + Math.random() * 0.2, 0.7 + Math.random() * 0.2, 0.7 + Math.random() * 0.2 ), roughness: 0.2, metalness: 0.8 }); // Add emissive windows const windowGeometry = new THREE.PlaneGeometry(0.5, 0.5); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffd700, emissiveIntensity: 0.6 + Math.random() * 1.0 }); const building = new THREE.Mesh(geometry, material); // Position within the block, leaving some space between buildings const padding = 2; const validX = Math.random() * (BLOCK_SIZE - width - padding * 2) + blockArea.minX + padding; const validZ = Math.random() * (BLOCK_SIZE - depth - padding * 2) + blockArea.minZ + padding; building.position.set( validX, height / 2, validZ ); building.castShadow = true; building.receiveShadow = true; // Add windows to buildings const windowCount = Math.floor(height / 2); for(let w = 0; w < windowCount; w++) { for(let side = 0; side < 4; side++) { const window = new THREE.Mesh(windowGeometry, windowMaterial); const yPos = -height/2 + 1 + w * 2; switch(side) { case 0: window.position.set(width/2 + 0.01, yPos, 0); window.rotation.y = Math.PI / 2; break; case 1: window.position.set(-width/2 - 0.01, yPos, 0); window.rotation.y = -Math.PI / 2; break; case 2: window.position.set(0, yPos, depth/2 + 0.01); break; case 3: window.position.set(0, yPos, -depth/2 - 0.01); window.rotation.y = Math.PI; break; } building.add(window); } } scene.add(building); buildings.push(building); // Add building collider info buildingColliders.push({ minX: validX - width/2, maxX: validX + width/2, minZ: validZ - depth/2, maxZ: validZ + depth/2 }); } } } }; createStreets(); createBuildings(); createStreetLights(); createFireflies(); // NPCs const npcs = []; // NPC body parts geometries const bodyGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.6, 8); const headGeometry = new THREE.SphereGeometry(0.15, 8, 8); const armGeometry = new THREE.CylinderGeometry(0.05, 0.05, 0.4, 8); const legGeometry = new THREE.CylinderGeometry(0.07, 0.05, 0.4, 8); for(let i = 0; i < 200; i++) { // Create materials with random clothing colors const skinMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(0.8, 0.6, 0.5), roughness: 0.3, metalness: 0.2 }); const clothingMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color( 0.1 + Math.random() * 0.5, 0.1 + Math.random() * 0.5, 0.1 + Math.random() * 0.5 ), roughness: 0.3, metalness: 0.2 }); // Create NPC group to hold all body parts const npc = new THREE.Group(); // Create body parts const body = new THREE.Mesh(bodyGeometry, clothingMaterial); const head = new THREE.Mesh(headGeometry, skinMaterial); const leftArm = new THREE.Mesh(armGeometry, clothingMaterial); const rightArm = new THREE.Mesh(armGeometry, clothingMaterial); const leftLeg = new THREE.Mesh(legGeometry, clothingMaterial); const rightLeg = new THREE.Mesh(legGeometry, clothingMaterial); // Position body parts body.position.y = 0.5; head.position.y = 0.9; leftArm.position.set(-0.25, 0.6, 0); rightArm.position.set(0.25, 0.6, 0); leftArm.rotation.z = Math.PI * 0.1; rightArm.rotation.z = -Math.PI * 0.1; leftLeg.position.set(-0.1, 0.2, 0); rightLeg.position.set(0.1, 0.2, 0); // Add all parts to the NPC group npc.add(body); npc.add(head); npc.add(leftArm); npc.add(rightArm); npc.add(leftLeg); npc.add(rightLeg); npc.position.x = Math.random() * 180 - 90; npc.position.z = Math.random() * 180 - 90; npc.position.y = 0.5; // Add random movement properties npc.targetX = Math.random() * 180 - 90; npc.targetZ = Math.random() * 180 - 90; npc.speed = 0.005 + Math.random() * 0.005; // Much slower movement npc.radius = 0.5; // Collision radius for NPC scene.add(npc); npcs.push(npc); } // Animation loop function animate() { requestAnimationFrame(animate); // Update sky shader time uniform for subtle movement skyMat.uniforms.time.value = performance.now(); // Animate fireflies fireflies.forEach(firefly => { const time = performance.now() * firefly.speed; // Gentle floating motion firefly.position.y = firefly.originalY + Math.sin(time + firefly.phase) * 0.2; // Pulsing light effect firefly.material.opacity = 0.4 + Math.sin(time * 2 + firefly.phase) * 0.4; }); // Animate streetlights streetLights.forEach(({ lamp }) => { // Subtle flickering effect if (Math.random() < 0.01) { lamp.material.emissiveIntensity = 0.8 + Math.random() * 0.6; } }); // Collision detection functions const checkBuildingCollision = (x, z) => { for (const building of buildingColliders) { if (x > building.minX && x < building.maxX && z > building.minZ && z < building.maxZ) { return true; } } return false; }; const checkNPCCollision = (npc1, x, z) => { for (const npc2 of npcs) { if (npc1 === npc2) continue; const dx = x - npc2.position.x; const dz = z - npc2.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < npc1.radius + npc2.radius) { return true; } } return false; }; const findNewTarget = (npc) => { let attempts = 0; let newX, newZ; do { newX = Math.random() * 180 - 90; newZ = Math.random() * 180 - 90; attempts++; } while ( (checkBuildingCollision(newX, newZ) || checkNPCCollision(npc, newX, newZ)) && attempts < 10 ); return { x: newX, z: newZ }; }; // Move NPCs npcs.forEach(npc => { // Animate walking const time = performance.now() * 0.002; // Only animate if moving if (Math.abs(npc.position.x - npc.targetX) > 0.1 || Math.abs(npc.position.z - npc.targetZ) > 0.1) { // Swing arms and legs const leftArm = npc.children[2]; const rightArm = npc.children[3]; const leftLeg = npc.children[4]; const rightLeg = npc.children[5]; leftArm.rotation.x = Math.sin(time) * 0.4; rightArm.rotation.x = -Math.sin(time) * 0.4; leftLeg.rotation.x = -Math.sin(time) * 0.4; rightLeg.rotation.x = Math.sin(time) * 0.4; } // Move towards target const dx = npc.targetX - npc.position.x; const dz = npc.targetZ - npc.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < 0.1) { // Set new target when reached const newTarget = findNewTarget(npc); npc.targetX = newTarget.x; npc.targetZ = newTarget.z; } else { // Calculate new position const newX = npc.position.x + (dx / distance) * npc.speed; const newZ = npc.position.z + (dz / distance) * npc.speed; // Check for collisions before moving if (!checkBuildingCollision(newX, newZ) && !checkNPCCollision(npc, newX, newZ)) { npc.position.x = newX; npc.position.z = newZ; // Rotate towards movement direction npc.rotation.y = Math.atan2(dx, dz); } else { // If collision detected, find new target const newTarget = findNewTarget(npc); npc.targetX = newTarget.x; npc.targetZ = newTarget.z; } } }); // Camera movement logic if (controlsRef.current.isBirdView) { camera.position.x = 120 * Math.cos(Date.now() * 0.00005); camera.position.z = 120 * Math.sin(Date.now() * 0.00005); camera.lookAt(0, 0, 0); } else { // Personal view movement const moveSpeed = 0.5; const direction = new THREE.Vector3(); // Calculate forward direction based on camera rotation direction.z = Math.cos(controlsRef.current.currentYaw); direction.x = Math.sin(controlsRef.current.currentYaw); direction.normalize(); if (controlsRef.current.moveForward) { camera.position.x += direction.x * moveSpeed; camera.position.z -= direction.z * moveSpeed; } if (controlsRef.current.moveBackward) { camera.position.x -= direction.x * moveSpeed; camera.position.z += direction.z * moveSpeed; } if (controlsRef.current.moveLeft) { camera.position.x -= direction.z * moveSpeed; camera.position.z -= direction.x * moveSpeed; } if (controlsRef.current.moveRight) { camera.position.x += direction.z * moveSpeed; camera.position.z += direction.x * moveSpeed; } // Update camera look direction camera.lookAt( camera.position.x + Math.sin(controlsRef.current.currentYaw), 2, camera.position.z - Math.cos(controlsRef.current.currentYaw) ); } renderer.render(scene, camera); } animate(); // Handle window resize const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); // Keyboard controls const handleKeyDown = (event) => { switch(event.code) { case 'KeyV': controlsRef.current.isBirdView = !controlsRef.current.isBirdView; if (controlsRef.current.isBirdView) { setBirdView(); } else { setPersonalView(); } break; case 'KeyW': controlsRef.current.moveForward = true; break; case 'KeyS': controlsRef.current.moveBackward = true; break; case 'KeyA': controlsRef.current.moveLeft = true; break; case 'KeyD': controlsRef.current.moveRight = true; break; } }; const handleKeyUp = (event) => { switch(event.code) { case 'KeyW': controlsRef.current.moveForward = false; break; case 'KeyS': controlsRef.current.moveBackward = false; break; case 'KeyA': controlsRef.current.moveLeft = false; break; case 'KeyD': controlsRef.current.moveRight = false; break; } }; const handleMouseMove = (event) => { if (!controlsRef.current.isBirdView) { controlsRef.current.currentYaw += event.movementX * 0.002; } }; // Add event listeners window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); document.addEventListener('mousemove', handleMouseMove); // Request pointer lock for mouse control mountRef.current.addEventListener('click', () => { if (!controlsRef.current.isBirdView) { mountRef.current.requestPointerLock(); } }); // Cleanup return () => { window.removeEventListener('resize', handleResize); window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); document.removeEventListener('mousemove', handleMouseMove); mountRef.current.removeChild(renderer.domElement); npcs.forEach(npc => { // Dispose of all body part geometries and materials npc.children.forEach(part => { part.geometry.dispose(); part.material.dispose(); }); }); streetLights.forEach(({ pole, lamp }) => { pole.geometry.dispose(); pole.material.dispose(); lamp.geometry.dispose(); lamp.material.dispose(); }); fireflies.forEach(firefly => { firefly.geometry.dispose(); firefly.material.dispose(); }); buildings.forEach(building => { building.geometry.dispose(); building.material.dispose(); }); groundGeometry.dispose(); groundMaterial.dispose(); renderer.dispose(); }; }, []); return (

City Simulator

Controls:
V: Toggle View
WASD: Move (in personal view)
Mouse: Look around (in personal view)
Click: Lock mouse cursor

); }; const App = () => { return ; }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();