Web Voxel Game

Okay, creating a full 3D Minecraft clone in the browser is a significant undertaking. We can start by setting up a basic 3D scene using Three.js, which is a popular WebGL library. This initial setup will include a simple ground plane and the ability to add/remove blocks using mouse clicks. This won't have advanced features like infinite terrain, crafting, or complex physics initially, but it provides a foundation to build upon. Web Voxel Game

Left-click: Add block | Right-click: Remove block

body { margin: 0; overflow: hidden; /* Prevent scrollbars */ font-family: sans-serif; background-color: #add8e6; /* Light blue sky */ } #gameCanvas { display: block; /* Remove potential extra space below canvas */ } #info { position: absolute; top: 10px; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; font-size: 14px; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // --- Basic Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0xadd8e6); // Light blue sky const camera = new THREE.PerspectiveCamera( 75, // Field of View window.innerWidth / window.innerHeight, // Aspect Ratio 0.1, // Near clipping plane 1000 // Far clipping plane ); camera.position.set(5, 5, 10); // Initial camera position const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; // Enable shadows // --- Lighting --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Soft white light scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 15, 10); directionalLight.castShadow = true; // Configure shadow properties for better quality (optional) directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; scene.add(directionalLight); // --- Controls --- const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Smooth camera movement controls.dampingFactor = 0.05; controls.screenSpacePanning = false; // Keep panning relative to ground controls.maxPolarAngle = Math.PI / 2; // Prevent camera going below ground // --- Ground Plane --- const planeSize = 20; const planeGeometry = new THREE.PlaneGeometry(planeSize, planeSize); const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x228b22, side: THREE.DoubleSide }); // Forest green const groundPlane = new THREE.Mesh(planeGeometry, planeMaterial); groundPlane.rotation.x = -Math.PI / 2; // Rotate to be horizontal groundPlane.receiveShadow = true; scene.add(groundPlane); // --- Voxel (Block) Setup --- const cubeSize = 1; const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); // Simple texture (replace with actual textures later) const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513 }); // Saddle brown const voxels = []; // Array to keep track of added blocks // --- Raycasting for Interaction --- const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onPointerMove(event) { // Calculate mouse position in normalized device coordinates (-1 to +1) mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } function onPointerDown(event) { // Update the picking ray with the camera and mouse position raycaster.setFromCamera(mouse, camera); // Calculate objects intersecting the picking ray const intersects = raycaster.intersectObjects(scene.children, true); // Check all objects if (intersects.length > 0) { const intersect = intersects[0]; if (event.button === 0) { // Left mouse button - Add block // Calculate position for the new block adjacent to the clicked face const newPosition = new THREE.Vector3(); newPosition.copy(intersect.point).add(intersect.face.normal); // Snap to grid (center of the voxel) newPosition.divideScalar(cubeSize).floor().multiplyScalar(cubeSize).addScalar(cubeSize / 2); // Check if a block already exists at this position const exists = voxels.some(voxel => voxel.position.equals(newPosition)); if (!exists && newPosition.y >= cubeSize / 2) { // Prevent placing below ground const voxel = new THREE.Mesh(cubeGeometry, cubeMaterial); voxel.position.copy(newPosition); voxel.castShadow = true; voxel.receiveShadow = true; scene.add(voxel); voxels.push(voxel); // Add to our list } } else if (event.button === 2) { // Right mouse button - Remove block // Check if the clicked object is a voxel (and not the ground plane) if (intersect.object !== groundPlane) { scene.remove(intersect.object); // Remove from our list const index = voxels.indexOf(intersect.object); if (index > -1) { voxels.splice(index, 1); } // Dispose geometry and material if needed (for larger scenes) // intersect.object.geometry.dispose(); // intersect.object.material.dispose(); } } } } // --- Event Listeners --- window.addEventListener('resize', onWindowResize, false); window.addEventListener('pointermove', onPointerMove); window.addEventListener('pointerdown', onPointerDown); // Prevent context menu on right-click window.addEventListener('contextmenu', (event) => event.preventDefault()); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // --- Animation Loop --- function animate() { requestAnimationFrame(animate); controls.update(); // Required if enableDamping is true renderer.render(scene, camera); } animate(); // Start the loop This sets up the basic scene. You can use the mouse (orbit controls) to look around and zoom. Left-click on the ground or another block to place a brown block, and right-click on a brown block to remove it. This is a very simplified starting point. Building a full Minecraft-like experience would require significantly more work, including: * **World Generation:** Procedural generation of terrain using noise functions (like Perlin or Simplex noise). * **Chunking:** Dividing the world into manageable chunks to load/unload dynamically and optimize rendering. * **Meshing Algorithms:** Optimizing voxel rendering (e.g., Greedy Meshing) to reduce draw calls. * **Inventory & Crafting System:** UI and logic for managing items and crafting recipes. * **Player Controller:** First-person controls, physics (gravity, collision). * **Block Types & Textures:** Implementing different block types with unique properties and textures. * **Resource Gathering:** Logic for breaking blocks and collecting resources. * **Persistence:** Saving and loading world state. * **Multiplayer:** Networking for multiple players.