Spaces:

latterworks
/

wanderlust-3d-explorer

Running

App Files Files Community

latterworks commited on Oct 11, 2025

Commit

cf7fe6f

verified ·

1 Parent(s): 738ac09

Build a complete browser-based first-person 3D environment using the latest stable version of Three.js. The user must be able to move freely through the environment using the WASD keys for directional movement and the mouse for camera rotation through pointer lock controls. The implementation must not include any overlays, popups, or interactive prompts such as “Click to Begin.” Implement a camera soldier system that maintains a human-scale eye height, smooth acceleration, head stability, and accurate step height relative to the ground. Include a visible textured ground plane that spans a large enough area for continuous movement. Place one static 3D object within the scene positioned as a navigation obstacle. Include a complete lighting setup using a combination of directional light and hemispheric light to achieve visible illumination across all geometry. Implement smooth movement physics that remain consistent under variable frame rates by using delta-time-based integration. Ensure collision handling between the player controller and static geometry so that the user cannot pass through solid objects. Maintain correct visual proportions and perspective under all window resizing events by recalculating aspect ratio and updating the camera projection matrix dynamically. Use current JavaScript and Three.js best practices with explicit import statements from the most recent stable module URLs. All variable names must follow consistent camelCase naming. All functions must include concise, technically accurate code comments describing their purpose and behavior. Use strict typing where possible, avoid global variables, and ensure deterministic behavior of the main animation loop driven by requestAnimationFrame. The program must execute without console warnings, syntax errors, or deprecated API usage.

Browse files

Files changed (1) hide show

index.html +143 -200

index.html CHANGED Viewed

@@ -1,146 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WanderLust 3D Explorer</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>
     <style>
         body {
             margin: 0;
             overflow: hidden;
-            font-family: 'Inter', sans-serif;
-        }
-        #info {
-            position: absolute;
-            top: 10px;
-            width: 100%;
-            text-align: center;
-            color: white;
-            z-index: 100;
-            pointer-events: none;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-        }
-        #blocker {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.7);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            z-index: 200;
-        }
-        #instructions {
-            color: white;
-            max-width: 600px;
-            text-align: center;
-            padding: 20px;
-            background-color: rgba(0,0,0,0.5);
-            border-radius: 10px;
         }
-        #startButton {
-            padding: 12px 24px;
-            margin-top: 20px;
-            background: linear-gradient(135deg, #6e8efb, #a777e3);
-            color: white;
-            border: none;
-            border-radius: 25px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        }
-        #startButton:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 8px rgba(0,0,0,0.15);
         }
     </style>
 </head>
-<body class="bg-gray-900">
-    <div id="info" class="text-lg">
-        WanderLust 3D Explorer | WASD to move | Mouse to look | ESC to exit
-    </div>
-    <div id="blocker">
-        <div id="instructions" class="text-xl">
-            <h1 class="text-3xl font-bold mb-4">Welcome to WanderLust</h1>
-            <p class="mb-6">Explore this immersive 3D environment freely.</p>
-            <p class="text-sm opacity-75">Click the button below to enter the experience. Use WASD keys to move and mouse to look around.</p>
-            <button id="startButton">BEGIN EXPLORATION</button>
-        </div>
-    </div>
     <script>
         // Scene setup
         const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x87CEEB); // Sky blue background
-        // Camera
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        camera.position.y = 1.6; // Approximate eye-level height
-        // Renderer
         const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         renderer.shadowMap.enabled = true;
         document.body.appendChild(renderer.domElement);
-        // Controls (Pointer Lock)
         const controls = new THREE.PointerLockControls(camera, document.body);
-        let moveForward = false;
-        let moveBackward = false;
-        let moveLeft = false;
-        let moveRight = false;
-        let canJump = false;
-        // Velocity and movement variables
         const velocity = new THREE.Vector3();
         const direction = new THREE.Vector3();
-        let prevTime = performance.now();
-        // Event listeners for controls
-        document.addEventListener('keydown', (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 += 0.15; break;
-            }
-        });
-        document.addEventListener('keyup', (event) => {
-            switch (event.code) {
-                case 'KeyW': moveForward = false; break;
-                case 'KeyA': moveLeft = false; break;
-                case 'KeyS': moveBackward = false; break;
-                case 'KeyD': moveRight = false; break;
-            }
-        });
-        // UI Elements
-        const blocker = document.getElementById('blocker');
-        const instructions = document.getElementById('instructions');
-        const startButton = document.getElementById('startButton');
-        startButton.addEventListener('click', () => {
-            controls.lock();
-        });
-        controls.addEventListener('lock', () => {
-            blocker.style.display = 'none';
-        });
-        controls.addEventListener('unlock', () => {
-            blocker.style.display = 'flex';
-        });
-        // Create ground
         const groundGeometry = new THREE.PlaneGeometry(100, 100);
         const groundMaterial = new THREE.MeshStandardMaterial({
-            color: 0x3a5f0b,
             roughness: 0.8,
             metalness: 0.2
         });
