Jeu d'obstacles 3D pour navigateur avec Three.js

246 freemana

Ouvrir dans l'éditeur Publiez votre code

Jeu d'obstacles 3D pour navigateur avec Three.js

Recommandé

10 December 2025

Exemple de jeu de physique ragdoll avec Matter.js

18 December 2025

Code source HTML5 du jeu Bloodmoney

23 July 2024

Connectez-vous avec inscription

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Browser Obby</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #000; }
        #ui { position: absolute; top: 20px; left: 20px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); pointer-events: none; }
        #timer { font-size: 24px; font-weight: bold; }
        #instructions { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 20px; }
        #win-screen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 40px; border-radius: 15px; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        button { padding: 10px 20px; font-size: 18px; cursor: pointer; background: #2ecc71; border: none; color: white; border-radius: 5px; margin-top: 10px; }
    </style>
</head>
<body>

<div id="ui">
        <div id="timer">Time: 0.0s</div>
        <div>Level: The Neon Void</div>
    </div>

<div id="instructions">WASD to Move | SPACE to Jump | R to Reset</div>

<div id="win-screen">
        <h1>YOU MADE IT!</h1>
        <p id="final-time"></p>
        <button onclick="location.reload()">Play Again</button>
    </div>

init();
        animate();

function init() {
            // Scene & Camera
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x0a0a12);
            scene.fog = new THREE.FogExp2(0x0a0a12, 0.02);

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            
            // Renderer
            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, 0.6);
            scene.add(ambientLight);
            const sunLight = new THREE.DirectionalLight(0xffffff, 0.8);
            sunLight.position.set(10, 20, 10);
            scene.add(sunLight);

// Player (The "Character")
            const playerGeo = new THREE.BoxGeometry(1, 2, 1);
            const playerMat = new THREE.MeshPhongMaterial({ color: 0x3498db });
            player = new THREE.Mesh(playerGeo, playerMat);
            player.position.y = 5;
            scene.add(player);

// Level Design (The Obby)
            createPlatform(0, 0, 0, 10, 1, 10, 0x2c3e50); // Start
            createPlatform(0, 0, -15, 5, 1, 5, 0xe74c3c); 
            createPlatform(8, 2, -25, 5, 1, 5, 0xf1c40f);
            createPlatform(-8, 4, -35, 5, 1, 5, 0x9b59b6);
            createPlatform(0, 6, -50, 3, 1, 3, 0x1abc9c);
            createPlatform(10, 8, -60, 2, 1, 2, 0xe67e22);
            createPlatform(0, 10, -75, 15, 1, 15, 0x2ecc71, true); // End Goal

// Controls
            document.addEventListener('keydown', (e) => onKey(e.code, true));
            document.addEventListener('keyup', (e) => onKey(e.code, false));
            window.addEventListener('resize', onWindowResize);
        }

function createPlatform(x, y, z, w, h, d, color, isGoal = false) {
            const geo = new THREE.BoxGeometry(w, h, d);
            const mat = new THREE.MeshPhongMaterial({ color: color });
            const mesh = new THREE.Mesh(geo, mat);
            mesh.position.set(x, y, z);
            mesh.isGoal = isGoal;
            scene.add(mesh);
            platforms.push(mesh);
        }

function onKey(code, isPressed) {
            if (code === 'KeyW') moveForward = isPressed;
            if (code === 'KeyS') moveBackward = isPressed;
            if (code === 'KeyA') moveLeft = isPressed;
            if (code === 'KeyD') moveRight = isPressed;
            if (code === 'Space' && isPressed && canJump) {
                velocity.y += 0.25;
                canJump = false;
            }
            if (code === 'KeyR') resetPlayer();
        }

function resetPlayer() {
            player.position.set(0, 5, 0);
            velocity.set(0, 0, 0);
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

function animate() {
            requestAnimationFrame(animate);
            if (!gameActive) return;

// Timer
            document.getElementById('timer').innerText = `Time: ${((Date.now() - startTime)/1000).toFixed(1)}s`;

// Movement Logic
            const delta = 0.1;
            velocity.x -= velocity.x * 10.0 * delta;
            velocity.z -= velocity.z * 10.0 * delta;
            velocity.y -= 0.01; // Gravity

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

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

player.position.x += velocity.x;
            player.position.y += velocity.y;
            player.position.z += velocity.z;

// Collision Detection (Simple)
            canJump = false;
            platforms.forEach(p => {
                const pBox = new THREE.Box3().setFromObject(p);
                const playerBox = new THREE.Box3().setFromObject(player);

if (playerBox.intersectsBox(pBox)) {
                    if (player.position.y > p.position.y) {
                        player.position.y = p.position.y + 1.5;
                        velocity.y = 0;
                        canJump = true;
                        
                        if (p.isGoal) {
                            gameActive = false;
                            document.getElementById('win-screen').style.display = 'block';
                            document.getElementById('final-time').innerText = `Finished in ${((Date.now() - startTime)/1000).toFixed(2)} seconds!`;
                        }
                    }
                }
            });

// Fall off map
            if (player.position.y < -10) resetPlayer();

// Camera follow
            camera.position.set(player.position.x, player.position.y + 5, player.position.z + 12);
            camera.lookAt(player.position);

renderer.render(scene, camera);
        }
    </script>
</body>
</html>

CSS