Insane 3D Game

Okay, let's start building something. We'll begin with a basic Three.js scene setup. Insane 3D Game

Move: WASD - Jump: SPACE - Look: MOUSE

body { margin: 0; overflow: hidden; background-color: #000; color: white; font-family: monospace; } canvas { display: block; } #info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display: block; color: #ffffff; background-color: rgba(0,0,0,0.5); padding: 5px; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; let camera, scene, renderer, controls; let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; let canJump = false; let velocity = new THREE.Vector3(); let direction = new THREE.Vector3(); const color = new THREE.Color(); let prevTime = performance.now(); init(); animate(); function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // Sky blue background scene.fog = new THREE.Fog(0x87ceeb, 0, 50); // Camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.y = 1.6; // Approximate eye level // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; // Enable shadows document.body.appendChild(renderer.domElement); // Pointer Lock Controls controls = new PointerLockControls(camera, document.body); const blocker = document.createElement('div'); blocker.style.position = 'absolute'; blocker.style.width = '100%'; blocker.style.height = '100%'; blocker.style.backgroundColor = 'rgba(0,0,0,0.5)'; blocker.style.display = 'flex'; blocker.style.justifyContent = 'center'; blocker.style.alignItems = 'center'; blocker.style.color = 'white'; blocker.style.fontSize = '24px'; blocker.style.cursor = 'pointer'; blocker.innerHTML = 'Click to Play'; document.body.appendChild(blocker); blocker.addEventListener('click', () => { controls.lock(); }); controls.addEventListener('lock', () => { blocker.style.display = 'none'; document.getElementById('info').style.display = 'block'; }); controls.addEventListener('unlock', () => { blocker.style.display = 'flex'; document.getElementById('info').style.display = 'none'; }); scene.add(controls.getObject()); // Add camera holder to scene // Keyboard controls setup const onKeyDown = function (event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; case 'Space': if (canJump === true) velocity.y += 10; // Jump force canJump = false; break; } }; const onKeyUp = function (event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; // Enable shadow casting // Configure shadow properties 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); // scene.add(new THREE.CameraHelper(directionalLight.shadow.camera)); // Optional: visualize shadow camera // 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; ground.receiveShadow = true; // Allow ground to receive shadows scene.add(ground); // Simple "insane" element: A rapidly color-changing, rotating cube const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); const cubeMaterial = new THREE.MeshStandardMaterial({ vertexColors: false }); // Start with a basic material const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.set(0, 0.5, -5); cube.castShadow = true; // Allow cube to cast shadows cube.userData.insane = true; // Mark this cube for special animation scene.add(cube); // Add some more static cubes for (let i = 0; i < 10; i++) { const staticCube = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff }) ); staticCube.position.set( (Math.random() - 0.5) * 40, 0.5, (Math.random() - 0.5) * 40 ); staticCube.castShadow = true; staticCube.receiveShadow = true; scene.add(staticCube); } // Handle window resize window.addEventListener('resize', onWindowResize); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const time = performance.now(); const delta = (time - prevTime) / 1000; // Time delta in seconds // --- Player Movement --- if (controls.isLocked === true) { velocity.x -= velocity.x * 10.0 * delta; // Air resistance/friction x velocity.z -= velocity.z * 10.0 * delta; // Air resistance/friction z velocity.y -= 9.8 * 1.5 * delta; // Gravity (mass * gravity * delta) direction.z = Number(moveForward) - Number(moveBackward); direction.x = Number(moveRight) - Number(moveLeft); direction.normalize(); // Ensures consistent movement speed in all directions const speed = 40.0; // Movement speed multiplier if (moveForward || moveBackward) velocity.z -= direction.z * speed * delta; if (moveLeft || moveRight) velocity.x -= direction.x * speed * delta; // Apply movement based on camera direction controls.moveRight(-velocity.x * delta); controls.moveForward(-velocity.z * delta); // Apply vertical movement (gravity/jump) controls.getObject().position.y += (velocity.y * delta); // Simple collision detection with ground if (controls.getObject().position.y < 1.6) { velocity.y = 0; controls.getObject().position.y = 1.6; canJump = true; } } // --- End Player Movement --- // --- Insane Cube Animation --- scene.traverse((object) => { if (object.isMesh && object.userData.insane) { object.rotation.x += delta * 2; object.rotation.y += delta * 3; object.material.color.setHSL(Math.random(), 1, 0.5); // Rapid color change object.scale.setScalar(1 + Math.sin(time * 0.005) * 0.5); // Pulsating scale } }); // --- End Insane Cube Animation --- prevTime = time; renderer.render(scene, camera); }