Spaces:

akhaliq
/

cargames

Running

App Files Files Community

akhaliq HF Staff commited on Apr 6

Commit

638c90a

verified ·

1 Parent(s): 0fc05fc

Update index.html

Browse files

Files changed (1) hide show

index.html +165 -19

index.html CHANGED Viewed

@@ -1,19 +1,165 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</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
+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>