Three.js Voxel Engine: Construa e explore

37 codex

Abrir no Editor Video Publique Seu Código

Three.js Voxel Engine: Construa e explore

Recomendado

11 March 2025

Exemplo de cartão UNO HTML CSS

3 December 2025

Grade CSS da Matriz Hadamard

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>

Three.js Voxel Engine: Construa e explore

Recomendado

Um código por stevenolaeem

Exemplo de cartão UNO HTML CSS

Grade CSS da Matriz Hadamard

HTML

CSS

JS

Recomendado

Um código por stevenolaeem

Exemplo de cartão UNO HTML CSS

Grade CSS da Matriz Hadamard

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS