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

34 codex

Abrir en el editor Video Publica tu código

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

Recomendado

5 June 2025

Un código de khachamohammed620

25 June 2025

Un código de Mete

25 April 2023

Formulario de inicio de sesión responsivo

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>

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

Recomendado

Un código de khachamohammed620

Un código de Mete

Formulario de inicio de sesión responsivo

HTML

CSS

JS

Recomendado

Un código de khachamohammed620

Un código de Mete

Formulario de inicio de sesión responsivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS