3D Forest Walk

Okay, let's create a basic 3D forest walk experience using Three.js. This will set up a simple scene with a ground plane, some "trees," and basic first-person movement controls (WASD keys). { "name": "3d-forest-walk", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^5.2.0" }, "dependencies": { "three": "^0.164.1" } } 3D Forest Walk

body { margin: 0; overflow: hidden; /* Prevent scrollbars */ background-color: #87ceeb; /* Sky blue background */ } canvas { display: block; /* Remove extra space below canvas */ } import * as THREE from 'three'; // Basic Scene Setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // Sky blue scene.fog = new THREE.Fog(0x87ceeb, 10, 50); // Add fog for atmosphere const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.7, 5); // Player height and starting position const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; // Enable shadows // Lighting const ambientLight = new THREE.AmbientLight(0x666666); // Soft ambient light scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; // Configure shadow properties for better quality directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -20; directionalLight.shadow.camera.right = 20; directionalLight.shadow.camera.top = 20; directionalLight.shadow.camera.bottom = -20; scene.add(directionalLight); // Optional: Add a light helper // const lightHelper = new THREE.DirectionalLightHelper(directionalLight, 5); // scene.add(lightHelper); // const shadowCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera); // scene.add(shadowCameraHelper); // Ground const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228b22, side: THREE.DoubleSide }); // Forest green const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; // Rotate to be horizontal ground.receiveShadow = true; scene.add(ground); // Trees (Simple Cylinders) const treeTrunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513 }); // Brown const treeLeavesMaterial = new THREE.MeshStandardMaterial({ color: 0x006400 }); // Dark green function createTree(x, z) { const trunkHeight = Math.random() * 2 + 2; // Random height between 2 and 4 const trunkRadius = 0.2; const trunkGeometry = new THREE.CylinderGeometry(trunkRadius, trunkRadius, trunkHeight, 8); const trunk = new THREE.Mesh(trunkGeometry, treeTrunkMaterial); trunk.position.set(x, trunkHeight / 2, z); trunk.castShadow = true; trunk.receiveShadow = true; scene.add(trunk); const leavesHeight = Math.random() * 2 + 2; const leavesRadius = Math.random() * 0.8 + 0.8; // Wider radius const leavesGeometry = new THREE.ConeGeometry(leavesRadius, leavesHeight, 8); const leaves = new THREE.Mesh(leavesGeometry, treeLeavesMaterial); leaves.position.set(x, trunkHeight + leavesHeight / 2, z); leaves.castShadow = true; leaves.receiveShadow = true; scene.add(leaves); } // Place some trees randomly for (let i = 0; i < 100; i++) { const x = (Math.random() - 0.5) * 90; // Spread across the ground plane const z = (Math.random() - 0.5) * 90; // Avoid placing trees too close to the start position if (Math.abs(x) > 3 || Math.abs(z) > 3) { createTree(x, z); } } // Movement Controls const moveState = { forward: 0, // -1 backward, 0 still, 1 forward turn: 0 // -1 left, 0 still, 1 right }; const moveSpeed = 0.08; const turnSpeed = 0.03; window.addEventListener('keydown', (event) => { switch (event.code) { case 'KeyW': case 'ArrowUp': moveState.forward = 1; break; case 'KeyS': case 'ArrowDown': moveState.forward = -1; break; case 'KeyA': case 'ArrowLeft': moveState.turn = 1; break; case 'KeyD': case 'ArrowRight': moveState.turn = -1; break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'KeyW': case 'ArrowUp': if (moveState.forward === 1) moveState.forward = 0; break; case 'KeyS': case 'ArrowDown': if (moveState.forward === -1) moveState.forward = 0; break; case 'KeyA': case 'ArrowLeft': if (moveState.turn === 1) moveState.turn = 0; break; case 'KeyD': case 'ArrowRight': if (moveState.turn === -1) moveState.turn = 0; break; } }); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation Loop function animate() { requestAnimationFrame(animate); // Update player position and rotation if (moveState.turn !== 0) { camera.rotation.y += moveState.turn * turnSpeed; } if (moveState.forward !== 0) { // Move relative to the camera's direction const direction = new THREE.Vector3(); camera.getWorldDirection(direction); camera.position.addScaledVector(direction, moveState.forward * moveSpeed); // Keep camera at player height (optional, prevents flying) camera.position.y = 1.7; } renderer.render(scene, camera); } animate(); npm install && npm run dev This sets up the project using Vite and Three.js. After running `npm install` and `npm run dev`, you can open the preview window. Use the W/A/S/D or Arrow keys to move forward/backward and turn left/right within the simple 3D forest environment.