First Person Block Game

Okay, creating a truly endless, procedurally generated open world like Minecraft is a complex task involving chunk management, noise algorithms, and significant optimization. This next step will introduce: 1. **Chunk System:** Dividing the world into manageable chunks. 2. **Basic Procedural Generation:** Using simplex noise to generate a simple height map for the terrain. 3. **Instanced Rendering:** Using `THREE.InstancedMesh` for efficient rendering of many blocks (grass, dirt, wood, leaves). 4. **Chunk Loading/Unloading:** Loading chunks around the player and unloading distant ones. 5. **Simple Tree Generation:** Placing basic tree structures. **Note:** This is a foundational step. Collision detection with the new terrain will be basic, and performance optimization will be an ongoing process. First Person Block Game

Click to play

Move: WASD
Jump: SPACE
Look: MOUSE

body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #000; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overscroll-behavior: none; } canvas { display: block; } #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 10; } #instructions { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 14px; cursor: pointer; } #mobile-controls { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; } #joystick-zone { position: absolute; bottom: 30px; left: 30px; width: 120px; height: 120px; background-color: rgba(128, 128, 128, 0.3); border-radius: 50%; pointer-events: auto; } #joystick-zone .nipple { opacity: 0.7; } #jump-button { position: absolute; bottom: 40px; right: 40px; width: 80px; height: 80px; background-color: rgba(128, 128, 128, 0.5); border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; color: white; pointer-events: auto; -webkit-tap-highlight-color: transparent; } #jump-button::before { content: "JUMP"; } import * as THREE from 'three'; import { setupControls } from './controls.js'; import { World } from './world.js'; // Import the World class let camera, scene, renderer; let controlsAdapter; let world; // Instance of the World class const clock = new THREE.Clock(); const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0; function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); scene.fog = new THREE.Fog(0x87ceeb, 50, 150); // Adjust fog based on view distance // Camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // Initial position will be set by controls/world // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // Lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Slightly brighter ambient scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); // Slightly brighter directional directionalLight.position.set(30, 50, 20); // Adjust light position directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; // Increase shadow map size directionalLight.shadow.mapSize.height = 2048; // Adjust shadow camera frustum based on expected world size/view distance const shadowCamSize = 50; directionalLight.shadow.camera.near = 1; directionalLight.shadow.camera.far = 150; directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize; directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize; directionalLight.shadow.bias = -0.0005; // Adjust shadow bias if needed scene.add(directionalLight); scene.add(directionalLight.target); // Ensure target is added // World - Initialize the chunked world world = new World(scene); // Controls - Pass camera, renderer.domElement, isTouchDevice flag, and world instance controlsAdapter = setupControls(camera, renderer.domElement, isTouchDevice, world); scene.add(controlsAdapter.cameraGroup); // Set initial player position slightly above potential terrain controlsAdapter.cameraGroup.position.set(0, world.params.chunkSize, 0); // Start higher // Update light target to follow player (optional, but improves shadow quality near player) directionalLight.target = controlsAdapter.cameraGroup; // Show/Hide UI based on device type if (isTouchDevice) { document.getElementById('blocker').style.display = 'none'; document.getElementById('mobile-controls').style.display = 'block'; } else { document.getElementById('mobile-controls').style.display = 'none'; } // Resize listener window.addEventListener('resize', onWindowResize); // Start animation loop animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); const playerPosition = controlsAdapter.cameraGroup.position; // Update controls (movement and look) if (controlsAdapter && controlsAdapter.update) { controlsAdapter.update(delta); } // Update world based on player position (load/unload chunks) world.update(playerPosition); renderer.render(scene, camera); } init(); import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import nipplejs from 'nipplejs'; const PLAYER_HEIGHT = 1.8; // Player eye height const PLAYER_RADIUS = 0.4; // Player collision radius const GRAVITY = 30.0; const MOVE_SPEED = 5.0; const JUMP_VELOCITY = 10.0; const TOUCH_LOOK_SENSITIVITY = 0.002; // Shared state variables let velocity = new THREE.Vector3(); let direction = new THREE.Vector3(); let canJump = false; let wantsToJump = false; // Desktop state let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; // Mobile state let joystickData = { angle: null, force: 0 }; let touchLookData = { active: false, identifier: null, startX: 0, startY: 0, currentX: 0, currentY: 0 }; // Helper vectors const forwardVector = new THREE.Vector3(); const sideVector = new THREE.Vector3(); const worldUp = new THREE.Vector3(0, 1, 0); // Define world up vector // Reference to the world for collision detection let worldInstance = null; export function setupControls(camera, domElement, isTouchDevice, world) { worldInstance = world; // Store world reference const cameraGroup = new THREE.Group(); // cameraGroup.position.y = PLAYER_HEIGHT; // Initial height set in main.js now cameraGroup.add(camera); let updateFunction; if (isTouchDevice) { setupMobileControls(camera, cameraGroup, domElement); updateFunction = (delta) => updateMobileControls(delta, camera, cameraGroup); } else { const pointerLockControls = setupDesktopControls(camera, cameraGroup, domElement); updateFunction = (delta) => updateDesktopControls(delta, pointerLockControls, cameraGroup); } // Return an adapter object return { cameraGroup: cameraGroup, update: (delta) => { // Common physics update before specific control updates updatePhysicsAndCollision(delta, cameraGroup); // Call the device-specific update function updateFunction(delta); } }; } // --- Physics and Collision (Simplified) --- function updatePhysicsAndCollision(delta, cameraGroup) { if (!worldInstance) return; // Don't run if world isn't ready // Apply gravity velocity.y -= GRAVITY * delta; // --- Basic Collision Detection --- // Store current position before applying velocity const currentPos = cameraGroup.position.clone(); const nextPos = currentPos.clone(); // Apply XZ velocity nextPos.x += velocity.x * delta; nextPos.z += velocity.z * delta; // Check XZ collision (very basic, checks center point + radius) const blockX = Math.round(nextPos.x); const blockZ = Math.round(nextPos.z); const playerFeetY = Math.floor(currentPos.y - PLAYER_HEIGHT + 0.1); // Check block at feet level const playerHeadY = Math.floor(currentPos.y + 0.1); // Check block at head level // Check collision at feet level if (worldInstance.getBlock(blockX, playerFeetY, blockZ) || worldInstance.getBlock(blockX, playerFeetY + 1, blockZ)) { // Simple response: Stop XZ movement if colliding horizontally near feet velocity.x = 0; velocity.z = 0; nextPos.x = currentPos.x; // Revert X nextPos.z = currentPos.z; // Revert Z } // Check collision at head level (prevents walking through walls higher up) if (worldInstance.getBlock(blockX, playerHeadY, blockZ) || worldInstance.getBlock(blockX, playerHeadY + 1, blockZ)) { velocity.x = 0; velocity.z = 0; nextPos.x = currentPos.x; nextPos.z = currentPos.z; } // Apply Y velocity nextPos.y += velocity.y * delta; // Check Y collision (ground and ceiling) const groundBlockY = Math.floor(nextPos.y - PLAYER_HEIGHT); const feetBlockX = Math.round(nextPos.x); // Use potentially updated XZ const feetBlockZ = Math.round(nextPos.z); canJump = false; // Assume cannot jump unless ground is detected if (velocity.y <= 0 && worldInstance.getBlock(feetBlockX, groundBlockY, feetBlockZ)) { // Collision with ground velocity.y = 0; nextPos.y = groundBlockY + 1 + PLAYER_HEIGHT; // Place player exactly on top canJump = true; } else { // Check ceiling collision const headBlockY = Math.floor(nextPos.y + 0.2); // Check slightly above head if (velocity.y > 0 && worldInstance.getBlock(feetBlockX, headBlockY, feetBlockZ)) { velocity.y = 0; nextPos.y = headBlockY - 0.2; // Stop just below ceiling } } // Update camera group position with potentially adjusted nextPos cameraGroup.position.copy(nextPos); // Apply damping (after collision resolution) velocity.x -= velocity.x * 10.0 * delta; velocity.z -= velocity.z * 10.0 * delta; // Prevent falling through world if something goes wrong if (cameraGroup.position.y < -50) { cameraGroup.position.y = worldInstance.params.chunkSize; // Reset height velocity.y = 0; } } // --- Desktop Controls --- function setupDesktopControls(camera, cameraGroup, domElement) { const controls = new PointerLockControls(camera, domElement); const blocker = document.getElementById('blocker'); const instructions = document.getElementById('instructions'); instructions.addEventListener('click', () => controls.lock()); controls.addEventListener('lock', () => { instructions.style.display = 'none'; blocker.style.display = 'none'; }); controls.addEventListener('unlock', () => { blocker.style.display = 'flex'; instructions.style.display = ''; moveForward = moveBackward = moveLeft = moveRight = false; }); const onKeyDown = (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; case 'Space': if (canJump) { velocity.y += JUMP_VELOCITY; canJump = false; } break; } }; const onKeyUp = (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); return controls; } function updateDesktopControls(delta, controls, cameraGroup) { if (!controls.isLocked) return; // Calculate movement direction based on camera look direction (XZ plane) controls.getDirection(forwardVector); forwardVector.y = 0; // Project onto XZ plane forwardVector.normalize(); sideVector.crossVectors(worldUp, forwardVector).normalize(); // Use worldUp direction.z = Number(moveForward) - Number(moveBackward); direction.x = Number(moveRight) - Number(moveLeft); direction.normalize(); // Ensure consistent speed diagonally // Calculate desired velocity change based on input and camera direction const desiredVelocityX = (forwardVector.x * direction.z + sideVector.x * direction.x) * MOVE_SPEED; const desiredVelocityZ = (forwardVector.z * direction.z + sideVector.z * direction.x) * MOVE_SPEED; // Apply acceleration towards desired velocity // This provides a slightly smoother feel than directly setting velocity const accelerationFactor = 30.0; // How quickly the player accelerates velocity.x += (desiredVelocityX - velocity.x) * accelerationFactor * delta; velocity.z += (desiredVelocityZ - velocity.z) * accelerationFactor * delta; // Physics/collision update is now handled in the main update wrapper } // --- Mobile Controls --- function setupMobileControls(camera, cameraGroup, domElement) { const joystickZone = document.getElementById('joystick-zone'); const jumpButton = document.getElementById('jump-button'); const mobileControlsDiv = document.getElementById('mobile-controls'); const joystickManager = nipplejs.create({ zone: joystickZone, mode: 'static', position: { left: '50%', top: '50%' }, color: 'white', size: 100 }); joystickManager.on('move', (evt, data) => { joystickData.angle = data.angle.radian; joystickData.force = data.force; }); joystickManager.on('end', () => { joystickData.angle = null; joystickData.force = 0; }); jumpButton.addEventListener('touchstart', (e) => { e.preventDefault(); if (canJump) wantsToJump = true; }, { passive: false }); mobileControlsDiv.addEventListener('touchstart', (e) => { if (!touchLookData.active) { for (let i = 0; i < e.changedTouches.length; i++) { const touch = e.changedTouches[i]; const targetElement = document.elementFromPoint(touch.clientX, touch.clientY); if (targetElement !== joystickZone && !joystickZone.contains(targetElement) && targetElement !== jumpButton) { touchLookData.active = true; touchLookData.identifier = touch.identifier; touchLookData.startX = touch.clientX; touchLookData.startY = touch.clientY; touchLookData.currentX = touch.clientX; touchLookData.currentY = touch.clientY; break; } } } }, { passive: false }); mobileControlsDiv.addEventListener('touchmove', (e) => { if (touchLookData.active) { for (let i = 0; i < e.changedTouches.length; i++) { const touch = e.changedTouches[i]; if (touch.identifier === touchLookData.identifier) { touchLookData.currentX = touch.clientX; touchLookData.currentY = touch.clientY; break; } } } }, { passive: false }); const onTouchEndOrCancel = (e) => { if (touchLookData.active) { for (let i = 0; i < e.changedTouches.length; i++) { const touch = e.changedTouches[i]; if (touch.identifier === touchLookData.identifier) { touchLookData.active = false; touchLookData.identifier = null; break; } } } }; mobileControlsDiv.addEventListener('touchend', onTouchEndOrCancel); mobileControlsDiv.addEventListener('touchcancel', onTouchEndOrCancel); } function updateMobileControls(delta, camera, cameraGroup) { // --- Handle Look --- if (touchLookData.active) { const deltaX = touchLookData.currentX - touchLookData.startX; const deltaY = touchLookData.currentY - touchLookData.startY; cameraGroup.rotation.y -= deltaX * TOUCH_LOOK_SENSITIVITY; camera.rotation.x -= deltaY * TOUCH_LOOK_SENSITIVITY; camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x)); touchLookData.startX = touchLookData.currentX; touchLookData.startY = touchLookData.currentY; } // --- Handle Jump --- if (wantsToJump) { if (canJump) { velocity.y += JUMP_VELOCITY; canJump = false; } wantsToJump = false; } // --- Handle Movement --- if (joystickData.force > 0.1) { const angle = joystickData.angle; const speed = MOVE_SPEED * joystickData.force; // Get camera group's forward direction (based on its Y rotation) forwardVector.set(0, 0, -1).applyQuaternion(cameraGroup.quaternion); forwardVector.y = 0; // Project onto XZ plane forwardVector.normalize(); sideVector.crossVectors(worldUp, forwardVector).normalize(); // Use worldUp // Calculate movement direction based on joystick angle relative to forward const moveX = Math.sin(angle); // Corresponds to sideVector const moveZ = -Math.cos(angle); // Corresponds to forwardVector // Combine directions scaled by joystick input direction.copy(forwardVector).multiplyScalar(moveZ).addScaledVector(sideVector, moveX); direction.normalize(); // Calculate desired velocity change const desiredVelocityX = direction.x * speed; const desiredVelocityZ = direction.z * speed; // Apply acceleration const accelerationFactor = 30.0; velocity.x += (desiredVelocityX - velocity.x) * accelerationFactor * delta; velocity.z += (desiredVelocityZ - velocity.z) * accelerationFactor * delta; } else { // If joystick is not active, still apply damping (handled in physics update) } // Physics/collision update is now handled in the main update wrapper } import * as THREE from 'three'; import { SimplexNoise } from 'simplex-noise'; // Block Types Enum (using an object) const Block = { AIR: 0, GRASS: 1, DIRT: 2, STONE: 3, WOOD: 4, LEAVES: 5, }; // World Parameters const CHUNK_SIZE = 16; // Size of chunk (width/depth) const CHUNK_HEIGHT = 64; // Max height of chunk const VIEW_DISTANCE = 4; // Chunks to load around player (radius) const TERRAIN_HEIGHT_SCALE = 15; // Max height variation const TERRAIN_SMOOTHNESS = 60; // Noise frequency for heightmap const TREE_DENSITY = 0.03; // Chance of a tree spawning on a grass block const TREE_HEIGHT_MIN = 4; const TREE_HEIGHT_MAX = 7; const LEAF_RADIUS = 2; // Instanced Mesh Parameters const MAX_INSTANCES_PER_CHUNK = CHUNK_SIZE * CHUNK_SIZE * CHUNK_HEIGHT; // Theoretical max export class World { constructor(scene) { this.scene = scene; this.chunks = new Map(); // Store generated chunks { 'x,z': chunkData } this.noise = new SimplexNoise(); this.lastPlayerChunkX = Infinity; this.lastPlayerChunkZ = Infinity; this.params = { // Expose some params if needed elsewhere chunkSize: CHUNK_SIZE, chunkHeight: CHUNK_HEIGHT, }; // --- Material Setup --- // Use MeshStandardMaterial for lighting effects const textureLoader = new THREE.TextureLoader(); // Reuse loader // Basic colors for now, replace with textures later this.materials = { [Block.GRASS]: new THREE.MeshStandardMaterial({ color: 0x559020 }), [Block.DIRT]: new THREE.MeshStandardMaterial({ color: 0x8b4513 }), [Block.STONE]: new THREE.MeshStandardMaterial({ color: 0x808080 }), [Block.WOOD]: new THREE.MeshStandardMaterial({ color: 0x654321 }), // Darker brown [Block.LEAVES]: new THREE.MeshStandardMaterial({ color: 0x228B22, transparent: true, opacity: 0.9 }), // Forest green, slightly transparent }; // --- Geometry Setup --- this.geometries = { cube: new THREE.BoxGeometry(1, 1, 1), }; // --- Instanced Mesh Setup --- this.instancedMeshes = {}; // { 'chunkKey_blockType': InstancedMesh } this.instanceCounts = {}; // { 'chunkKey_blockType': count } // Dummy matrix for setting instance transforms this.dummy = new THREE.Object3D(); } // Get block type at world coordinates (returns Block type or null) getBlock(worldX, worldY, worldZ) { const chunkX = Math.floor(worldX / CHUNK_SIZE); const chunkZ = Math.floor(worldZ / CHUNK_SIZE); const chunkKey = `${chunkX},${chunkZ}`; const chunk = this.chunks.get(chunkKey); if (!chunk || !chunk.blocks) { return null; // Chunk not loaded or generated yet } const localX = worldX - chunkX * CHUNK_SIZE; const localZ = worldZ - chunkZ * CHUNK_SIZE; const localY = worldY; // Y is absolute for now if (localX < 0 || localX >= CHUNK_SIZE || localY < 0 || localY >= CHUNK_HEIGHT || localZ < 0 || localZ >= CHUNK_SIZE) { return null; // Outside chunk bounds (shouldn't happen with correct world coords) } // Flattened array index: Y * CHUNK_SIZE * CHUNK_SIZE + Z * CHUNK_SIZE + X const blockIndex = Math.floor(localY * CHUNK_SIZE * CHUNK_SIZE + localZ * CHUNK_SIZE + localX); const blockType = chunk.blocks[blockIndex]; return blockType === Block.AIR ? null : blockType; // Return null for air } // Update chunks based on player position update(playerPosition) { const playerChunkX = Math.floor(playerPosition.x / CHUNK_SIZE); const playerChunkZ = Math.floor(playerPosition.z / CHUNK_SIZE); // Only update chunks if player moved to a new chunk if (playerChunkX === this.lastPlayerChunkX && playerChunkZ === this.lastPlayerChunkZ) { return; } this.lastPlayerChunkX = playerChunkX; this.lastPlayerChunkZ = playerChunkZ; const chunksToLoad = new Set(); const chunksToRemove = new Set(this.chunks.keys()); // Start with all current chunks // Determine chunks needed around the player for (let x = playerChunkX - VIEW_DISTANCE; x <= playerChunkX + VIEW_DISTANCE; x++) { for (let z = playerChunkZ - VIEW_DISTANCE; z <= playerChunkZ + VIEW_DISTANCE; z++) { const chunkKey = `${x},${z}`; chunksToLoad.add(chunkKey); chunksToRemove.delete(chunkKey); // Keep this chunk } } // Load new chunks for (const chunkKey of chunksToLoad) { if (!this.chunks.has(chunkKey)) { this.generateChunk(chunkKey); } } // Unload far chunks for (const chunkKey of chunksToRemove) { this.unloadChunk(chunkKey); } } // Generate data and meshes for a single chunk generateChunk(chunkKey) { const [chunkX, chunkZ] = chunkKey.split(',').map(Number); const chunkData = { key: chunkKey, blocks: new Uint8Array(CHUNK_SIZE * CHUNK_HEIGHT * CHUNK_SIZE).fill(Block.AIR), // Use Uint8Array for memory efficiency instances: {}, // Store instance data { blockType: [matrices] } }; this.chunks.set(chunkKey, chunkData); // --- Generate Terrain Heightmap --- const heightMap = new Float32Array(CHUNK_SIZE * CHUNK_SIZE); for (let x = 0; x < CHUNK_SIZE; x++) { for (let z = 0; z < CHUNK_SIZE; z++) { const worldX = chunkX * CHUNK_SIZE + x; const worldZ = chunkZ * CHUNK_SIZE + z; // Use 2D noise for basic height const noiseVal = (this.noise.noise2D(worldX / TERRAIN_SMOOTHNESS, worldZ / TERRAIN_SMOOTHNESS) + 1) / 2; // Normalize to 0-1 const height = Math.floor(noiseVal * TERRAIN_HEIGHT_SCALE) + Math.floor(CHUNK_HEIGHT / 3); // Base height + variation heightMap[z * CHUNK_SIZE + x] = Math.min(height, CHUNK_HEIGHT - 1); // Clamp height } } // --- Place Blocks based on Heightmap --- for (let x = 0; x < CHUNK_SIZE; x++) { for (let z = 0; z < CHUNK_SIZE; z++) { const height = heightMap[z * CHUNK_SIZE + x]; for (let y = 0; y <= height; y++) { const blockIndex = y * CHUNK_SIZE * CHUNK_SIZE + z * CHUNK_SIZE + x; let blockType = Block.STONE; if (y === height) { blockType = Block.GRASS; } else if (y >= height - 3) { // 3 layers of dirt below grass blockType = Block.DIRT; } chunkData.blocks[blockIndex] = blockType; } } } // --- Generate Trees --- for (let x = 0; x < CHUNK_SIZE; x++) { for (let z = 0; z < CHUNK_SIZE; z++) { const height = heightMap[z * CHUNK_SIZE + x]; const blockIndex = height * CHUNK_SIZE * CHUNK_SIZE + z * CHUNK_SIZE + x; // Check if the top block is grass and random chance passes if (chunkData.blocks[blockIndex] === Block.GRASS && Math.random() < TREE_DENSITY) { this.generateTree(chunkData, x, height + 1, z); // Start trunk above grass } } } // --- Prepare Instance Data --- for (let y = 0; y < CHUNK_HEIGHT; y++) { for (let z = 0; z < CHUNK_SIZE; z++) { for (let x = 0; x < CHUNK_SIZE; x++) { const blockIndex = y * CHUNK_SIZE * CHUNK_SIZE + z * CHUNK_SIZE + x; const blockType = chunkData.blocks[blockIndex]; if (blockType !== Block.AIR) { // Check for exposed faces (basic culling) - Optional optimization // if (!this.isBlockObscured(chunkData, x, y, z)) { const worldX = chunkX * CHUNK_SIZE + x + 0.5; // Center block const worldY = y + 0.5; const worldZ = chunkZ * CHUNK_SIZE + z + 0.5; this.dummy.position.set(worldX, worldY, worldZ); this.dummy.updateMatrix(); if (!chunkData.instances[blockType]) { chunkData.instances[blockType] = []; } chunkData.instances[blockType].push(this.dummy.matrix.clone()); // } } } } } // --- Create/Update Instanced Meshes --- this.createInstancedMeshesForChunk(chunkData); } // Helper to generate a simple tree generateTree(chunkData, startX, startY, startZ) { const treeHeight = Math.floor(Math.random() * (TREE_HEIGHT_MAX - TREE_HEIGHT_MIN + 1)) + TREE_HEIGHT_MIN; // Trunk for (let y = startY; y < startY + treeHeight; y++) { this.setBlock(chunkData, startX, y, startZ, Block.WOOD); } // Leaves (simple cube/sphere shape) const leafStartY = startY + treeHeight - LEAF_RADIUS; // Start leaves lower down for (let y = leafStartY; y < startY + treeHeight + 1; y++) { for (let x = startX - LEAF_RADIUS; x <= startX + LEAF_RADIUS; x++) { for (let z = startZ - LEAF_RADIUS; z <= startZ + LEAF_RADIUS; z++) { const dx = x - startX; const dy = y - (startY + treeHeight - 1); // Center Y relative to top of trunk const dz = z - startZ; const distSq = dx * dx + dy * dy + dz * dz; // Simple sphere shape, avoid corners, don't overwrite trunk base if (distSq <= LEAF_RADIUS * LEAF_RADIUS + 0.5 && !(dx === 0 && dz === 0 && y < startY + treeHeight)) { // Only place leaves if the spot is currently AIR if (this.getBlockInChunk(chunkData, x, y, z) === Block.AIR) { this.setBlock(chunkData, x, y, z, Block.LEAVES); } } } } } } // Helper to set a block within chunk data (handles bounds checks) setBlock(chunkData, localX, localY, localZ, blockType) { if (localX < 0 || localX >= CHUNK_SIZE || localY < 0 || localY >= CHUNK_HEIGHT || localZ < 0 || localZ >= CHUNK_SIZE) { // TODO: Handle setting blocks across chunk boundaries if needed return; } const blockIndex = localY * CHUNK_SIZE * CHUNK_SIZE + localZ * CHUNK_SIZE + localX; chunkData.blocks[blockIndex] = blockType; } // Helper to get a block within chunk data (handles bounds checks) getBlockInChunk(chunkData, localX, localY, localZ) { if (localX < 0 || localX >= CHUNK_SIZE || localY < 0 || localY >= CHUNK_HEIGHT || localZ < 0 || localZ >= CHUNK_SIZE) { // TODO: Handle getting blocks across chunk boundaries if needed return Block.AIR; // Treat outside as air for now } const blockIndex = localY * CHUNK_SIZE * CHUNK_SIZE + localZ * CHUNK_SIZE + localX; return chunkData.blocks[blockIndex]; } // Basic check if a block is surrounded by other non-air blocks // isBlockObscured(chunkData, localX, localY, localZ) { // const neighbors = [ // [1, 0, 0], [-1, 0, 0], // [0, 1, 0], [0, -1, 0], // [0, 0, 1], [0, 0, -1], // ]; // for (const [dx, dy, dz] of neighbors) { // if (this.getBlockInChunk(chunkData, localX + dx, localY + dy, localZ + dz) === Block.AIR) { // return false; // Found an adjacent air block, so it's exposed // } // } // return true; // All neighbors are solid // } // Create or update instanced meshes for a given chunk's data createInstancedMeshesForChunk(chunkData) { const chunkKey = chunkData.key; for (const blockTypeStr in chunkData.instances) { const blockType = parseInt(blockTypeStr); const matrices = chunkData.instances[blockType]; const count = matrices.length; if (count === 0) continue; // Skip if no instances of this type const meshKey = `${chunkKey}_${blockType}`; let instancedMesh = this.instancedMeshes[meshKey]; if (!instancedMesh) { // Create new InstancedMesh const material = this.materials[blockType]; const geometry = this.geometries.cube; // Use the shared cube geometry instancedMesh = new THREE.InstancedMesh(geometry, material, count); // Allocate max needed instancedMesh.castShadow = true; instancedMesh.receiveShadow = true; instancedMesh.count = count; // Set initial count this.scene.add(instancedMesh); this.instancedMeshes[meshKey] = instancedMesh; this.instanceCounts[meshKey] = count; // Store the count // Set matrices for the new mesh for (let i = 0; i < count; i++) { instancedMesh.setMatrixAt(i, matrices[i]); } instancedMesh.instanceMatrix.needsUpdate = true; } else { // TODO: Handle potential updates if blocks change later // For now, we assume chunks are static once generated // If updates are needed, might need to resize mesh or manage instances more dynamically console.warn(`Instanced mesh ${meshKey} already exists. Updates not fully implemented.`); // Ensure count is correct if regeneration happens (though it shouldn't with current logic) if (instancedMesh.count !== count) { instancedMesh.count = count; for (let i = 0; i < count; i++) { instancedMesh.setMatrixAt(i, matrices[i]); } instancedMesh.instanceMatrix.needsUpdate = true; } } } } // Remove chunk data and meshes from the scene unloadChunk(chunkKey) { const chunk = this.chunks.get(chunkKey); if (!chunk) return; // Remove associated instanced meshes for (const blockType in this.materials) { const meshKey = `${chunkKey}_${blockType}`; const instancedMesh = this.instancedMeshes[meshKey]; if (instancedMesh) { this.scene.remove(instancedMesh); instancedMesh.dispose(); // Dispose geometry/material if not shared (geometry is shared here) delete this.instancedMeshes[meshKey]; delete this.instanceCounts[meshKey]; } } // Remove chunk data this.chunks.delete(chunkKey); // console.log(`Unloaded chunk: ${chunkKey}`); } } **Major Changes & Explanations:** 1. **`index.html`:** * Added `simplex-noise` to the import map. 2. **`main.js`:** * Imports the new `World` class. * Creates an instance of `World`. * Passes the `world` instance to `setupControls` for collision detection. * Calls `world.update(playerPosition)` in the `animate` loop to manage chunks. * Adjusted fog and shadow camera settings for a larger view distance. * Sets the initial player position higher up. * Sets the directional light target to the player's `cameraGroup` for better shadow focus. 3. **`controls.js`:** * Accepts the `world` instance in `setupControls`. * Implements a new `updatePhysicsAndCollision` function called within the main `update` wrapper. * **Basic Collision:** * Checks the block the player's feet and head *would* move into based on XZ velocity. If solid, stops XZ movement. * Checks the block below the player's feet (`groundBlockY`). If solid and moving down, stops Y velocity, sets `canJump = true`, and snaps the player position. * Checks the block above the player's head. If solid and moving up, stops Y velocity. * Uses `world.getBlock(x, y, z)` to check block types. * Movement logic (`updateDesktopControls`, `updateMobileControls`) now focuses on calculating *desired* velocity based on input and direction, letting `updatePhysicsAndCollision` handle the actual movement and collision response. * Uses `worldUp` vector for calculating side directions consistently. * Added a failsafe to reset player height if they fall too far. 4. **`world.js` (New File):** * **`World` Class:** Manages chunks, noise generation, and instanced meshes. * **Constants:** Defines `CHUNK_SIZE`, `CHUNK_HEIGHT`, `VIEW_DISTANCE`, noise parameters, tree parameters, etc. * **`Block` Enum:** Defines numerical IDs for block types. * **`constructor`:** Initializes the scene reference, chunk map, noise generator, materials, geometry, and instanced mesh storage. * **`getBlock(worldX, worldY, worldZ)`:** Converts world coordinates to chunk/local coordinates and retrieves the block type from the appropriate chunk's `blocks` array. Returns `null` for air or unloaded chunks. * **`update(playerPosition)`:** * Calculates the player's current chunk coordinates. * If the player changed chunks, it determines which chunks are needed based on `VIEW_DISTANCE` and which can be unloaded. * Calls `generateChunk` for new chunks and `unloadChunk` for distant ones. * **`generateChunk(chunkKey)`:** * Creates a `chunkData` object containing a `Uint8Array` for block types and an `instances` object. * Generates a heightmap using `simplex-noise`. * Places `STONE`, `DIRT`, and `GRASS` blocks based on the heightmap. * Calls `generateTree` randomly on grass blocks. * Iterates through all block positions in the chunk. * If a block is not `AIR`, calculates its world position, creates a transformation matrix, and stores it in `chunkData.instances` grouped by `blockType`. * Calls `createInstancedMeshesForChunk` to create/update the visual meshes. * **`generateTree(chunkData, x, y, z)`:** Creates a simple tree structure (trunk + leaves) by setting block types in the `chunkData.blocks` array. Uses `setBlock`. * **`setBlock`/`getBlockInChunk`:** Helper functions to safely modify/read the `chunkData.blocks` array with bounds checking. * **`createInstancedMeshesForChunk(chunkData)`:** * For each block type with instances in the chunk: * Checks if an `InstancedMesh` already exists for this chunk/blocktype (`meshKey`). * If not, creates a new `THREE.InstancedMesh` using the shared cube geometry, the correct material, and the required instance count. * Sets the instance matrices using `setMatrixAt`. * Adds the mesh to the scene and stores it in `this.instancedMeshes`. * **`unloadChunk(chunkKey)`:** * Finds all `InstancedMesh` objects associated with the chunk key. * Removes them from the scene using `this.scene.remove()`. * Calls `dispose()` on the meshes (important for freeing GPU resources, though geometry/material might be shared). * Removes the meshes from `this.instancedMeshes`. * Removes the chunk data from `this.chunks`. You should now see a procedurally generated landscape with simple trees that loads/unloads around you as you move. The collision is basic but should prevent falling through the ground most of the time.