Spaces:

akhaliq
/

cargames

Running

App Files Files Community

akhaliq HF Staff commited on Apr 6

Commit

8b6ea51

verified ·

1 Parent(s): b7f4ac5

Update index.html

Browse files

Files changed (1) hide show

index.html +183 -114

index.html CHANGED Viewed

@@ -1,141 +1,210 @@
 <!DOCTYPE html>
-<html>
 <head>
     <meta charset="UTF-8">
-    <title>Flight Sim by Three.js</title>
     <style>
-        body { margin: 0; background-color: #87CEEB; } /* Sky blue */
         canvas { display: block; }
     </style>
 </head>
 <body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script>
-// SET UP SCENE, CAMERA, RENDERER
-var scene = new THREE.Scene();
-var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
-var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
-// GENERATE SIMPLE TERRAIN (a big flat plane)
-var terrainGeo = new THREE.PlaneGeometry(1000, 1000, 100, 100); // 1km x 1km
-var terrainMat = new THREE.MeshLambertMaterial({color: 0x228B22}); // Forest green
-var terrain = new THREE.Mesh(terrainGeo, terrainMat);
-terrain.rotation.x = -Math.PI / 2; // Lay it flat
-terrain.position.y = -50; // Sink it a bit so plane starts "on ground"
-scene.add(terrain);
-// GENERATE SIMPLE AIRPLANE (just some colored cubes + lines, lol what a plane)
-var planeGeo = new THREE.BoxGeometry(10, 2, 5); // fuselage
-var planeMat = new THREE.MeshLambertMaterial({color: 0xFF9900}); // Orange
-var plane = new THREE.Mesh(planeGeo, planeMat);
-var wingGeo = new THREE.BoxGeometry(15, 0.5, 2);
-var wingMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); // White
-var leftWing = new THREE.Mesh(wingGeo, wingMat);
-leftWing.position.x = -7.5;
-leftWing.position.y = 1;
-plane.add(leftWing);
-var rightWing = leftWing.clone();
-rightWing.position.x *= -1;
-plane.add(rightWing);
-var tailGeo = new THREE.BoxGeometry(2, 4, 0.5);
-var tailMat = new THREE.MeshLambertMaterial({color: 0xFF0000}); // Red
-var tail = new THREE.Mesh(tailGeo, tailMat);
-tail.position.z = -5;
-tail.position.y = 2;
-plane.add(tail);
-var cockpitGeo = new THREE.SphereGeometry(1, 16, 16);
-var cockpitMat = new THREE.MeshLambertMaterial({color: 0x444444}); // Dark gray
-var cockpit = new THREE.Mesh(cockpitGeo, cockpitMat);
-cockpit.position.z = 4;
-plane.add(cockpit);
-scene.add(plane);
-// CAMERA RIG: attach camera to plane (like we're sitting in cockpit)
-camera.position.set(0, 2, -10); // behind & above cockpit
-plane.add(camera); // now cam moves with plane!
-// LIGHTING (simple sun + ambient so we can see stuff)
-var sunLight = new THREE.DirectionalLight(0xFFFFFF, 1);
-sunLight.position.set(100, 200, 50);
-scene.add(sunLight);
-var ambLight = new THREE.AmbientLight(0x444444);
-scene.add(ambLight);
-// PHYSICS VARIABLES & SETTINGS
-var planePos = new THREE.Vector3(0, 0, 0); // start at origin (middle of terrain)
-var planeVel = new THREE.Vector3(0, 0, 0); // not moving yet
-var planeRot = new THREE.Euler(); // for pitch, yaw, roll
-plane.rotation.setFromEuler(planeRot);
-var throttle = 0; // 0 to 1
-var pitchRate = 0; // -1 to 1 (up/down stick)
-var yawRate = 0; // -1 to 1 (left/right stick)
-var rollRate = 0; // -1 to 1 (ailerons)
-var maxSpeed = 50; // units per sec (pretty fast)
-var liftCoeff = 0.05; // magic number makes flying feel right
-var gravity = new THREE.Vector3(0, -9.8, 0);
-// CONTROLS (keyboard)
-var keyState = {};
-document.addEventListener('keydown', (k) => keyState[k.key] = true);
-document.addEventListener('keyup', (k) => keyState[k.key] = false);
-function getControlState() {
-    if (keyState['w'] || keyState['ArrowUp']) pitchRate = -0.5; else
-    if (keyState['s'] || keyState['ArrowDown']) pitchRate = 0.5; else
-    pitchRate = 0;
-    if (keyState['a'] || keyState['ArrowLeft']) yawRate = -0.5; else
-    if (keyState['d'] || keyState['ArrowRight']) yawRate = 0.5; else
-    yawRate = 0;
-    if (keyState['q']) rollRate = -0.5; else
-    if (keyState['e']) rollRate = 0.5; else
-    rollRate = 0;
-    if (keyState['Shift']) throttle = Math.min(throttle + 0.01, 1); else
-    if (keyState['Control']) throttle = Math.max(throttle - 0.01, 0);
 }
