Spaces:

akhaliq
/

cargames

Running

App Files Files Community

akhaliq HF Staff commited on Apr 6

Commit

107476b

verified ·

1 Parent(s): 638c90a

Update index.html

Browse files

Files changed (1) hide show

index.html +144 -156

index.html CHANGED Viewed

@@ -1,165 +1,153 @@
 <!DOCTYPE html>
-<html lang="en">
 <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
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize(window.innerWidth, window.innerHeight);
-document.body.appendChild(renderer.domElement);
-// CAMERA initial position
-camera.position.set(0, 5, 10);
-// RESIZE HANDLING
-window.addEventListener('resize', () => {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
     renderer.setSize(window.innerWidth, window.innerHeight);
-});
-// GROUND (Road)
-const roadGeom = new THREE.PlaneGeometry(100, 4);
-const roadMat = new THREE.MeshBasicMaterial({ color: 0x444444 });
-const road = new THREE.Mesh(roadGeom, roadMat);
-road.rotation.x = -Math.PI / 2;
-road.position.z = -2;
-scene.add(road);
-// ROAD dashed line
-const dashedLineGeom = new THREE.Geometry();
-for (let i = -50; i < 50; i += 4) {
-    const point = new THREE.Vector3(i, 0.1, -2);
-    dashedLineGeom.vertices.push(point);
-}
-const dashedLineMat = new THREE.LineDashedMaterial({
-    color: 0xffffff,
-    linewidth: 1,
-    scale: 1,
-    dashSize: 1,
-    gapSize: 1
-});
-const dashedLine = new THREE.Line(dashedLineGeom, dashedLineMat);
-dashedLine.computeLineDistances();
-scene.add(dashedLine);
-// MOUNTAINS (just 3 big blocks)
-const mountainGeom = new THREE.BoxGeometry(20, 10, 20);
-const mountainMat = new THREE.MeshLambertMaterial({ color: 0x888888 });
-for (let i = -1; i <= 1; i++) {
-    const mountain = new THREE.Mesh(mountainGeom, mountainMat);
-    mountain.position.set(i * 25, -5, -50);
-    scene.add(mountain);
-}
-// CLOUDS
-function makeCloud(x, z) {
-    const puffGeom = new THREE.SphereGeometry(2, 6, 6);
-    const puffMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.7 });
-    const cloud = new THREE.Group();
-    for (let i = 0; i < 3; i++) {
-        const puff = new THREE.Mesh(puffGeom, puffMat);
-        puff.position.set(i * 2 - 2, Math.random() * 2, Math.random() * 2 - 1);
-        cloud.add(puff);
-    }
-    cloud.position.set(x, 15, z);
-    scene.add(cloud);
-    return cloud;
-}
-const clouds = [];
-for (let i = 0; i < 10; i++) {
-    clouds.push(makeCloud(Math.random() * 100 - 50, Math.random() * 100 - 50));
-}
-// TREES (simple green cones)
-function makeTree(x, z) {
-    const treeGeom = new THREE.ConeGeometry(1, 3);
-    const treeMat = new THREE.MeshLambertMaterial({ color: 0x22aa22 });
-    const tree = new THREE.Mesh(treeGeom, treeMat);
-    tree.position.set(x, 1, z);
-    scene.add(tree);
-}
-for (let i = -40; i <= 40; i += 8) {
-    makeTree(i + Math.random() * 4 - 2, -4 + Math.random() * 2 - 1);
-}
-// CAR
-const carGeom = new THREE.BoxGeometry(3, 1.5, 1.5);
-const carMat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
-const car = new THREE.Mesh(carGeom, carMat);
-car.position.set(0, 1, 0);
-scene.add(car);
-let carSpeed = 0;
-let carDir = 0; // radians
-const carVel = new THREE.Vector3();
-// TRAIN (just a silly little train going in circles)
-const trainGeom = new THREE.BoxGeometry(2, 1, 1);
-const trainMat = new THREE.MeshLambertMaterial({ color: 0x0000ff });
-const train = new THREE.Mesh(trainGeom, trainMat);
-train.position.set(20, 1, -4);
-scene.add(train);
-let trainAngle = 0;
-// LIGHTING
-const ambientLight = new THREE.AmbientLight(0x333333);
-scene.add(ambientLight);
-const dirLight = new THREE.DirectionalLight(0xffffff, 1);
-dirLight.position.set(0, 10, 5);
-scene.add(dirLight);
-// KEYBOARD CONTROLS
-document.addEventListener('keydown', (e) => {
-    switch(e.key) {
-        case 'ArrowUp': case 'w': carSpeed = Math.min(carSpeed + 0.2, 0.5); break;
-        case 'ArrowDown': case 's': carSpeed = Math.max(carSpeed - 0.2, -0.5); break;
-        case 'ArrowLeft': case 'a': carDir -= 0.1; break;
-        case 'ArrowRight': case 'd': carDir += 0.1; break;
-    }
-});
-// MAIN LOOP
-function animate() {
-    requestAnimationFrame(animate);
-    // Move CAR
-    carVel.x = Math.sin(carDir) * carSpeed;
-    carVel.z = Math.cos(carDir) * carSpeed;
-    car.position.x += carVel.x;
-    car.position.z += carVel.z;
-    carSpeed *= 0.98; // damping
-    // keep car on road bounds
-    if (car.position.x < -45) car.position.x = -45;
-    if (car.position.x > 45) car.position.x = 45;
-    // Follow car with camera (smoothly)
-    camera.position.x += (car.position.x - camera.position.x) * 0.05;
-    camera.position.z += (car.position.z + 10 - camera.position.z) * 0.05;
-    // Move TRAIN in circle
-    trainAngle += 0.01;
-    train.position.x = Math.sin(trainAngle) * 20;
-    train.position.z = Math.cos(trainAngle) * 20 - 4;
-    // Move CLOUDS slowly
-    clouds.forEach(cloud => {
-        cloud.position.x += 0.01;
-        if (cloud.position.x > 50) cloud.position.x = -50;
     });
-    renderer.render(scene, camera);
-}
-animate();
-</script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
+  <meta charset="UTF-8">
+  <style>body { margin: 0; background-color: #87CEEB; }</style>
 </head>
 <body>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script>
+    // SETTINGS
+    var planeSpeed = 0.1;
+    var planeRollSpeed = 0.05;
+    var planePitchSpeed = 0.05;
+    var maxAltitude = 1000;
+    var maxSpeed = 5;
+    // SETUP SCENE, CAMERA, RENDERER
+    var scene = new THREE.Scene();
+    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
+    var renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+    // GENERATE SKYBOX (simple gradient)
+    var vertexShader = `
+      varying vec3 vWorldPosition;
+      void main() {
+        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+        vWorldPosition = worldPosition.xyz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `;
+    var fragmentShader = `
+      uniform vec3 topColor;
+      uniform vec3 bottomColor;
+      uniform float offset;
+      uniform float exponent;
+      varying vec3 vWorldPosition;
+      void main() {
+        float h = normalize(vWorldPosition + offset).y;
+        gl_FragColor = vec4(mix(bottomColor, topColor, pow(max(h, 0.0), exponent)), 1.0);
+      }
+    `;
+    var skyUniforms = {
+      topColor: { value: new THREE.Color(0x87CEEB) }, // light blue
+      bottomColor: { value: new THREE.Color(0xFFFFFF) }, // white
+      offset: { value: 33 },
+      exponent: { value: 0.6 }
+    };
+    var skyGeo = new THREE.SphereGeometry(5000, 32, 15);
+    var skyMat = new THREE.ShaderMaterial({
+      vertexShader, fragmentShader, uniforms: skyUniforms, side: THREE.BackSide
+    });
+    var sky = new THREE.Mesh(skyGeo, skyMat);
+    scene.add(sky);
+    // GENERATE GROUND (simple plane)
+    var groundGeo = new THREE.PlaneGeometry(10000, 10000, 10, 10);
+    var groundMat = new THREE.MeshLambertMaterial({ color: 0x32CD32 }); // lime green
+    var ground = new THREE.Mesh(groundGeo, groundMat);
+    ground.rotation.x = -Math.PI / 2;
+    scene.add(ground);
+    // GENERATE AIRPLANE (simple mesh)
+    var planeGeo = new THREE.Group();
+    var fuselageGeo = new THREE.CylinderGeometry(1, 2, 10, 20);
+    var fuselageMat = new THREE.MeshLambertMaterial({ color: 0xFFFFFF }); // white
+    var fuselage = new THREE.Mesh(fuselageGeo, fuselageMat);
+    planeGeo.add(fuselage);
+    var wingGeo = new THREE.BoxGeometry(10, 1, 1);
+    var wingMat = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); // red
+    var leftWing = new THREE.Mesh(wingGeo, wingMat);
+    leftWing.position.x = -5;
+    planeGeo.add(leftWing);
+    var rightWing = new THREE.Mesh(wingGeo, wingMat);
+    rightWing.position.x = 5;
+    planeGeo.add(rightWing);
+    var tailGeo = new THREE.ConeGeometry(1, 2, 10);
+    var tailMat = new THREE.MeshLambertMaterial({ color: 0x0000FF }); // blue
+    var tail = new THREE.Mesh(tailGeo, tailMat);
+    tail.position.z = -5;
+    planeGeo.add(tail);
+    scene.add(planeGeo);
+    var plane = planeGeo; // we'll move this
+    // ADD LIGHTING
+    var sun = new THREE.DirectionalLight(0xFFFFFF, 1);
+    sun.position.set(100, 100, 100);
+    scene.add(sun);
+    var ambient = new THREE.AmbientLight(0x444444);
+    scene.add(ambient);
+    // CAMERA ATTACH TO PLANE
+    plane.add(camera);
+    camera.position.set(0, 5, -15); // behind the cockpit
+    camera.lookAt(plane.position);
+    // USER INPUT (keyboard)
+    var keys = {
+      w: false, s: false, a: false, d: false,
+      q: false, e: false, r: false, f: false
+    };
+    document.addEventListener('keydown', (e) => {
+      if (e.key in keys) keys[e.key] = true;
+    });
+    document.addEventListener('keyup', (e) => {
+      if (e.key in keys) keys[e.key] = false;
     });
