import React, { useRef, useEffect, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; import { Raycaster } from 'three'; // Noise function for rocky texture function createNoiseTexture() { const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 256; const ctx = canvas.getContext('2d'); for (let x = 0; x < canvas.width; x++) { for (let y = 0; y < canvas.height; y++) { const value = Math.random() * 0.3 + 0.7; ctx.fillStyle = `rgb(${value * 60},${value * 60},${value * 60})`; ctx.fillRect(x, y, 1, 1); } } return new THREE.CanvasTexture(canvas); } const CitySimulator = () => { const mountRef = useRef(null); useEffect(() => { // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(50, 50, 50); scene.add(directionalLight); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.set(30, 30, 30); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Ground with roads and sidewalks const groundGeometry = new THREE.PlaneGeometry(400, 400, 400, 400); // Create roads // Road creation will start here // Create road texture and material first const roadTexture = createRoadTexture(); const roadMaterial = new THREE.MeshStandardMaterial({ map: roadTexture, roughness: 0.8, metalness: 0.2 }); function createRoadTexture() { const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 512; const ctx = canvas.getContext('2d'); // Enhanced asphalt texture ctx.fillStyle = '#202020'; ctx.fillRect(0, 0, 512, 512); // Add noise to asphalt for (let i = 0; i < 5000; i++) { const x = Math.random() * 512; const y = Math.random() * 512; const gray = Math.random() * 20 + 20; ctx.fillStyle = `rgb(${gray},${gray},${gray})`; ctx.fillRect(x, y, 2, 2); } // Center line ctx.strokeStyle = '#ffff00'; ctx.lineWidth = 4; ctx.setLineDash([30, 20]); ctx.beginPath(); ctx.moveTo(256, 0); ctx.lineTo(256, 512); ctx.stroke(); // Edge lines (white) ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 3; ctx.setLineDash([]); ctx.beginPath(); ctx.moveTo(20, 0); ctx.lineTo(20, 512); ctx.moveTo(492, 0); ctx.lineTo(492, 512); ctx.stroke(); return new THREE.CanvasTexture(canvas); } // Create roads const roadWidth = 20; const roads = new THREE.Group(); // Grid roads const gridSpacing = 50; // Tighter grid for (let i = -3; i <= 3; i++) { const roadH = new THREE.Mesh( new THREE.PlaneGeometry(400, roadWidth), roadMaterial ); const roadV = new THREE.Mesh( new THREE.PlaneGeometry(roadWidth, 400), roadMaterial ); roadH.rotation.x = Math.PI * -0.5; roadV.rotation.x = Math.PI * -0.5; roadH.position.set(0, 0.1, i * gridSpacing); roadV.position.set(i * gridSpacing, 0.1, 0); roads.add(roadH); roads.add(roadV); } scene.add(roads); const noiseTexture = createNoiseTexture(); const groundMaterial = new THREE.MeshStandardMaterial({ map: noiseTexture, bumpMap: noiseTexture, bumpScale: 0.2, side: THREE.DoubleSide, roughness: 0.9, metalness: 0.1 }); // Add sidewalks const sidewalkGeometry = new THREE.PlaneGeometry(400, 16); const sidewalkMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.2 }); const sidewalk1 = new THREE.Mesh(sidewalkGeometry, sidewalkMaterial); const sidewalk2 = new THREE.Mesh(sidewalkGeometry, sidewalkMaterial); sidewalk1.rotation.x = Math.PI * -0.5; sidewalk2.rotation.x = Math.PI * -0.5; sidewalk1.position.z = 50; sidewalk2.position.z = -50; scene.add(sidewalk1); scene.add(sidewalk2); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = Math.PI * -0.5; scene.add(ground); // Grid helper const gridHelper = new THREE.GridHelper(400, 80); scene.add(gridHelper); // Generate buildings const buildings = new THREE.Group(); const buildingCount = 100; function createBuildingPair(x, z) { // Building style variations const styles = { modern: { width: () => 4 + Math.random() * 4, height: () => 25 + Math.random() * 45, depth: () => 4 + Math.random() * 4, color: () => new THREE.Color( 0.7 + Math.random() * 0.3, 0.7 + Math.random() * 0.3, 0.7 + Math.random() * 0.3 ), roughness: 0.3, metalness: 0.7 }, classic: { width: () => 3 + Math.random() * 3, height: () => 15 + Math.random() * 25, depth: () => 3 + Math.random() * 3, color: () => new THREE.Color( 0.6 + Math.random() * 0.2, 0.4 + Math.random() * 0.2, 0.3 + Math.random() * 0.2 ), roughness: 0.8, metalness: 0.2 } }; const style1 = Math.random() > 0.5 ? styles.modern : styles.classic; const style2 = Math.random() > 0.5 ? styles.modern : styles.classic; // First building const width1 = style1.width(); const height1 = style1.height(); const depth1 = style1.depth(); // Create more detailed building geometry const segments = Math.floor(width1 * 2); // More geometric detail const geometry1 = new THREE.BoxGeometry(width1, height1, depth1, segments, segments, segments); const material1 = new THREE.MeshStandardMaterial({ color: style1.color(), roughness: style1.roughness, metalness: style1.metalness }); // Add random windows const windowGeometry = new THREE.BoxGeometry(0.3, 0.5, 0.1); const windowMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(0.9, 0.9, 1), emissive: new THREE.Color(0.3, 0.3, 0.3), metalness: 0.8, roughness: 0.2 }); const building1 = new THREE.Group(); const mainStructure1 = new THREE.Mesh(geometry1, material1); building1.add(mainStructure1); // Add windows to building1 const windowRows = Math.floor(height1 / 2); const windowCols = Math.floor(width1 * 1.5); for (let row = 1; row < windowRows; row++) { for (let col = 0; col < windowCols; col++) { const window = new THREE.Mesh(windowGeometry, windowMaterial); window.position.set( (col - windowCols/2) * 0.8 + 0.4, row * 1.5, depth1/2 ); building1.add(window); } } building1.position.set(x, height1 / 2, z); // Second building (connected) const width2 = 3 + Math.random() * 3; const height2 = 15 + Math.random() * 35; const depth2 = 3 + Math.random() * 3; const geometry2 = new THREE.BoxGeometry(width2, height2, depth2); const material2 = new THREE.MeshStandardMaterial({ color: new THREE.Color( 0.3 + Math.random() * 0.7, 0.3 + Math.random() * 0.7, 0.3 + Math.random() * 0.7 ), roughness: 0.7, metalness: 0.3 }); const building2 = new THREE.Mesh(geometry2, material2); // Position second building adjacent to first const angle = Math.random() * Math.PI * 2; const distance = (width1 + width2) / 2; building2.position.set( x + Math.cos(angle) * distance, height2 / 2, z + Math.sin(angle) * distance ); buildings.add(building1); buildings.add(building2); } for (let i = 0; i < buildingCount / 2; i++) { let x = Math.random() * 320 - 160; let z = Math.random() * 320 - 160; // Avoid placing buildings on roads const roadBuffer = 15; const gridSpacing = 60; // Check grid roads for (let i = -2; i <= 2; i++) { if (Math.abs(x - i * gridSpacing) < roadBuffer) { x = (x < i * gridSpacing) ? i * gridSpacing - roadBuffer - 5 : i * gridSpacing + roadBuffer + 5; } if (Math.abs(z - i * gridSpacing) < roadBuffer) { z = (z < i * gridSpacing) ? i * gridSpacing - roadBuffer - 5 : i * gridSpacing + roadBuffer + 5; } } createBuildingPair(x, z); } scene.add(buildings); // Add people const people = new THREE.Group(); const personCount = 30; function createPerson() { const group = new THREE.Group(); // Body const bodyGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.2, 8); const bodyMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color( Math.random() * 0.5 + 0.5, Math.random() * 0.5, Math.random() * 0.5 ) }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); // Head const headGeometry = new THREE.SphereGeometry(0.2, 8, 8); const head = new THREE.Mesh(headGeometry, bodyMaterial); head.position.y = 0.8; group.add(body); group.add(head); // Random position on sidewalks const onFirstSidewalk = Math.random() > 0.5; group.position.x = Math.random() * 320 - 160; group.position.y = 0.6; group.position.z = (onFirstSidewalk ? 50 : -50) + (Math.random() * 8 - 4); // Random walking direction group.userData = { speed: Math.random() * 0.05 + 0.02, direction: Math.random() > 0.5 ? 1 : -1 }; return group; } for (let i = 0; i < personCount; i++) { people.add(createPerson()); } scene.add(people); // Camera rotation let angle = 0; const radius = 180; const heightOffset = 120; let isRotating = true; let isDaytime = true; let timeOfDay = 0; // Raycasting setup const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function addBuildingAtPosition(position) { // Create a pair of buildings when clicking let x = position.x; let z = position.z; // Avoid placing buildings on roads const roadBuffer = 15; const gridSpacing = 60; // Check grid roads for (let i = -2; i <= 2; i++) { if (Math.abs(x - i * gridSpacing) < roadBuffer) { x = (x < i * gridSpacing) ? i * gridSpacing - roadBuffer - 5 : i * gridSpacing + roadBuffer + 5; } if (Math.abs(z - i * gridSpacing) < roadBuffer) { z = (z < i * gridSpacing) ? i * gridSpacing - roadBuffer - 5 : i * gridSpacing + roadBuffer + 5; } } createBuildingPair(x, z); } // Animation function animate() { requestAnimationFrame(animate); if (isRotating) { angle += 0.002; camera.position.x = radius * Math.cos(angle); camera.position.z = radius * Math.sin(angle); camera.position.y = heightOffset; camera.lookAt(0, 0, 0); } // Day/night cycle timeOfDay += 0.005; const intensity = Math.cos(timeOfDay) * 0.5 + 0.5; directionalLight.intensity = intensity; ambientLight.intensity = intensity * 0.3; scene.background = new THREE.Color(0x87ceeb).multiplyScalar(intensity); // Animate people people.children.forEach((person) => { person.position.x += person.userData.speed * person.userData.direction; // Change direction at bounds if (person.position.x > 160 || person.position.x < -160) { person.userData.direction *= -1; person.rotation.y = person.userData.direction > 0 ? 0 : Math.PI; } }); renderer.render(scene, camera); } animate(); // Handle clicks function handleClick(event) { // Convert mouse position to normalized device coordinates mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObject(ground); if (intersects.length > 0) { addBuildingAtPosition(intersects[0].point); } else { isRotating = !isRotating; } } window.addEventListener('click', handleClick); // Handle window resize function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', handleResize); // Cleanup return () => { window.removeEventListener('click', handleClick); window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); scene.traverse((object) => { if (object.geometry) object.geometry.dispose(); if (object.material) object.material.dispose(); }); renderer.dispose(); }; }, []); return (

Click on the ground to add buildings
Click the sky to toggle camera rotation
Watch the day/night cycle

); }; const App = () => { return (

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