Three.js Voxel-Engine: Erstellen & Erkunden

556 codex

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Three.js Voxel-Engine: Erstellen & Erkunden

Empfohlen

12 December 2025

3D-Ragdoll-Physiksimulation mit Three.js & Cannon.js

29 October 2025

Einfaches HTML-Three.js-Template

18 June 2025

Entwickler-API: Erstellen und Integrieren | DevFlow

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: Erstellen & Erkunden

Empfohlen

3D-Ragdoll-Physiksimulation mit Three.js & Cannon.js

Einfaches HTML-Three.js-Template

Entwickler-API: Erstellen und Integrieren | DevFlow

HTML

CSS

JS

Empfohlen

3D-Ragdoll-Physiksimulation mit Three.js & Cannon.js

Einfaches HTML-Three.js-Template

Entwickler-API: Erstellen und Integrieren | DevFlow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS