Three.js Minecraft Clone

Simple Minecraft Clone

body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #87CEEB; /* Sky blue background */ } canvas { display: block; } #info { position: absolute; top: 10px; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 3px; } #crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white; pointer-events: none; /* Allows clicking through the crosshair */ } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import World from './world.js'; import Player from './player.js'; import { setupInputHandling } from './input.js'; // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Sky blue // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 10, 15); // Initial camera position // Renderer const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; // Enable shadows // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(10, 20, 5); directionalLight.castShadow = true; // Enable shadow casting // Configure shadow properties for better quality directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -20; directionalLight.shadow.camera.right = 20; directionalLight.shadow.camera.top = 20; directionalLight.shadow.camera.bottom = -20; scene.add(directionalLight); scene.add(directionalLight.target); // Target for the light // World const world = new World(scene); world.generateChunk(0, 0); // Generate initial chunk // Player const player = new Player(scene, camera); // Controls (Pointer Lock) const controls = new PointerLockControls(camera, document.body); scene.add(controls.getObject()); // Add the camera rig to the scene // Lock pointer on click document.body.addEventListener('click', () => { controls.lock(); }); // Handle pointer lock/unlock events controls.addEventListener('lock', () => { console.log('Pointer locked'); document.getElementById('info').style.display = 'none'; // Hide info text document.getElementById('crosshair').style.display = 'block'; // Show crosshair }); controls.addEventListener('unlock', () => { console.log('Pointer unlocked'); document.getElementById('info').style.display = 'block'; // Show info text document.getElementById('crosshair').style.display = 'none'; // Hide crosshair }); // Input Handling setupInputHandling(controls, player, world); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); // Update player movement based on input player.update(delta, world); renderer.render(scene, camera); } animate(); export const BLOCK = { SIZE: 1, }; export const CHUNK = { SIZE: 16, // Width/Depth in blocks HEIGHT: 32, // Height in blocks }; export const PLAYER = { HEIGHT: 1.8, SPEED: 5, JUMP_VELOCITY: 8, GRAVITY: 20, }; export const TEXTURES = { DIRT: 'textures/dirt.png', GRASS_SIDE: 'textures/grass_side.png', GRASS_TOP: 'textures/grass_top.png', STONE: 'textures/stone.png', COBBLESTONE: 'textures/cobblestone.png', WOOD_LOG: 'textures/wood_log.png', WOOD_LOG_TOP: 'textures/wood_log_top.png', LEAVES: 'textures/leaves.png', }; import * as THREE from 'three'; import { BLOCK, CHUNK, TEXTURES } from './constants.js'; import { SimplexNoise } from 'three/addons/math/SimplexNoise.js'; const textureLoader = new THREE.TextureLoader(); function loadTexture(url) { const texture = textureLoader.load(url); texture.magFilter = THREE.NearestFilter; // Pixelated look texture.minFilter = THREE.NearestFilter; return texture; } const blockMaterials = { grass: [ new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.GRASS_SIDE) }), // right new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.GRASS_SIDE) }), // left new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.GRASS_TOP) }), // top new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.DIRT) }), // bottom new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.GRASS_SIDE) }), // front new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.GRASS_SIDE) }), // back ], dirt: new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.DIRT) }), stone: new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.STONE) }), cobblestone: new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.COBBLESTONE) }), wood_log: [ new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.WOOD_LOG) }), // side new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.WOOD_LOG) }), // side new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.WOOD_LOG_TOP) }), // top new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.WOOD_LOG_TOP) }), // bottom new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.WOOD_LOG) }), // side new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.WOOD_LOG) }), // side ], leaves: new THREE.MeshStandardMaterial({ map: loadTexture(TEXTURES.LEAVES), transparent: true, alphaTest: 0.5 }), // Use alphaTest for cutout transparency }; const blockGeometry = new THREE.BoxGeometry(BLOCK.SIZE, BLOCK.SIZE, BLOCK.SIZE); class World { constructor(scene) { this.scene = scene; this.chunks = {}; // Store chunks by coordinate string "x,z" this.noise = new SimplexNoise(); this.chunkMeshes = new THREE.Group(); // Group to hold all chunk meshes this.scene.add(this.chunkMeshes); } // Simple height generation based on noise getHeight(x, z) { const scale = 0.05; // Noise scale - smaller means larger features const amplitude = 10; // Max height variation const baseHeight = 5; // Base ground level let height = this.noise.noise(x * scale, z * scale) * amplitude + baseHeight; return Math.max(1, Math.floor(height)); // Ensure minimum height of 1 } // Generate terrain for a specific chunk generateChunk(chunkX, chunkZ) { const chunkId = `${chunkX},${chunkZ}`; if (this.chunks[chunkId]) { return; // Chunk already generated } console.log(`Generating chunk: ${chunkId}`); const chunkData = {}; // Store block types for this chunk { "x,y,z": type } const startX = chunkX * CHUNK.SIZE; const startZ = chunkZ * CHUNK.SIZE; // Terrain Generation Loop for (let x = 0; x < CHUNK.SIZE; x++) { for (let z = 0; z < CHUNK.SIZE; z++) { const worldX = startX + x; const worldZ = startZ + z; const terrainHeight = this.getHeight(worldX, worldZ); for (let y = 0; y < CHUNK.HEIGHT; y++) { const worldY = y; let blockType = null; if (worldY < terrainHeight - 3) { blockType = 'stone'; } else if (worldY < terrainHeight - 1) { blockType = 'dirt'; } else if (worldY < terrainHeight) { blockType = 'grass'; } if (blockType) { // Only add block if it's exposed (for simplicity now, add all) // TODO: Add visibility culling later chunkData[`${x},${y},${z}`] = blockType; } } // Simple tree generation (on grass blocks) if (chunkData[`${x},${terrainHeight - 1},${z}`] === 'grass') { if (Math.random() < 0.02) { // 2% chance to spawn a tree this.generateTree(chunkData, x, terrainHeight, z); } } } } this.chunks[chunkId] = chunkData; this.createChunkMesh(chunkX, chunkZ, chunkData); } generateTree(chunkData, x, y, z) { const trunkHeight = Math.floor(Math.random() * 3) + 4; // 4-6 blocks tall // Trunk for (let i = 0; i < trunkHeight; i++) { if (y + i < CHUNK.HEIGHT) { chunkData[`${x},${y + i},${z}`] = 'wood_log'; } } // Leaves (simple cube for now) const leafStartY = y + trunkHeight - 2; const leafSize = 2; // Radius from center for (let lx = -leafSize; lx <= leafSize; lx++) { for (let ly = 0; ly <= leafSize + 1; ly++) { // Make leaves taller for (let lz = -leafSize; lz <= leafSize; lz++) { // Avoid corners for a more rounded shape if (Math.abs(lx) === leafSize && Math.abs(lz) === leafSize && ly < leafSize) continue; // Don't overwrite trunk top if (lx === 0 && lz === 0 && ly < 1) continue; const currentY = leafStartY + ly; if (currentY < CHUNK.HEIGHT) { const blockPos = `${x + lx},${currentY},${z + lz}`; // Only place leaves if the spot is empty if (!chunkData[blockPos]) { chunkData[blockPos] = 'leaves'; } } } } } } createChunkMesh(chunkX, chunkZ, chunkData) { const chunkGroup = new THREE.Group(); chunkGroup.position.set( chunkX * CHUNK.SIZE * BLOCK.SIZE, 0, chunkZ * CHUNK.SIZE * BLOCK.SIZE ); const dummy = new THREE.Object3D(); // Used for setting instance positions // Create InstancedMesh for each block type present in the chunk const meshes = {}; // { 'blockType': InstancedMesh } const counts = {}; // { 'blockType': count } // First pass: count blocks of each type for (const posString in chunkData) { const blockType = chunkData[posString]; if (!counts[blockType]) counts[blockType] = 0; counts[blockType]++; } // Second pass: create InstancedMeshes for (const blockType in counts) { const count = counts[blockType]; const material = blockMaterials[blockType]; if (!material) { console.warn(`No material found for block type: ${blockType}`); continue; } const mesh = new THREE.InstancedMesh(blockGeometry, material, count); mesh.castShadow = true; mesh.receiveShadow = true; mesh.userData.blockType = blockType; // Store type for potential raycasting meshes[blockType] = mesh; counts[blockType] = 0; // Reset count for positioning index chunkGroup.add(mesh); } // Third pass: set instance positions for (const posString in chunkData) { const [x, y, z] = posString.split(',').map(Number); const blockType = chunkData[posString]; const mesh = meshes[blockType]; if (!mesh) continue; // Skip if mesh wasn't created (e.g., missing material) const instanceIndex = counts[blockType]; dummy.position.set( x * BLOCK.SIZE + BLOCK.SIZE / 2, // Center