BlockVerse

Okay, let's add jumping, sneaking, basic procedural terrain using noise, and simple trees. We'll need a noise library for terrain generation. We'll use `simplex-noise` via CDN. **1. Update `index.html`** Add the noise library to the import map and update the instructions. **2. Create `src/noise.js`** This will encapsulate the noise generation. **3. Update `src/world.js`** Replace the flat ground with procedurally generated terrain and add trees. **4. Update `src/controls.js`** Add jump/sneak logic, gravity, and basic ground collision. **5. Update `src/main.js`** Handle jump/sneak key presses and integrate the updated movement logic. **6. Update `style.css` (Minor)** Ensure the background color still makes sense if the fog changes. Here are the updated files: BlockVerse

Click to play
WASD: Move
SPACE: Jump
SHIFT: Sneak/Down
Mouse: Look
Left Click: Remove Block
Right Click: Place Block

body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #87CEEB; /* Sky blue background */ } canvas { display: block; } #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; /* Use flexbox */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ } #instructions { width: 50%; max-width: 300px; /* Optional: constrain width */ padding: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; cursor: pointer; text-align: center; font-size: 1.2em; color: #333; } import { createNoise2D } from 'simplex-noise'; // Initialize noise functions const noise2D = createNoise2D(Math.random); // Use a random seed // Function to get height at a specific x, z coordinate export function getTerrainHeight(x, z) { const frequency = 0.02; // Controls the scale of the terrain features const amplitude = 15; // Controls the maximum height variation const octaves = 4; // Number of noise layers for detail const persistence = 0.5;// How much each octave contributes const lacunarity = 2.0; // How much frequency increases per octave let total = 0; let currentAmplitude = amplitude; let currentFrequency = frequency; let normalization = 0; for (let i = 0; i < octaves; i++) { total += noise2D(x * currentFrequency, z * currentFrequency) * currentAmplitude; normalization += currentAmplitude; currentAmplitude *= persistence; currentFrequency *= lacunarity; } // Normalize the result to be roughly between -amplitude and +amplitude // and then scale/offset to desired terrain height range // return (total / normalization) * amplitude; // If normalization needed return total; // Return raw noise value for now, adjust base height in world.js } import * as THREE from 'three'; import { getTerrainHeight } from './noise.js'; export const worldObjects = []; // Array to hold interactive objects (blocks) export const blockSize = 1; const worldSize = 50; // Width/Depth of the generated world chunk const worldHalfSize = worldSize / 2; // Block Types (simple colors for now) const BLOCK_TYPE = { GRASS: 0x55aa55, DIRT: 0x8B4513, STONE: 0xaaaaaa, WOOD: 0x7a5230, // Brown for trunk LEAVES: 0x228B22, // Forest green for leaves AIR: null // Represents empty space }; // Store block data in a 3D structure for faster lookups (optional but good practice) // For simplicity now, we'll just use the worldObjects array and search it. // let worldData = {}; // Example: worldData[`${x},${y},${z}`] = BLOCK_TYPE.GRASS; export function setupWorld(scene) { generateTerrain(scene); // Remove the old ground plane if it existed // worldObjects.shift(); // Assuming ground was first } function generateTerrain(scene) { console.log("Generating terrain..."); const baseHeight = 5; // Base ground level offset for (let x = -worldHalfSize; x < worldHalfSize; x++) { for (let z = -worldHalfSize; z < worldHalfSize; z++) { const noiseHeight = getTerrainHeight(x, z); const yHeight = Math.floor(noiseHeight) + baseHeight; // Create ground level block (Grass) addBlock(scene, x, yHeight, z, BLOCK_TYPE.GRASS); // Create blocks below (Dirt, then Stone) for (let y = yHeight - 1; y > yHeight - 4 && y >= -10; y--) { addBlock(scene, x, y, z, BLOCK_TYPE.DIRT); } for (let y = yHeight - 4; y >= -10; y--) { // Fill down to a minimum depth addBlock(scene, x, y, z, BLOCK_TYPE.STONE); } // Chance to spawn a tree if (Math.random() < 0.015 && yHeight > baseHeight) { // Only on grass above base level generateTree(scene, x, yHeight + 1, z); } } } console.log(`Terrain generated with ${worldObjects.length} blocks.`); } function generateTree(scene, x, startY, z) { const trunkHeight = Math.floor(Math.random() * 3) + 4; // 4-6 blocks tall const leavesRadius = 2; const leavesHeight = 3; // Trunk for (let y = startY; y < startY + trunkHeight; y++) { addBlock(scene, x, y, z, BLOCK_TYPE.WOOD); } // Leaves (simple cube/sphere shape) const topY = startY + trunkHeight; for (let ly = topY - 1; ly < topY + leavesHeight; ly++) { for (let lx = x - leavesRadius; lx <= x + leavesRadius; lx++) { for (let lz = z - leavesRadius; lz <= z + leavesRadius; lz++) { const distSq = (lx - x)**2 + (lz - z)**2 + ((ly - topY) * 0.8)**2; // Ellipsoid shape if (distSq <= leavesRadius**2 + Math.random() * 1.5) { // Add some randomness // Avoid placing leaves inside the top of the trunk if (lx === x && lz === z && ly < topY) continue; // Check if block already exists (less efficient than worldData map) if (!getBlockAt(lx, ly, lz)) { addBlock(scene, lx, ly, lz, BLOCK_TYPE.LEAVES); } } } } } } export function addBlock(scene, x, y, z, type = BLOCK_TYPE.STONE) { if (type === BLOCK_TYPE.AIR) return null; // Don't add air blocks const blockGeometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize); // TODO: Use textures later instead of just colors const blockMaterial = new THREE.MeshLambertMaterial({ color: type }); const blockMesh = new THREE.Mesh(blockGeometry, blockMaterial); // Ensure position is centered correctly if blockSize changes blockMesh.position.set(x + blockSize / 2, y + blockSize / 2, z + blockSize / 2); blockMesh.castShadow = true; blockMesh.receiveShadow = true; blockMesh.isBlock = true; // Custom property to identify blocks blockMesh.blockType = type; // Store type if needed later scene.add(blockMesh); worldObjects.push(blockMesh); // Add to worldData map if using one: // worldData[`${Math.floor(x)},${Math.floor(y)},${Math.floor(z)}`] = type; return blockMesh; } export function removeBlock(scene, block) { if (block && block.isBlock) { scene.remove(block); const index = worldObjects.indexOf(block); if (index > -1) { worldObjects.splice(index, 1); } // Remove from worldData map if using one: // const pos = block.position.clone().floor(); // delete worldData[`${pos.x},${pos.y},${pos.z}`]; if (block.geometry) block.geometry.dispose(); if (block.material) { if (Array.isArray(block.material)) { block.material.forEach(mat => mat.dispose()); } else { block.material.dispose(); } } } } // Helper function to check if a block exists at specific coordinates // This is slow, a worldData map would be much faster for large worlds. export function getBlockAt(x, y, z) { const checkX = Math.floor(x) + blockSize / 2; const checkY = Math.floor(y) + blockSize / 2; const checkZ = Math.floor(z) + blockSize / 2; for (const obj of worldObjects) { if (obj.isBlock && Math.abs(obj.position.x - checkX) < 0.1 && Math.abs(obj.position.y - checkY) < 0.1 && Math.abs(obj.position.z - checkZ) < 0.1) { return obj; } } return null; } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { getBlockAt, blockSize } from './world.js'; // Import world functions export const playerVelocity = new THREE.Vector3(); export let playerOnGround = false; let controls; const playerDirection = new THREE.Vector3(); const playerHeight = 1.7; // Approximate height of the player camera from feet const playerWidth = 0.4; // Approximate width for collision checking const gravity = 30.0; // Adjust gravity strength const jumpVelocity = 10.0; // Adjust jump height const sneakSpeedMultiplier = 0.5; // How much slower when sneaking export function setupPlayerControls(camera, domElement) { controls = new PointerLockControls(camera, domElement); const blocker = document.getElementById('blocker'); const instructions = document.getElementById('instructions'); instructions.addEventListener('click', function () { controls.lock(); }); controls.addEventListener('lock', function () { instructions.style.display = 'none'; blocker.style.display = 'none'; }); controls.addEventListener('unlock', function () { blocker.style.display = 'flex'; instructions.style.display = ''; }); // Set initial camera position higher to account for terrain camera.position.y = 20; // Start higher up, will fall due to gravity return controls; } export function getPlayerObject() { return controls.getObject(); // The camera object itself acts as the player position } export function getPlayerDirection() { controls.getDirection(playerDirection); playerDirection.y = 0; // Horizontal direction only for movement calc playerDirection.normalize(); return playerDirection; } export function applyInputs(delta, moveForward, moveBackward, moveLeft, moveRight, jump, sneak) { const speed = sneak ? 40.0 * sneakSpeedMultiplier : 40.0; const currentSpeed = speed * delta; // Damping - reduce velocity over time if no input playerVelocity.x -= playerVelocity.x * 10.0 * delta; playerVelocity.z -= playerVelocity.z * 10.0 * delta; // Apply movement inputs if (moveForward) playerVelocity.z -= currentSpeed; if (moveBackward) playerVelocity.z += currentSpeed; if (moveLeft) playerVelocity.x -= currentSpeed; if (moveRight) playerVelocity.x += currentSpeed; // Apply gravity playerVelocity.y -= gravity * delta; // Jumping if (jump && playerOnGround) { playerVelocity.y = jumpVelocity; // Apply upward velocity playerOnGround = false; // No longer on ground after jumping } // Sneaking (downward movement if not on ground, handled by speed reduction above if on ground) // Note: This simple sneak doesn't prevent falling off edges yet. if (sneak && !playerOnGround) { playerVelocity.y -= 10.0 * delta; // Apply slight downward force when sneaking mid-air } // Apply calculated velocity to controls controls.moveRight(playerVelocity.x * delta); controls.moveForward(playerVelocity.z * delta); controls.getObject().position.y += playerVelocity.y * delta; // Collision Detection / Ground Check checkCollisions(); // Prevent falling through the "void" (optional) if (controls.getObject().position.y < -50) { playerVelocity.y = 0; controls.getObject().position.y = 20; // Reset position higher up // Maybe teleport back to spawn point later } } function checkCollisions() { const playerPos = controls.getObject().position; const feetPos = playerPos.clone(); feetPos.y -= playerHeight; // Position at the player's feet // Simple ground check: Check block directly below feet const blockBelow = getBlockAt(feetPos.x, feetPos.y - 0.1, feetPos.z); // Check slightly below feet if (blockBelow) { const blockTopY = blockBelow.position.y + blockSize / 2; // If feet are below or very close to the top of the block below if (feetPos.y <= blockTopY) { playerVelocity.y = Math.max(0, playerVelocity.y); // Stop downward movement, allow upward playerPos.y = blockTopY + playerHeight; // Snap player feet to top of block playerOnGround = true; } else { playerOnGround = false; } } else { playerOnGround = false; // No block below, player is falling } // TODO: Add basic wall collision checks (more complex) // Check blocks in front, back, left, right at player height } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { setupWorld, worldObjects } from './world.js'; import { setupPlayerControls, playerVelocity, applyInputs, getPlayerObject } from './controls.js'; // Updated imports import { setupBlockInteraction } from './blockInteraction.js'; let scene, camera, renderer, controls; let clock; let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false; let jump = false; let sneak = false; function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); scene.fog = new THREE.Fog(0x87CEEB, 50, 150); // Adjust fog distance // Camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // Initial position set in setupPlayerControls now // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows document.body.appendChild(renderer.domElement); // Clock clock = new THREE.Clock(); // Lighting const ambientLight = new THREE.AmbientLight(0xcccccc, 0.7); // Slightly less intense ambient scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(100, 100, 50); // Adjust light direction directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; // Increase shadow map resolution 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; scene.add(directionalLight); // const helper = new THREE.CameraHelper( directionalLight.shadow.camera ); // Debug shadows // scene.add( helper ); // World (Generates terrain and trees) setupWorld(scene); // Controls controls = setupPlayerControls(camera, document.body); scene.add(controls.getObject()); // Block Interaction setupBlockInteraction(camera, scene, worldObjects); // Event Listeners window.addEventListener('resize', onWindowResize); document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function 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': jump = true; break; case 'ShiftLeft': case 'ShiftRight': sneak = true; break; } } function 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; case 'Space': jump = false; // Reset jump flag on key up break; case 'ShiftLeft': case 'ShiftRight': sneak = false; break; } } function animate() { requestAnimationFrame(animate); const delta = Math.min(clock.getDelta(), 0.1); // Cap delta to prevent large jumps if (controls.isLocked === true) { // Pass input states to the controls module for processing applyInputs(delta, moveForward, moveBackward, moveLeft, moveRight, jump, sneak); // Reset jump *input* state after processing it for one frame // This prevents continuous jumping if space is held down. // The actual jump action happens in applyInputs based on playerOnGround. if (jump) jump = false; } renderer.render(scene, camera); } init(); animate(); import * as THREE from 'three'; import { addBlock, removeBlock, worldObjects, blockSize } from './world.js'; // Ensure worldObjects is imported if needed, blockSize too let raycaster; let pointer; let cameraRef; let sceneRef; let worldObjectsRef; // Keep reference if passed during setup // Roll-over helper remains the same let rollOverMesh; const rollOverMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true, depthTest: false }); // Disable depth test to see through blocks const rollOverGeometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize); export function setupBlockInteraction(camera, scene, worldObjs) { // Accept worldObjects cameraRef = camera; sceneRef = scene; worldObjectsRef = worldObjs; // Store reference raycaster = new THREE.Raycaster(); raycaster.far = 6; // Limit raycasting distance (performance and gameplay) pointer = new THREE.Vector2(0, 0); // Center of the screen // Roll-over helper rollOverMesh = new THREE.Mesh(rollOverGeometry, rollOverMaterial); rollOverMesh.visible = false; // Initially hidden scene.add(rollOverMesh); document.addEventListener('pointerdown', onPointerDown); // Update raycaster visual in animate loop for smoother feedback // document.addEventListener('pointermove', onPointerMove); // Remove if updating in animate } // Call this function from the main animate loop export function updateBlockInteraction() { if (!cameraRef || !worldObjectsRef) return; // Ensure references are set raycaster.setFromCamera(pointer, cameraRef); const intersects = raycaster.intersectObjects(worldObjectsRef, false); if (intersects.length > 0) { const intersect = intersects[0]; // Ensure we didn't hit the rollover mesh itself if it's added to worldObjectsRef (it shouldn't be) if (intersect.object === rollOverMesh) return; // Snap to grid based on intersection point and face normal const normal = intersect.face.normal.clone(); // Adjust normal slightly towards the center to avoid floating point issues at edges normal.multiplyScalar(0.5); const voxelPosition = new THREE.Vector3().copy(intersect.point).add(normal); // Position to place new block voxelPosition.divideScalar(blockSize).floor().multiplyScalar(blockSize).addScalar(blockSize / 2); rollOverMesh.position.copy(voxelPosition); rollOverMesh.visible = true; } else { rollOverMesh.visible = false; } } // function onPointerMove() { // Remove this if updateBlockInteraction is called in animate // // updateBlockInteraction(); // } function onPointerDown(event) { if (!document.pointerLockElement || !cameraRef || !sceneRef || !worldObjectsRef) return; // Use the latest intersection data calculated in the animate loop // updateBlockInteraction(); // Or ensure it's called just before this in animate const intersects = raycaster.intersectObjects(worldObjectsRef, false); if (intersects.length > 0) { const intersect = intersects[0]; if (intersect.object === rollOverMesh) return; // Ignore helper if (event.button === 0) { // Left click - Remove block if (intersect.object.isBlock) { // Check if it's a block removeBlock(sceneRef, intersect.object); // Update worldObjectsRef if removeBlock modifies it directly } } else if (event.button === 2) { // Right click - Place block const normal = intersect.face.normal.clone(); normal.multiplyScalar(0.5); const voxelPosition = new THREE.Vector3().copy(intersect.point).add(normal); voxelPosition.divideScalar(blockSize).floor().multiplyScalar(blockSize); // Get corner coord // Add a new block at the calculated position (using integer coords) // TODO: Use selected block type from inventory later addBlock(sceneRef, voxelPosition.x, voxelPosition.y, voxelPosition.z, 0xaaaaaa); // Example: Stone color // Update worldObjectsRef if addBlock modifies it directly } } } // Add this line in main.js's animate loop, inside the controls.isLocked check: // import { updateBlockInteraction } from './blockInteraction.js'; // ... // function animate() { // ... // if (controls.isLocked === true) { // applyInputs(...); // updateBlockInteraction(); // Add this call // ... // } // ... // } **Important:** You need to add the call `updateBlockInteraction();` inside the `animate` function in `src/main.js`, specifically within the `if (controls.isLocked === true)` block, as mentioned in the comment at the end of `src/blockInteraction.js`. Now you should have: * A world generated with simple hills and valleys. * Basic trees scattered on the grass. * The ability to jump with SPACE (when on the ground). * The ability to sneak/move down with SHIFT (also slows movement when on ground). * Basic gravity pulling the player down. * Simple ground collision preventing the player from falling through blocks immediately below. This is still basic – proper physics, collision handling (walls, ceilings), and optimizations (like world chunking) are needed for a more robust experience.