Motor de vóxeles Three.js: Construir y explorar

904 codex

Abrir en el editor Publica tu código

Motor de vóxeles Three.js: Construir y explorar

Recomendado

23 May 2025

Menú de hamburguesa de inicio de sesión en 3D

17 April 2026

Código HTML de animación de corazón CSS

14 October 2025

Ejemplo de contenedor de animación HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Voxel Engine</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: sans-serif; }
        #crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            border: 2px solid white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            mix-blend-mode: difference;
        }
        #instructions {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 10px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="crosshair"></div>
    <div id="instructions">
        Click to Play<br>
        (W,A,S,D) Move | (SPACE) Jump<br>
        (LEFT CLICK) Add Block | (RIGHT CLICK) Remove
    </div>

// Scene Setup
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87ceeb);
        scene.fog = new THREE.Fog(0x87ceeb, 0, 100);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

// Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
        directionalLight.position.set(10, 20, 10);
        scene.add(directionalLight);

// Controls
        const controls = new PointerLockControls(camera, document.body);
        const instructions = document.getElementById('instructions');

document.body.addEventListener('click', () => {
            controls.lock();
        });

controls.addEventListener('lock', () => { instructions.style.display = 'none'; });
        controls.addEventListener('unlock', () => { instructions.style.display = 'block'; });

// Physics/Movement Variables
        let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false, canJump = false;
        const velocity = new THREE.Vector3();
        const direction = new THREE.Vector3();
        const objects = [];

// Textures & Materials
        const loader = new THREE.TextureLoader();
        const blockGeometry = new THREE.BoxGeometry(1, 1, 1);
        const grassMaterial = [
            new THREE.MeshLambertMaterial({ color: 0x5d8233 }), // right
            new THREE.MeshLambertMaterial({ color: 0x5d8233 }), // left
            new THREE.MeshLambertMaterial({ color: 0x7cfc00 }), // top
            new THREE.MeshLambertMaterial({ color: 0x8b4513 }), // bottom
            new THREE.MeshLambertMaterial({ color: 0x5d8233 }), // front
            new THREE.MeshLambertMaterial({ color: 0x5d8233 })  // back
        ];

// Floor Generation
        for (let x = -16; x < 16; x++) {
            for (let z = -16; z < 16; z++) {
                const mesh = new THREE.Mesh(blockGeometry, grassMaterial);
                mesh.position.set(x, 0, z);
                scene.add(mesh);
                objects.push(mesh);
            }
        }

// Event Listeners
        const onKeyDown = (event) => {
            switch (event.code) {
                case 'KeyW': moveForward = true; break;
                case 'KeyA': moveLeft = true; break;
                case 'KeyS': moveBackward = true; break;
                case 'KeyD': moveRight = true; break;
                case 'Space': if (canJump) velocity.y += 15; canJump = false; break;
            }
        };

const onKeyUp = (event) => {
            switch (event.code) {
                case 'KeyW': moveForward = false; break;
                case 'KeyA': moveLeft = false; break;
                case 'KeyS': moveBackward = false; break;
                case 'KeyD': moveRight = false; break;
            }
        };

document.addEventListener('keydown', onKeyDown);
        document.addEventListener('keyup', onKeyUp);

// Block Interaction
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2(0, 0);

window.addEventListener('mousedown', (event) => {
            if (!controls.isLocked) return;

raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects(objects);

if (intersects.length > 0) {
                const intersect = intersects[0];
                
                if (event.button === 0) { // Left Click: Add
                    const voxel = new THREE.Mesh(blockGeometry, grassMaterial);
                    voxel.position.copy(intersect.point).add(intersect.face.normal);
                    voxel.position.divideScalar(1).floor().addScalar(0.5);
                    scene.add(voxel);
                    objects.push(voxel);
                } else if (event.button === 2) { // Right Click: Remove
                    if (intersect.object.position.y > 0) { // Don't delete floor
                        scene.remove(intersect.object);
                        objects.splice(objects.indexOf(intersect.object), 1);
                    }
                }
            }
        });

// Prevent context menu on right click
        window.addEventListener('contextmenu', e => e.preventDefault());

// Game Loop
        let prevTime = performance.now();
        function animate() {
            requestAnimationFrame(animate);

const time = performance.now();
            if (controls.isLocked) {
                const delta = (time - prevTime) / 1000;

velocity.x -= velocity.x * 10.0 * delta;
                velocity.z -= velocity.z * 10.0 * delta;
                velocity.y -= 9.8 * 4.0 * delta; // Gravity

direction.z = Number(moveForward) - Number(moveBackward);
                direction.x = Number(moveRight) - Number(moveLeft);
                direction.normalize();

if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
                if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;

controls.moveRight(-velocity.x * delta);
                controls.moveForward(-velocity.z * delta);

camera.position.y += (velocity.y * delta);

if (camera.position.y < 1.6) {
                    velocity.y = 0;
                    camera.position.y = 1.6;
                    canJump = true;
                }
            }
            prevTime = time;
            renderer.render(scene, camera);
        }

window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

animate();
    </script>
</body>
</html>

CSS