Spaces:

akhaliq
/

cargames

Running

App Files Files Community

akhaliq HF Staff commited on Apr 6, 2025

Commit

b79e6f7

verified ·

1 Parent(s): c1f40ba

Update index.html

Browse files

Files changed (1) hide show

index.html +145 -180

index.html CHANGED Viewed

@@ -3,205 +3,170 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Car Simulator with Three.js</title>
     <style>
         body { margin: 0; background-color: #87CEEB; overflow: hidden; }
         canvas { display: block; }
     </style>
 </head>
 <body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script>
-// SETUP SCENE, CAMERA, RENDERER
 let scene = new THREE.Scene();
 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 let renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
-// SKYBOX / BACKGROUND (just a simple gradient sky, no cube maps today)
-let skyGeom = new THREE.SphereGeometry(500, 32, 32);
-let skyMat = new THREE.MeshBasicMaterial({
-    map: new THREE.CanvasTexture((function(){
-        let c = document.createElement('canvas'), ctx = c.getContext('2d');
-        c.width = c.height = 256;
-        let grd = ctx.createLinearGradient(0, 0, 0, 256);
-        grd.addColorStop(0, '#87CEEB'); // light sky blue top
-        grd.addColorStop(1, '#4682B4'); // steel blue bottom
-        ctx.fillStyle = grd;
-        ctx.fillRect(0, 0, 256, 256);
-        return c;
-    })()),
-    side: THREE.BackSide
-});
-let sky = new THREE.Mesh(skyGeom, skyMat);
-scene.add(sky);
-// CLOUDS (just a few puffy billow-y things using transparent textures)
-function makeCloud(x, y, z) {
-    let cloudGeo = new THREE.SphereGeometry(10 + Math.random() * 5, 16, 16);
-    let cloudMat = new THREE.MeshBasicMaterial({
-        color: 0xffffff,
-        opacity: Math.random() * 0.3 + 0.2,
-        transparent: true,
-        map: new THREE.CanvasTexture((function(){
-            let c = document.createElement('canvas'), ctx = c.getContext('2d');
-            c.width = c.height = 64;
-            ctx.fillStyle = 'white';
-            ctx.beginPath(); ctx.arc(32, 32, 28, 0, Math.PI * 2); ctx.fill();
-            // make edges puffy/feathered
-            let gd = ctx.createRadialGradient(32, 32, 10, 32, 32, 28);
-            gd.addColorStop(0, 'rgba(255,255,255,1)');
-            gd.addColorStop(0.7, 'rgba(255,255,255,0.3)');
-            gd.addColorStop(1, 'rgba(255,255,255,0)');
-            ctx.fillStyle = gd;
-            ctx.fillRect(0, 0, 64, 64);
-            return c;
-        })())
-    });
-    let cloud = new THREE.Mesh(cloudGeo, cloudMat);
-    cloud.position.set(x, y, z);
-    scene.add(cloud);
-    return cloud;
-}
-let clouds = [];
-for (let i = 0; i < 10; i++) clouds.push(makeCloud(Math.random() * 200 - 100, 30 + Math.random() * 10, Math.random() * 200 - 100));
-// MOUNTAINS (simple low-poly with vertex colors)
-let mountainGeom = new THREE.BufferGeometry();
-let mVerts = new Float32Array([
-     0,  0,  0,
-    50,  0,  0,
-    25, 40,  0,
-    50,  0,  0,
-   100,  0,  0,
-    75, 40,  0,
-     0,  0,  0,
-     0,  0, 50,
-    25, 40, 25,
-   100,  0,  0,
-   100,  0, 50,
-    75, 40, 25,
-]);
-let mColors = new Float32Array([
-    0.5, 0.4, 0.3,  // brown base
-    0.5, 0.4, 0.3,
-    0.7, 0.6, 0.5,  // beige peak
-    0.5, 0.4, 0.3,
-    0.5, 0.4, 0.3,
-    0.7, 0.6, 0.5,
-    0.5, 0.4, 0.3,
-    0.5, 0.4, 0.3,
-    0.7, 0.6, 0.5,
-    0.5, 0.4, 0.3,
-    0.5, 0.4, 0.3,
-    0.7, 0.6, 0.5,
 ]);
-mountainGeom.setAttribute('position', new THREE.BufferAttribute(mVerts, 3));
-mountainGeom.setAttribute('color', new THREE.BufferAttribute(mColors, 3));
-let mountainMat = new THREE.MeshBasicMaterial({ vertexColors: true });
-let mountains = new THREE.Mesh(mountainGeom, mountainMat);
-mountains.scale.set(4, 4, 4); // bigger
-mountains.position.z = -100;
-scene.add(mountains);
-// ROAD (just a long thin plane)
-let roadGeom = new THREE.PlaneGeometry(200, 10);
-let roadMat = new THREE.MeshBasicMaterial({ color: 0x444444 });
-let road = new THREE.Mesh(roadGeom, roadMat);
-road.rotation.x = -Math.PI / 2; // flat on ground
-road.position.y = -0.1; // under car wheels
-scene.add(road);
-// TREES (simple green cones)
-function makeTree(x, z) {
-    let treeGeo = new THREE.ConeGeometry(4, 10);
-    let treeMat = new THREE.MeshBasicMaterial({ color: 0x228B22 }); // forestgreen
-    let tree = new THREE.Mesh(treeGeo, treeMat);
-    tree.position.set(x, 5, z); // half-height up so it sits on ground
-    scene.add(tree);
-    // quick 'n' dirty trunk
-    let trunkGeo = new THREE.CylinderGeometry(1, 1, 2);
-    let trunkMat = new THREE.MeshBasicMaterial({ color: 0x964B00 }); // brown
-    let trunk = new THREE.Mesh(trunkGeo, trunkMat);
-    trunk.position.set(x, 1, z);
-    scene.add(trunk);
-}
-for (let i = -5; i <= 5; i++) {
-    makeTree(i * 15, -50); // left side trees
-    makeTree(i * 15,  50); // right side trees
-}
-// CAR (just a box with wheels)
-let carBodyGeom = new THREE.BoxGeometry(10, 4, 6);
-let carBodyMat = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // red
-let car = new THREE.Mesh(carBodyGeom, carBodyMat);
-car.position.y = 2; // up off ground
-let wheelGeo = new THREE.CylinderGeometry(1.5, 1.5, 1);
-let wheelMat = new THREE.MeshBasicMaterial({ color: 0x333333 });
-function makeWheel(x, z) {
-    let wheel = new THREE.Mesh(wheelGeo, wheelMat);
-    wheel.rotation.x = Math.PI / 2; // roll it
-    wheel.position.set(x, 0.5, z);
-    car.add(wheel);
-}
-makeWheel(-4, -2); makeWheel( 4, -2); // front wheels
-makeWheel(-4,  2); makeWheel( 4,  2); // rear wheels
-scene.add(car);
-// TRAIN (just a long box with wheels, moving in circle)
-let trainBodyGeom = new THREE.BoxGeometry(30, 4, 6);
-let trainBodyMat = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // blue
-let train = new THREE.Mesh(trainBodyGeom, trainBodyMat);
-train.position.y = 2;
-train.position.x = 80; // start off to side
-let trainWheelGeo = new THREE.CylinderGeometry(2, 2, 1.5);
-let trainWheelMat = new THREE.MeshBasicMaterial({ color: 0x333333 });
-function makeTrainWheel(x, z) {
-    let wheel = new THREE.Mesh(trainWheelGeo, trainWheelMat);
-    wheel.rotation.x = Math.PI / 2;
-    wheel.position.set(x, 0.5, z);
-    train.add(wheel);
-}
-makeTrainWheel(-12, -2.5); makeTrainWheel( 12, -2.5);
-makeTrainWheel(-12,  2.5); makeTrainWheel( 12,  2.5);
-scene.add(train);
-// ANIMATION / PHYSICS
-let carSpeed = 0.5;
-let trainAngle = 0;
-let clock = new THREE.Clock();
 function animate() {
     requestAnimationFrame(animate);
-    // move car forward
-    car.position.z += carSpeed;
-    if (car.position.z > 100) car.position.z = -100; // loop road
-    // move train in circle (easy parametric equation)
-    trainAngle += 0.01;
-    train.position.x = Math.cos(trainAngle) * 80;
-    train.position.z = Math.sin(trainAngle) * 80;
-    train.rotation.y = trainAngle + Math.PI / 2; // face direction of travel
-    // bob clouds gently up/down
-    clouds.forEach(cloud => {
-        cloud.position.y = 30 + Math.sin(clock.getElapsedTime() + cloud.position.x * 0.01) * 2;
-    });
-    // keep camera just behind car
-    camera.position.x = car.position.x;
-    camera.position.z = car.position.z - 15;
-    camera.position.y = 8; // nice view height
-    camera.lookAt(car.position.x, 2, car.position.z); // look at car
     renderer.render(scene, camera);
 }
 animate();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Flight Simulator</title>
     <style>
         body { margin: 0; background-color: #87CEEB; overflow: hidden; }
         canvas { display: block; }
+        #controls { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.7); padding: 10px; font-family: monospace; }
     </style>
 </head>
 <body>
+<div id="controls">
+    <b>Flight Simulator Controls:</b><br>
+    W / ↑ : Pitch Up (Climb)<br>
+    S / ↓ : Pitch Down (Dive)<br>
+    A / ← : Yaw Left (Turn Left)<br>
+    D / → : Yaw Right (Turn Right)<br>
+    Q / E : Roll Left / Right (Bank)<br>
+    ↑↑ Speed up (W pressed faster)<br>
+    ↓↓ Slow down (S pressed slower)<br>
+    Mouse Look (move mouse to look around)
+</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script>
+// Our scene
 let scene = new THREE.Scene();
+scene.background = new THREE.Color(0x87CEEB); // Sky blue
+// Camera = our eyes in the plane
 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+// Renderer
 let renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
+// Simple ground (big plane)
+let groundGeom = new THREE.PlaneGeometry(100, 100);
+let groundMat = new THREE.MeshLambertMaterial({ color: 0x32CD32 }); // Lime green
+let ground = new THREE.Mesh(groundGeom, groundMat);
+ground.rotation.x = -Math.PI / 2; // Lay it flat
+ground.position.y = -2; // A bit below zero
+scene.add(ground);
+// Simple airplane (just for show, a box + 2 triangles for "wings")
+let planeGeom = new THREE.BufferGeometry();
+const planeVertices = new Float32Array([
+    // Fuselage (box)
+    -1, -0.2,  1,   1, -0.2,  1,   1,  0.2,  1,  -1,  0.2,  1,   // front face
+    -1, -0.2, -1,   1, -0.2, -1,   1,  0.2, -1,  -1,  0.2, -1,   // back face
+    -1, -0.2, -1,  -1, -0.2,  1,  -1,  0.2,  1,  -1,  0.2, -1,   // left face
+     1, -0.2, -1,   1, -0.2,  1,   1,  0.2,  1,   1,  0.2, -1,   // right face
+    -1, -0.2, -1,   1, -0.2, -1,   1, -0.2,  1,  -1, -0.2,  1,   // bottom face
+    -1,  0.2, -1,   1,  0.2, -1,   1,  0.2,  1,  -1,  0.2,  1,   // top face
+    // Left wing (triangle)
+    -1, 0, 1,  -2, 0, 0.5,  -1, 0, -1,
+    // Right wing (triangle)
+     1, 0, 1,   2, 0, 0.5,   1, 0, -1,
 ]);
+let posAttr = new THREE.BufferAttribute(planeVertices, 3);
+planeGeom.setAttribute('position', posAttr);
+let planeMat = new THREE.MeshBasicMaterial({ color: 0xFFFFFF }); // White plane
+let plane = new THREE.Mesh(planeGeom, planeMat);
+scene.add(plane);
+camera.position.y = 2; // Sit in the "cockpit"
+camera.position.z = 5; // A bit forward
+plane.add(camera); // Camera is now child of plane, so it moves with it
+// Lighting (2 lights, ambient + directional)
+let ambientLight = new THREE.AmbientLight(0x444444);
+scene.add(ambientLight);
+let dirLight = new THREE.DirectionalLight(0xFFFFFF, 0.8);
+dirLight.position.set(5, 10, 5);
+scene.add(dirLight);
+// Flight dynamics variables
+let pitch = 0; // Up/down nose
+let yaw = 0; // Left/right turn
+let roll = 0; // Left/right tilt (banking)
+let speed = 0.05; // Forward movement speed
+let maxSpeed = 0.2;
+let minSpeed = 0.01;
+// Mouse look variables
+let mouseDown = false;
+let lastMouseX, lastMouseY;
+let sensitivity = 0.005;
+// Key controls state
+let keys = {
+    w: false, s: false, a: false, d: false, q: false, e: false
+};
+// Handle key presses
+document.addEventListener('keydown', (e) => {
+    switch (e.key) {
+        case 'w': case 'ArrowUp': keys.w = true; break;
+        case 's': case 'ArrowDown': keys.s = true; break;
+        case 'a': case 'ArrowLeft': keys.a = true; break;
+        case 'd': case 'ArrowRight': keys.d = true; break;
+        case 'q': keys.q = true; break;
+        case 'e': keys.e = true; break;
+    }
+});
+document.addEventListener('keyup', (e) => {
+    switch (e.key) {
+        case 'w': case 'ArrowUp': keys.w = false; break;
+        case 's': case 'ArrowDown': keys.s = false; break;
+        case 'a': case 'ArrowLeft': keys.a = false; break;
+        case 'd': case 'ArrowRight': keys.d = false; break;
+        case 'q': keys.q = false; break;
+        case 'e': keys.e = false; break;
+    }
+});
+// Handle mouse for looking around
+document.addEventListener('mousedown', (e) => {
+    mouseDown = true;
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+});
+document.addEventListener('mouseup', () => mouseDown = false);
+document.addEventListener('mousemove', (e) => {
+    if (mouseDown) {
+        let dx = e.clientX - lastMouseX;
+        let dy = e.clientY - lastMouseY;
+        yaw -= dx * sensitivity;
+        pitch -= dy * sensitivity;
+        pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch)); // limit straight up/down
+        lastMouseX = e.clientX;
+        lastMouseY = e.clientY;
+    }
+});
+// Main animation loop
 function animate() {
     requestAnimationFrame(animate);
+    // Controls logic
+    if (keys.w) pitch -= 0.01; // Nose down to climb
+    if (keys.s) pitch += 0.01; // Nose up to dive
+    if (keys.a) yaw -= 0.02; // Turn left
+    if (keys.d) yaw += 0.02; // Turn right
+    if (keys.q) roll -= 0.02; // Roll left
+    if (keys.e) roll += 0.02; // Roll right
+    // Speed adjustment (very basic)
+    if (keys.w && speed < maxSpeed) speed *= 1.01; // Accelerate
+    if (keys.s && speed > minSpeed) speed *= 0.99; // Brake
+    // Limit angles
+    pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch));
+    roll = Math.max(-Math.PI/4, Math.min(Math.PI/4, roll));
+    // Move plane forward (always toward its blue axis, which is -Z in its local space)
+    plane.translateZ(-speed); // Negative because Three.js uses right-hand coord system
+    // Apply rotations (order matters: roll, pitch, yaw - like aircraft conventions)
+    plane.rotation.z = roll;
+    plane.rotation.x = pitch;
+    plane.rotation.y = yaw;
+    // Just for visual niceness: move the directional light with camera a bit
+    dirLight.position.copy(camera.getWorldPosition(new THREE.Vector3()).add(new THREE.Vector3(5, 10, 5)));
     renderer.render(scene, camera);
 }
 animate();