+    // MAIN LOOP
+    var velocity = new THREE.Vector3();
+    var direction = new THREE.Vector3();
+    var roll = 0, pitch = 0, altitude = 0, speed = 0;
+    function animate() {
+      requestAnimationFrame(animate);
+      // PLANE CONTROLS
+      if (keys.w) speed = Math.min(maxSpeed, speed + 0.01);
+      if (keys.s) speed = Math.max(0, speed - 0.01);
+      if (keys.a) roll -= planeRollSpeed;
+      if (keys.d) roll += planeRollSpeed;
+      if (keys.q) pitch -= planePitchSpeed;
+      if (keys.e) pitch += planePitchSpeed;
+      if (keys.r) { /* reset */ roll = pitch = 0; speed = 1; }
+      if (keys.f) { /* full throttle */ speed = maxSpeed; }
+      // PHYSICS SIM (very basic)
+      plane.rotation.z = roll;
+      plane.rotation.x = pitch;
+      direction.set(0, 0, -1).applyEuler(plane.rotation);
+      velocity.add(direction.multiplyScalar(speed * planeSpeed));
+      plane.position.add(velocity);
+      altitude = plane.position.y;
+      if (altitude < 0) {
+        plane.position.y = 0; // don't go underground
+        velocity.y = 0;
+      }
+      if (altitude > maxAltitude) {
+        plane.position.y = maxAltitude; // don't go too high
+        velocity.y = 0;
+      }
+      velocity.multiplyScalar(0.99); // friction
+      // CAMERA FOLLOW
+      camera.lookAt(plane.position);
+      // RENDER
+      renderer.render(scene, camera);
+    }
+    animate();
+  </script>
 </body>
 </html>