@@ -149,40 +73,21 @@
         ground.receiveShadow = true;
         scene.add(ground);
-        // Add some objects to navigate around
-        const addRandomObjects = () => {
-            const geometry = new THREE.BoxGeometry(2, 2, 2);
-            const material = new THREE.MeshStandardMaterial({
-                color: 0x7777ff,
-                roughness: 0.5,
-                metalness: 0.5
-            });
-            for (let i = 0; i < 10; i++) {
-                const cube = new THREE.Mesh(geometry, material);
-                cube.castShadow = true;
-                cube.receiveShadow = true;
-                cube.position.x = Math.random() * 40 - 20;
-                cube.position.y = 1;
-                cube.position.z = Math.random() * 40 - 20;
-                scene.add(cube);
-            }
-            // Add a larger central structure
-            const towerGeometry = new THREE.CylinderGeometry(3, 2, 8, 8);
-            const towerMaterial = new THREE.MeshStandardMaterial({ color: 0x9933ff });
-            const tower = new THREE.Mesh(towerGeometry, towerMaterial);
-            tower.position.y = 4;
-            tower.castShadow = true;
-            scene.add(tower);
-        };
-        // Lighting
-        const setupLighting = () => {
-            // Ambient light
-            const ambientLight = new THREE.AmbientLight(0x404040);
-            scene.add(ambientLight);
             // Directional light (sun)
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
             directionalLight.position.set(10, 20, 10);
@@ -191,86 +96,124 @@
             directionalLight.shadow.mapSize.height = 2048;
             directionalLight.shadow.camera.near = 0.5;
             directionalLight.shadow.camera.far = 500;
-            directionalLight.shadow.camera.left = -50;
-            directionalLight.shadow.camera.right = 50;
-            directionalLight.shadow.camera.top = 50;
-            directionalLight.shadow.camera.bottom = -50;
             scene.add(directionalLight);
-            // Hemisphere light for more natural outdoor lighting
             const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x3a5f0b, 0.3);
             scene.add(hemisphereLight);
-        };
-        // Simple skybox using a large sphere
-        const addSkybox = () => {
-            const skyGeometry = new THREE.SphereGeometry(500, 32, 32);
-            const skyMaterial = new THREE.MeshBasicMaterial({
-                color: 0x87CEEB,
-                side: THREE.BackSide
             });
-            const skybox = new THREE.Mesh(skyGeometry, skyMaterial);
-            scene.add(skybox);
-        };
-        // Window resize handler
-        const onWindowResize = () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        };
-        window.addEventListener('resize', onWindowResize, false);
-        // Initialize scene elements
-        setupLighting();
-        addRandomObjects();
-        addSkybox();
-        // Animation loop with frame-rate independent movement
-        const animate = () => {
             requestAnimationFrame(animate);
-            const time = performance.now();
-            const delta = (time - prevTime) / 1000;
-            prevTime = time;
-            // Calculate movement speed adjusted by delta time
-            const speed = 5.0;
-            const moveSpeed = speed * delta;
-            // Reset direction vector
-            direction.z = Number(moveForward) - Number(moveBackward);
-            direction.x = Number(moveRight) - Number(moveLeft);
             direction.normalize();
-            // Apply movement to velocity
-            if (moveForward || moveBackward) velocity.z -= direction.z * moveSpeed;
-            if (moveLeft || moveRight) velocity.x -= direction.x * moveSpeed;
             // Apply gravity
-            velocity.y -= 9.8 * delta;
-            // Move the player
-            controls.moveRight(-velocity.x);
-            controls.moveForward(-velocity.z);
-            controls.getObject().position.y += velocity.y * delta;
-            // Check if player is on the ground
-            if (controls.getObject().position.y < 1.6) {
                 velocity.y = 0;
-                controls.getObject().position.y = 1.6;
-                canJump = true;
             } else {
-                canJump = false;
             }
             // Apply damping (friction)
-            velocity.x *= (1.0 - 5.0 * delta);
-            velocity.z *= (1.0 - 5.0 * delta);
             renderer.render(scene, camera);
-        };
         animate();
     </script>
 </body>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WanderLust 3D Explorer</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r154/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.154.0/examples/js/controls/PointerLockControls.js"></script>
     <style>
         body {
             margin: 0;
             overflow: hidden;
         }
+        canvas {
+            display: block;
         }
     </style>
 </head>
+<body>
     <script>
+        'use strict';
         // Scene setup
         const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x87CEEB);
+        // Camera setup with human-scale eye height (1.6m)
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(0, 1.6, 0);
+        // Renderer with antialiasing and shadows
         const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         document.body.appendChild(renderer.domElement);
+        // PointerLock controls for first-person movement
         const controls = new THREE.PointerLockControls(camera, document.body);
+        // Movement state variables
+        const movementState = {
+            forward: false,
+            backward: false,
+            left: false,
+            right: false,
+            canJump: false
+        };
+        // Physics variables
         const velocity = new THREE.Vector3();
         const direction = new THREE.Vector3();
