Flying Simulator

W/S: Pitch | A/D: Roll | Q/E: Yaw | Arrow Up/Down: Thrust

body { margin: 0; overflow: hidden; background-color: #000; color: white; font-family: monospace; } canvas { display: block; } #info { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 3px; } import * as THREE from 'three'; import { setupScene } from './scene.js'; import { createPlane } from './plane.js'; import { createWorld } from './world.js'; import { setupControls } from './controls.js'; import { createSkybox } from './skybox.js'; // Basic setup const { scene, camera, renderer } = setupScene(); const clock = new THREE.Clock(); // World const world = createWorld(); scene.add(world); // Skybox const skybox = createSkybox(); scene.background = skybox; // Plane const plane = createPlane(); scene.add(plane); plane.position.set(0, 605, 0); // Start slightly above the world surface // Controls const controls = setupControls(plane); // Camera setup (Third-person follow) const cameraOffset = new THREE.Vector3(0, 5, -15); // Behind and slightly above // Animation loop function animate() { requestAnimationFrame(animate); const deltaTime = clock.getDelta(); // Update controls and plane physics controls.update(deltaTime); // Update camera position and orientation const offset = cameraOffset.clone().applyQuaternion(plane.quaternion); const cameraTargetPosition = plane.position.clone().add(offset); // Smooth camera movement (lerp) camera.position.lerp(cameraTargetPosition, 0.1); // Adjust lerp factor for smoothness // Make camera look slightly ahead of the plane for better context const lookAtTarget = plane.position.clone().add(new THREE.Vector3(0, 0, 10).applyQuaternion(plane.quaternion)); camera.lookAt(lookAtTarget); // Keep world sphere centered on the plane's XZ position to simulate infinite world world.position.set(plane.position.x, 0, plane.position.z); renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); animate(); import * as THREE from 'three'; export function setupScene() { // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 20000); // Increased far plane // Renderer 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, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); return { scene, camera, renderer }; } import * as THREE from 'three'; export function createPlane() { // Simple representation of a plane const bodyGeometry = new THREE.ConeGeometry(0.5, 2, 8); // Cone for the body const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.rotation.x = Math.PI / 2; // Point forward const wingGeometry = new THREE.BoxGeometry(3, 0.1, 0.8); // Wings const wingMaterial = new THREE.MeshPhongMaterial({ color: 0xaaaaaa }); const wings = new THREE.Mesh(wingGeometry, wingMaterial); wings.position.y = -0.2; wings.position.z = -0.5; const tailWingGeometry = new THREE.BoxGeometry(1, 0.1, 0.4); // Tail wing const tailWing = new THREE.Mesh(tailWingGeometry, wingMaterial); tailWing.position.z = 1.2; tailWing.position.y = 0.1; const tailFinGeometry = new THREE.BoxGeometry(0.1, 0.5, 0.4); // Tail fin const tailFin = new THREE.Mesh(tailFinGeometry, wingMaterial); tailFin.position.z = 1.2; tailFin.position.y = 0.35; const planeGroup = new THREE.Group(); planeGroup.add(body); planeGroup.add(wings); planeGroup.add(tailWing); planeGroup.add(tailFin); // Add custom properties for physics/controls planeGroup.userData.velocity = new THREE.Vector3(); planeGroup.userData.thrust = 5; // Initial speed planeGroup.userData.lift = 0.05; // Basic lift simulation planeGroup.userData.drag = 0.99; // Air resistance planeGroup.userData.angularVelocity = new THREE.Vector3(); planeGroup.userData.angularDrag = 0.97; planeGroup.userData.pitchSpeed = 0; planeGroup.userData.rollSpeed = 0; planeGroup.userData.yawSpeed = 0; return planeGroup; } import * as THREE from 'three'; export function createWorld() { const geometry = new THREE.SphereGeometry(600, 64, 64); // Large sphere // Simple green material for land const material = new THREE.MeshPhongMaterial({ color: 0x228B22, // ForestGreen // wireframe: true // Optional: for debugging }); const worldSphere = new THREE.Mesh(geometry, material); worldSphere.rotation.x = -Math.PI / 2; // Orient correctly if using textures later worldSphere.position.y = 0; // Center the sphere vertically // Add some simple features (e.g., bumps for mountains) - optional // This requires modifying geometry vertices which is more complex. // For now, a smooth sphere is fine. return worldSphere; } import * as THREE from 'three'; export function createSkybox() { const loader = new THREE.CubeTextureLoader(); const texture = loader.load([ 'https://threejs.org/examples/textures/cube/skyboxsun25deg/px.jpg', // right 'https://threejs.org/examples/textures/cube/skyboxsun25deg/nx.jpg', // left 'https://threejs.org/examples/textures/cube/skyboxsun25deg/py.jpg', // top 'https://threejs.org/examples/textures/cube/skyboxsun25deg/ny.jpg', // bottom 'https://threejs.org/examples/textures/cube/skyboxsun25deg/pz.jpg', // front 'https://threejs.org/examples/textures/cube/skyboxsun25deg/nz.jpg' // back ]); return texture; } import * as THREE from 'three'; const keys = { KeyW: false, KeyS: false, KeyA: false, KeyD: false, KeyQ: false, KeyE: false, ArrowUp: false, ArrowDown: false }; export function setupControls(plane) { window.addEventListener('keydown', (event) => { if (keys.hasOwnProperty(event.code)) { keys[event.code] = true; } }); window.addEventListener('keyup', (event) => { if (keys.hasOwnProperty(event.code)) { keys[event.code] = false; } }); const controlSettings = { pitchRate: 0.02, rollRate: 0.03, yawRate: 0.015, thrustAcceleration: 0.2, maxThrust: 50, minThrust: 2, gravity: 0.01 // Simple gravity effect }; function update(deltaTime) { const { velocity, thrust, lift, drag, angularVelocity, angularDrag, pitchSpeed, rollSpeed, yawSpeed } = plane.userData; // --- Thrust Control --- if (keys.ArrowUp) { plane.userData.thrust = Math.min(plane.userData.thrust + controlSettings.thrustAcceleration, controlSettings.maxThrust); } if (keys.ArrowDown) { plane.userData.thrust = Math.max(plane.userData.thrust - controlSettings.thrustAcceleration, controlSettings.minThrust); } // --- Rotational Control --- let targetPitchSpeed = 0; let targetRollSpeed = 0; let targetYawSpeed = 0; if (keys.KeyW) targetPitchSpeed = controlSettings.pitchRate; if (keys.KeyS) targetPitchSpeed = -controlSettings.pitchRate; if (keys.KeyA) targetRollSpeed = controlSettings.rollRate; if (keys.KeyD) targetRollSpeed = -controlSettings.rollRate; if (keys.KeyQ) targetYawSpeed = controlSettings.yawRate; if (keys.KeyE) targetYawSpeed = -controlSettings.yawRate; // Smoothly approach target speeds (simple lerp) plane.userData.pitchSpeed += (targetPitchSpeed - pitchSpeed) * 0.1; plane.userData.rollSpeed += (targetRollSpeed - rollSpeed) * 0.1; plane.userData.yawSpeed += (targetYawSpeed - yawSpeed) * 0.1; // Apply angular drag plane.userData.pitchSpeed *= angularDrag; plane.userData.rollSpeed *= angularDrag; plane.userData.yawSpeed *= angularDrag; // Update angular velocity based on control inputs angularVelocity.set(plane.userData.pitchSpeed, plane.userData.yawSpeed, plane.userData.rollSpeed); // --- Update Orientation --- const deltaRotationQuaternion = new THREE.Quaternion() .setFromEuler(new THREE.Euler( angularVelocity.x, angularVelocity.y, angularVelocity.z, 'XYZ' // Order matters )); plane.quaternion.multiplyQuaternions(deltaRotationQuaternion, plane.quaternion); plane.quaternion.normalize(); // Important for stability // --- Update Velocity --- // Get forward direction const forward = new THREE.Vector3(0, 0, 1).applyQuaternion(plane.quaternion); // Get up direction const up = new THREE.Vector3(0, 1, 0).applyQuaternion(plane.quaternion); // Apply thrust in the forward direction velocity.addScaledVector(forward, thrust * deltaTime); // Apply simple lift based on forward speed (component perpendicular to gravity) // This is a very basic approximation const liftForce = up.clone().multiplyScalar(velocity.lengthSq() * lift); velocity.addScaledVector(liftForce, deltaTime); // Apply simple gravity velocity.y -= controlSettings.gravity * deltaTime; // Apply drag velocity.multiplyScalar(drag); // --- Update Position --- plane.position.addScaledVector(velocity, deltaTime); // --- Collision / Ground Check (very basic) --- const groundLevel = 600; // Radius of the world sphere if (plane.position.length() < groundLevel + 0.5) { // Check distance from origin // Simple bounce/stop effect plane.position.setLength(groundLevel + 0.5); velocity.multiplyScalar(-0.1); // Lose some speed on impact // Dampen vertical velocity more strongly velocity.y = Math.max(0, velocity.y * 0.1); } } return { update }; }