-// MAIN UPDATE LOOP
-function animate(t) {
     requestAnimationFrame(animate);
-    getControlState(); // read keyboard
-    // ROTATE PLANE (pitch, yaw from controls)
-    planeRot.x += pitchRate * 0.01; // integrate pitch
-    planeRot.y += yawRate * 0.01; // integrate yaw
-    planeRot.z += rollRate * 0.005; // a bit of roll (less intuitive)
-    plane.rotation.setFromEuler(planeRot);
-    // FORWARD VELOCITY (based on throttle & direction)
-    var forward = new THREE.Vector3(0, 0, 1);
-    forward.applyEuler(planeRot); // where are we pointing?
-    var desiredVel = forward.multiplyScalar(throttle * maxSpeed);
-    // LIFT FORCE (magic makes plane want to go up when moving fast)
-    var lift = forward.clone().multiplyScalar(liftCoeff * throttle * maxSpeed);
-    lift.y = Math.abs(lift.z); // up vector scales with forward speed
-    // SUM FORCES (thrust, lift, gravity)
-    var accel = desiredVel.clone().sub(planeVel).multiplyScalar(0.05); // gentle accel
-    accel.add(lift.multiplyScalar(0.01)); // tiny bit of lift helps
-    accel.add(gravity); // always pulled down
-    // INTEGRATE VELOCITY & POSITION
-    planeVel.add(accel);
-    planePos.add(planeVel.multiplyScalar(0.016)); // assume ~60fps = 0.016 s/step
-    // UPDATE PLANE POSITION
-    plane.position.copy(planePos);
-    // KEEP PLANE ABOVE TERRAIN (crude collision)
-    if (planePos.y < -45) { // hit ground?
-        planePos.y = -45; // stick to ground
-        planeVel.y = Math.max(planeVel.y, 0); // no bounce
-    }
     renderer.render(scene, camera);
 }
 animate();
 </script>
 </body>
 </html>

 <!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