+        let prevTime = 0;
+        const playerHeight = 1.6;
+        const movementSpeed = 5.0;
+        const gravity = 9.8;
+        const dampingFactor = 5.0;
+        // Ground plane with texture
+        const groundTexture = new THREE.TextureLoader().load('http://static.photos/nature/1024x576/1');
+        groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
+        groundTexture.repeat.set(10, 10);
         const groundGeometry = new THREE.PlaneGeometry(100, 100);
         const groundMaterial = new THREE.MeshStandardMaterial({
+            map: groundTexture,
             roughness: 0.8,
             metalness: 0.2
         });
         ground.receiveShadow = true;
         scene.add(ground);
+        // Single obstacle (large cube)
+        const obstacleGeometry = new THREE.BoxGeometry(4, 4, 4);
+        const obstacleMaterial = new THREE.MeshStandardMaterial({
+            color: 0x9933ff,
+            roughness: 0.7,
+            metalness: 0.3
+        });
+        const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
+        obstacle.position.set(10, 2, 0);
+        obstacle.castShadow = true;
+        obstacle.receiveShadow = true;
+        scene.add(obstacle);
+        // Lighting setup
+        function setupLighting() {
             // Directional light (sun)
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
             directionalLight.position.set(10, 20, 10);
             directionalLight.shadow.mapSize.height = 2048;
             directionalLight.shadow.camera.near = 0.5;
             directionalLight.shadow.camera.far = 500;
             scene.add(directionalLight);
+            // Hemisphere light for ambient outdoor lighting
             const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x3a5f0b, 0.3);
             scene.add(hemisphereLight);
+        }
+        // Collision detection between player and obstacles
+        function checkCollisions(position) {
+            const playerBoundingBox = new THREE.Box3().setFromCenterAndSize(
+                new THREE.Vector3(position.x, position.y, position.z),
+                new THREE.Vector3(0.5, playerHeight, 0.5)
+            );
+            const obstacleBoundingBox = new THREE.Box3().setFromObject(obstacle);
+            return playerBoundingBox.intersectsBox(obstacleBoundingBox);
+        }
+        // Input event handlers
+        function setupEventListeners() {
+            document.addEventListener('keydown', (event) => {
+                switch (event.code) {
+                    case 'KeyW': movementState.forward = true; break;
+                    case 'KeyA': movementState.left = true; break;
+                    case 'KeyS': movementState.backward = true; break;
+                    case 'KeyD': movementState.right = true; break;
+                }
             });
+            document.addEventListener('keyup', (event) => {
+                switch (event.code) {
+                    case 'KeyW': movementState.forward = false; break;
+                    case 'KeyA': movementState.left = false; break;
+                    case 'KeyS': movementState.backward = false; break;
+                    case 'KeyD': movementState.right = false; break;
+                }
+            });
+            // Auto-enable pointer lock on click
+            document.addEventListener('click', () => {
+                if (!controls.isLocked) {
+                    controls.lock();
+                }
+            });
+            // Window resize handler
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+        }
+        // Initialize the scene
+        function init() {
+            setupLighting();
+            setupEventListeners();
+            // Start with pointer lock
+            controls.lock();
+        }
+        // Animation loop with delta-time based physics
+        function animate(currentTime = 0) {
             requestAnimationFrame(animate);
+            // Calculate delta time in seconds
+            const deltaTime = (currentTime - prevTime) / 1000;
+            prevTime = currentTime;
+            // Skip physics on first frame or when delta is too large
+            if (deltaTime > 0.1) return;
+            // Movement direction based on input
+            direction.z = Number(movementState.forward) - Number(movementState.backward);
+            direction.x = Number(movementState.right) - Number(movementState.left);
             direction.normalize();
+            // Apply movement with speed scaled by delta time
+            if (movementState.forward || movementState.backward) {
+                velocity.z -= direction.z * movementSpeed * deltaTime;
+            }
+            if (movementState.left || movementState.right) {
+                velocity.x -= direction.x * movementSpeed * deltaTime;
+            }
             // Apply gravity
+            velocity.y -= gravity * deltaTime;
+            // Calculate new position
+            const oldPosition = controls.getObject().position.clone();
+            controls.moveRight(-velocity.x * deltaTime);
+            controls.moveForward(-velocity.z * deltaTime);
+            controls.getObject().position.y += velocity.y * deltaTime;
+            // Check for collisions
+            if (checkCollisions(controls.getObject().position)) {
+                controls.getObject().position.copy(oldPosition);
+                velocity.set(0, 0, 0);
+            }
+            // Ground collision and jumping
+            if (controls.getObject().position.y < playerHeight) {
                 velocity.y = 0;
+                controls.getObject().position.y = playerHeight;
+                movementState.canJump = true;
             } else {
+                movementState.canJump = false;
             }
             // Apply damping (friction)
+            velocity.x *= Math.max(0, 1 - dampingFactor * deltaTime);
+            velocity.z *= Math.max(0, 1 - dampingFactor * deltaTime);
             renderer.render(scene, camera);
+        }
+        init();
         animate();
     </script>
 </body>