Moteur voxel Three.js : Construire et explorer

740 codex

Ouvrir dans l'éditeur Publiez votre code

Moteur voxel Three.js : Construire et explorer

Recommandé

14 May 2025

Téléchargez la carte de Minecraft et plus

27 October 2023

Jeu de Tetris simple

17 July 2024

Formulaire de paiement HTML et CSS

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