+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);
+// SKY, SUN, AMBIENT LIGHT
+scene.background = new THREE.Color(0x87CEEB); // sky blue
+let sun = new THREE.DirectionalLight(0xffffff, 1);
+sun.position.set(10, 20, 10);
+scene.add(sun);
+let ambient = new THREE.AmbientLight(0x666666);
+scene.add(ambient);
+// CLOUDS (just a few big transparent billboards)
+function makeCloud(x, y, z) {
+    let geo = new THREE.PlaneGeometry(5, 2);
+    let mat = new THREE.MeshBasicMaterial({
+        map: new THREE.CanvasTexture(makeCloudCanvas()),
+        transparent: true,
+        depthWrite: false
+    });
+    let cloud = new THREE.Mesh(geo, mat);
+    cloud.position.set(x, y, z);
+    cloud.rotation.y = Math.random() * Math.PI * 2; // random rotation
+    scene.add(cloud);
+    // animate cloud floating
+    let phase = Math.random() * Math.PI * 2;
+    function animateCloud() {
+        requestAnimationFrame(animateCloud);
+        cloud.position.y = y + Math.sin(phase + Date.now() * 0.001) * 0.2;
+    }
+    animateCloud();
+}
+function makeCloudCanvas() {
+    let canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 128;
+    let ctx = canvas.getContext('2d');
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    for (let i = 0; i < 10; i++) {
+        ctx.arc(Math.random() * 256, Math.random() * 128, Math.random() * 20 + 10, 0, Math.PI * 2);
+    }
+    ctx.fill();
+    return canvas;
+}
+makeCloud(10, 8, -20);
+makeCloud(-15, 7, -10);
+makeCloud(5, 9, -30);
+// MOUNTAINS (simple low-poly)
+let mountainGeo = new THREE.BufferGeometry();
+let mountainVerts = new Float32Array([
+     0,  0,  0,   5,  0,  0,  10, 0, 0,
+     5,  5, -5,   5,  5, 5,   0, 0, 0,
+    10,  0,  0,  15,  0, 0,  10, 5,-5,
+    10,  5,-5,  15,  0, 0,  10, 0, 5
+]);
+mountainGeo.setAttribute('position', new THREE.BufferAttribute(mountainVerts, 3));
+let mountainMat = new THREE.MeshLambertMaterial({ color: 0x888888 });
+for (let i = 0; i < 5; i++) {
+    let m = new THREE.Mesh(mountainGeo, mountainMat);
+    m.position.x = -20 + i * 10;
+    m.position.z = -40;
+    m.scale.y = 2 + Math.random() * 2;
+    scene.add(m);
+}
+// ROAD (long thin box)
+let roadGeo = new THREE.BoxGeometry(1000, 0.1, 10);
+let roadMat = new THREE.MeshLambertMaterial({ color: 0x444444 });
+let road = new THREE.Mesh(roadGeo, roadMat);
+road.position.z = -50;
+scene.add(road);
+// dashed line in the middle of the road
+let lineGeo = new THREE.PlaneGeometry(1000, 0.2);
+let lineMat = new THREE.MeshBasicMaterial({ color: 'yellow' });
+let line = new THREE.Mesh(lineGeo, lineMat);
+line.position.z = -50;
+line.position.y = 0.11; // on top of road
+line.rotation.x = -Math.PI / 2;
+scene.add(line);
+// make dashes (ugly simple way)
+for (let d = -500; d < 500; d += 20) {
+    let dash = new THREE.Mesh(new THREE.PlaneGeometry(5, 0.2), lineMat);
+    dash.position.z = -50;
+    dash.position.x = d;
+    dash.position.y = 0.11;
+    dash.rotation.x = -Math.PI / 2;
+    scene.add(dash);
+}
+// TREES (green cylinders with sphere tops)
+function makeTree(x, z) {
+    let trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 2), new THREE.MeshLambertMaterial({ color: 0x663300 }));
+    trunk.position.y = 1;
+    trunk.position.x = x;
+    trunk.position.z = z;
+    let leaf = new THREE.Mesh(new THREE.SphereGeometry(1.5), new THREE.MeshLambertMaterial({ color: 0x00CC00 }));
+    leaf.position.y = 3.5;
+    leaf.position.x = x;
+    leaf.position.z = z;
+    scene.add(trunk);
+    scene.add(leaf);
+}
+// put trees along road sides
+for (let z = -40; z > -200; z -= 10) {
+    makeTree(-5, z);
+    makeTree(5, z);
+}
+// TRAIN (body is box, wheels circles, goes in circle)
+let trainBody = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 2), new THREE.MeshLambertMaterial({ color: 'red' }));
+trainBody.position.y = 1;
+let trainWheel1 = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 1), new THREE.MeshLambertMaterial({ color: 'black' }));
+trainWheel1.rotation.z = Math.PI / 2;
+trainWheel1.position.x = -1.5;
+trainWheel1.position.y = 0.5;
+let trainWheel2 = trainWheel1.clone();
+trainWheel2.position.x = 1.5;
+trainBody.add(trainWheel1);
+trainBody.add(trainWheel2);
+scene.add(trainBody);
+trainBody.position.x = 20;
+let trainAngle = 0;
+function animateTrain() {
+    requestAnimationFrame(animateTrain);
+    trainAngle += 0.01;
+    trainBody.position.x = 20 * Math.cos(trainAngle);
+    trainBody.position.z = 20 * Math.sin(trainAngle);
+    trainBody.rotation.y = trainAngle + Math.PI / 2;
+}
+animateTrain();
+// CAR (box body, sphere wheels, controllable)
+let carBody = new THREE.Mesh(new THREE.BoxGeometry(3, 1.5, 1.8), new THREE.MeshLambertMaterial({ color: 'blue' }));
+let carWheelGeo = new THREE.SphereGeometry(0.4);
+let carWheelFL = new THREE.Mesh(carWheelGeo, new THREE.MeshLambertMaterial({ color: 'black' }));
+carWheelFL.position.set(-1.2, -0.5, 0.8);
+let carWheelFR = carWheelFL.clone();
+carWheelFR.position.x = 1.2;
+let carWheelBL = carWheelFL.clone();
+carWheelBL.position.z = -0.8;
+let carWheelBR = carWheelFR.clone();
+carWheelBR.position.z = -0.8;
+carBody.add(carWheelFL);
+carBody.add(carWheelFR);
+carBody.add(carWheelBL);
+carBody.add(carWheelBR);
+scene.add(carBody);
+carBody.position.set(0, 0.8, 0); // start pos
+let carSpeed = 0;
+let carAngle = 0;
+let keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false,
+             KeyW: false, KeyS: false, KeyA: false, KeyD: false };
+document.addEventListener('keydown', e => {
+    if (e.code in keys) keys[e.code] = true;
+});
+document.addEventListener('keyup', e => {
+    if (e.code in keys) keys[e.code] = false;
+});
+function updateCar() {
+    if (keys.ArrowUp || keys.KeyW) carSpeed += 0.01;
+    if (keys.ArrowDown || keys.KeyS) carSpeed -= 0.01;
+    if (keys.ArrowLeft || keys.KeyA) carAngle -= 0.05;
+    if (keys.ArrowRight || keys.KeyD) carAngle += 0.05;
+    carSpeed *= 0.98; // friction
+    carBody.position.x += Math.sin(carAngle) * carSpeed;
+    carBody.position.z += Math.cos(carAngle) * carSpeed;
+    carBody.rotation.y = -carAngle;
+    // keep camera behind car
+    camera.position.x = carBody.position.x - Math.sin(carAngle) * 5;
+    camera.position.z = carBody.position.z - Math.cos(carAngle) * 5;
+    camera.position.y = 3;
+    camera.lookAt(carBody.position);
 }
+// MAIN LOOP
+function animate() {
     requestAnimationFrame(animate);
+    updateCar();
     renderer.render(scene, camera);
 }
 animate();
+// resize handling
+window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+});
 </script>
 </body>
 </html>