Metaverse City

import * as THREE from 'three'; let scene, camera, renderer, ambientLight, directionalLight; export function initScene() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // Sky blue background scene.fog = new THREE.Fog(0x87ceeb, 50, 250); // Adjusted fog // Camera - Will be controlled by FPS controls camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.7, 10); // Start at roughly eye level // Renderer 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); // Lighting ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(50, 100, 75); // Adjusted light position directionalLight.castShadow = true; // Configure shadow properties directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 300; // Adjusted shadow distance directionalLight.shadow.camera.left = -100; directionalLight.shadow.camera.right = 100; directionalLight.shadow.camera.top = 100; directionalLight.shadow.camera.bottom = -100; scene.add(directionalLight); // Handle window resize window.addEventListener('resize', onWindowResize); return { scene, camera, renderer }; } function onWindowResize() { if (camera && renderer) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } } import * as THREE from 'three'; const textureLoader = new THREE.TextureLoader(); // Simple concrete texture const buildingTexture = textureLoader.load('https://threejs.org/examples/textures/brick_diffuse.jpg'); // Using brick as placeholder buildingTexture.wrapS = THREE.RepeatWrapping; buildingTexture.wrapT = THREE.RepeatWrapping; export function createCity(scene) { // Ground Plane const groundGeometry = new THREE.PlaneGeometry(300, 300); // Larger ground const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, side: THREE.DoubleSide }); // Grey ground const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; // Rotate to be horizontal ground.receiveShadow = true; // Allow ground to receive shadows scene.add(ground); // Simple Buildings (Cubes) const buildingGeometry = new THREE.BoxGeometry(1, 1, 1); // Use 1x1x1 for easy scaling const gridSpacing = 15; // Increased spacing const gridSize = 12; // Larger grid for (let i = -gridSize / 2; i < gridSize / 2; i++) { for (let j = -gridSize / 2; j < gridSize / 2; j++) { if (Math.abs(i * gridSpacing) < 5 && Math.abs(j * gridSpacing) < 5) continue; // Clear center area slightly if (Math.random() > 0.25) { // Increased building density // Clone material for each building const buildingMaterial = new THREE.MeshStandardMaterial({ map: buildingTexture, roughness: 0.8, metalness: 0.2 }); const building = new THREE.Mesh(buildingGeometry, buildingMaterial); // Randomize height and size slightly const height = Math.random() * 25 + 8; // Taller buildings const width = Math.random() * 5 + 5; const depth = Math.random() * 5 + 5; // Adjust texture repeat based on size const repeatX = Math.round(width / 4); // Adjust divisor as needed const repeatY = Math.round(height / 4); const repeatZ = Math.round(depth / 4); // Need to access geometry UVs - inefficient to do per building. // A better approach uses custom geometry or texture atlases. // For simplicity here, we'll just repeat the texture on the material. building.material.map.repeat.set(repeatX, repeatY); // Note: This applies same repeat to all faces. More advanced UV mapping needed for perfect results. building.scale.set(width, height, depth); // Position buildings const xPos = i * gridSpacing + (Math.random() - 0.5) * gridSpacing * 0.3; const zPos = j * gridSpacing + (Math.random() - 0.5) * gridSpacing * 0.3; building.position.set(xPos, height / 2, zPos); // Position based on center bottom building.castShadow = true; building.receiveShadow = true; scene.add(building); } } } } import * as THREE from 'three'; export class MobileFpsControls { constructor(camera, domElement) { this.camera = camera; this.domElement = domElement || document.body; this.moveSpeed = 5.0; this.lookSpeed = 0.003; this.moveForward = false; this.moveBackward = false; this.moveLeft = false; this.moveRight = false; this.joystickWrapper = document.getElementById('joystickWrapper'); this.joystickHandle = document.getElementById('joystickHandle'); this.lookArea = document.getElementById('lookArea'); this.joystickActive = false; this.joystickCenter = { x: 0, y: 0 }; this.joystickCurrent = { x: 0, y: 0 }; this.joystickRadius = this.joystickWrapper.offsetWidth / 2; this.joystickTouchId = null; this.lookActive = false; this.lookStartX = 0; this.lookStartY = 0; this.lookCurrentX = 0; this.lookCurrentY = 0; this.lookTouchId = null; this.euler = new THREE.Euler(0, 0, 0, 'YXZ'); // Use YXZ order for FPS controls this.vector = new THREE.Vector3(); // Reusable vector for movement calculation this._onPointerDown = this.onPointerDown.bind(this); this._onPointerMove = this.onPointerMove.bind(this); this._onPointerUp = this.onPointerUp.bind(this); this.connect(); } connect() { // Use pointer events for broader compatibility (touch + mouse for testing) this.domElement.addEventListener('pointerdown', this._onPointerDown); // Add move/up listeners to the window to catch events outside the initial element window.addEventListener('pointermove', this._onPointerMove); window.addEventListener('pointerup', this._onPointerUp); } disconnect() { this.domElement.removeEventListener('pointerdown', this._onPointerDown); window.removeEventListener('pointermove', this._onPointerMove); window.removeEventListener('pointerup', this._onPointerUp); } onPointerDown(event) { // event.preventDefault(); // Prevent default actions like scrolling const x = event.clientX; const y = event.clientY; // Check if touch is within joystick bounds const rect = this.joystickWrapper.getBoundingClientRect(); const dx = x - (rect.left + rect.width / 2); const dy = y - (rect.top + rect.height / 2); const distSq = dx * dx + dy * dy; if (distSq <= this.joystickRadius * this.joystickRadius * 4 && this.joystickTouchId === null) { // Allow slightly larger activation area this.joystickActive = true; this.joystickTouchId = event.pointerId; this.joystickCenter.x = rect.left + rect.width / 2; this.joystickCenter.y = rect.top + rect.height / 2; this.joystickCurrent.x = x; this.joystickCurrent.y = y; this.updateJoystickHandle(); } else if (x > window.innerWidth / 2 && this.lookTouchId === null) { // Touch on the right half this.lookActive = true; this.lookTouchId = event.pointerId; this.lookStartX = x; this.lookStartY = y; this.lookCurrentX = x; this.lookCurrentY = y; } } onPointerMove(event) { // event.preventDefault(); if (this.joystickActive && event.pointerId === this.joystickTouchId) { this.joystickCurrent.x = event.clientX; this.joystickCurrent.y = event.clientY; this.updateJoystickHandle(); this.updateMovementFlags(); } else if (this.lookActive && event.pointerId === this.lookTouchId) { this.lookCurrentX = event.clientX; this.lookCurrentY = event.clientY; } } onPointerUp(event) { // event.preventDefault(); if (event.pointerId === this.joystickTouchId) { this.joystickActive = false; this.joystickTouchId = null; this.resetJoystickHandle(); this.resetMovementFlags(); } if (event.pointerId === this.lookTouchId) { this.lookActive = false; this.lookTouchId = null; // Keep last look position, don't reset lookStartX/Y } } updateJoystickHandle() { let dx = this.joystickCurrent.x - this.joystickCenter.x; let dy = this.joystickCurrent.y - this.joystickCenter.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist > this.joystickRadius) { dx *= this.joystickRadius / dist; dy *= this.joystickRadius / dist; } this.joystickHandle.style.transform = `translate(${dx}px, ${dy}px)`; } resetJoystickHandle() { this.joystickHandle.style.transform = `translate(0px, 0px)`; } updateMovementFlags() { let dx = this.joystickCurrent.x - this.joystickCenter.x; let dy = this.joystickCurrent.y - this.joystickCenter.y; const dist = Math.sqrt(dx * dx + dy * dy); const threshold = this.joystickRadius * 0.2; // 20% threshold if (dist < threshold) { this.resetMovementFlags(); return; } const angle = Math.atan2(dy, dx); // Determine movement based on angle (approximate) // Forward/Backward if (Math.abs(dy) > Math.abs(dx)) { this.moveForward = dy < -threshold; this.moveBackward = dy > threshold; this.moveLeft = false; this.moveRight = false; } // Left/Right else { this.moveLeft = dx < -threshold; this.moveRight = dx > threshold; this.moveForward = false; this.moveBackward = false; } // More nuanced diagonal movement could be added here } resetMovementFlags() { this.moveForward = false; this.moveBackward = false; this.moveLeft = false; this.moveRight = false; } update(delta) { // --- Look Rotation --- if (this.lookActive) { const deltaX = this.lookCurrentX - this.lookStartX; const deltaY = this.lookCurrentY - this.lookStartY; this.euler.setFromQuaternion(this.camera.quaternion); this.euler.y -= deltaX * this.lookSpeed; this.euler.x -= deltaY * this.lookSpeed; // Clamp vertical rotation (pitch) this.euler.x = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, this.euler.x)); this.camera.quaternion.setFromEuler(this.euler); // Reset start points for continuous movement feel this.lookStartX = this.lookCurrentX; this.lookStartY = this.lookCurrentY; } // --- Movement --- const speed = this.moveSpeed * delta; this.vector.set(0, 0, 0); if (this.moveForward) this.vector.z -= 1; if (this.moveBackward) this.vector.z += 1; if (this.moveLeft) this.vector.x -= 1; if (this.moveRight) this.vector.x += 1; // Apply camera direction to movement vector this.vector.normalize().applyQuaternion(this.camera.quaternion); // Apply movement this.camera.position.addScaledVector(this.vector, speed); // Optional: Add simple gravity or collision detection here later // Keep camera at a fixed height for now this.camera.position.y = 1.7; } dispose() { this.disconnect(); } } import * as THREE from 'three'; // Remove OrbitControls import // import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { initScene } from './sceneSetup.js'; import { createCity } from './cityElements.js'; import { MobileFpsControls } from './mobileFpsControls.js'; // Import new controls // Initialize scene, camera, renderer const { scene, camera, renderer } = initScene(); // Add controls const controls = new MobileFpsControls(camera, renderer.domElement); // Create city elements createCity(scene); // Clock for delta time const clock = new THREE.Clock(); // Animation loop function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); // Get time difference between frames controls.update(delta); // Update controls with delta time renderer.render(scene, camera); } animate();