Spaces:

humphuk
/

3d-cycling

Running

App Files Files Community

humphuk commited on Mar 31, 2025

Commit

b298fd7

verified ·

1 Parent(s): 9a8699c

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +936 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: 3d Cycling
-emoji: 🌍
-colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: 3d-cycling
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,936 @@
-<!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 Cycling Adventure</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+            background-color: #333;
+            color: white;
+        }
+        #container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        #ui {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 100;
+        }
+        #speedometer {
+            position: absolute;
+            bottom: 30px;
+            right: 30px;
+            width: 150px;
+            height: 150px;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 50%;
+            border: 3px solid #fff;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        #speed {
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        #speed-label {
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        #distance {
+            position: absolute;
+            top: 30px;
+            left: 30px;
+            font-size: 24px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px 20px;
+            border-radius: 5px;
+        }
+        #controls {
+            position: absolute;
+            bottom: 30px;
+            left: 30px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 15px;
+            border-radius: 5px;
+            pointer-events: all;
+        }
+        #controls h3 {
+            margin-top: 0;
+            margin-bottom: 10px;
+        }
+        button {
+            background: #4CAF50;
+            border: none;
+            color: white;
+            padding: 8px 15px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 14px;
+            margin: 4px 2px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        button:hover {
+            background: #45a049;
+        }
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 200;
+        }
+        #start-screen h1 {
+            font-size: 48px;
+            color: #4CAF50;
+            margin-bottom: 30px;
+            text-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
+        }
+        #start-button {
+            padding: 15px 40px;
+            font-size: 20px;
+            background: #4CAF50;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        #start-button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px rgba(76, 175, 80, 0.7);
+        }
+        #terrain-info {
+            position: absolute;
+            top: 30px;
+            right: 30px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px 20px;
+            border-radius: 5px;
+        }
+        #gear {
+            position: absolute;
+            bottom: 190px;
+            right: 30px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 8px 15px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+    <div id="ui">
+        <div id="distance">Distance: 0 m</div>
+        <div id="terrain-info">Terrain: Flat</div>
+        <div id="gear">Gear: 3</div>
+        <div id="speedometer">
+            <div id="speed">0</div>
+            <div id="speed-label">KM/H</div>
+        </div>
+        <div id="controls">
+            <h3>Controls</h3>
+            <p>W: Pedal Faster</p>
+            <p>A/D: Steer Left/Right</p>
+            <p>S: Brake</p>
+            <p>Space: Jump</p>
+            <p>Q/E: Gear Down/Up</p>
+            <button id="reset-btn">Reset</button>
+        </div>
+    </div>
+    <div id="start-screen">
+        <h1>3D CYCLING ADVENTURE</h1>
+        <button id="start-button">START RIDE</button>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script>
+    <script>
+        // Game variables
+        let scene, camera, renderer, bike, terrain, road, controls;
+        let speed = 0;
+        let maxSpeed = 40;
+        let acceleration = 0.05;
+        let deceleration = 0.1;
+        let brakePower = 0.2;
+        let distance = 0;
+        let upDownSpeed = 0;
+        let jumpPower = 15;
+        let isJumping = false;
+        let isOnGround = true;
+        let gameStarted = false;
+        let currentGear = 3;
+        let terrainType = 'flat';
+        let keyState = {};
+        let clock = new THREE.Clock();
+        let roadPath = [];
+        let roadWidth = 3;
+        // Initialize the game
+        function init() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB); // Sky blue
+            // Setup camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
+            camera.position.set(0, 2, -5);
+            camera.lookAt(0, 2, 0);
+            // Setup renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('container').appendChild(renderer.domElement);
+            // Add lights
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(1, 1, 1);
+            scene.add(directionalLight);
+            // Create terrain
+            createTerrain();
+            // Create road
+            createRoad();
+            // Create simple bike placeholder
+            createBike();
+            // Add event listeners
+            window.addEventListener('resize', onWindowResize);
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            // Start button
+            document.getElementById('start-button').addEventListener('click', startGame);
+            document.getElementById('reset-btn').addEventListener('click', resetGame);
+            // Start animation loop
+            animate();
+        }
+        function createTerrain() {
+            // Create a large ground plane
+            const groundGeometry = new THREE.PlaneGeometry(10000, 10000, 50, 50);
+            // Modify vertices to create hills and valleys
+            const vertices = groundGeometry.attributes.position;
+            for (let i = 0; i < vertices.count; i++) {
+                const x = vertices.getX(i);
+                const z = vertices.getZ(i);
+                // Create interesting terrain with sine and cosine waves
+                let y = Math.sin(x * 0.02) * 5 +
+                        Math.cos(z * 0.03) * 3 +
+                        Math.sin(x * 0.005 + z * 0.005) * 10;
+                // Flatten the area where the bike starts
+                if (Math.abs(x) < 100 && Math.abs(z) < 100) {
+                    y = 0;
+                }
+                vertices.setY(i, y);
+            }
+            groundGeometry.computeVertexNormals();
+            // Create different materials for different terrains
+            const grassTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/grass/grass.png');
+            grassTexture.wrapS = grassTexture.wrapT = THREE.RepeatWrapping;
+            grassTexture.repeat.set(50, 50);
+            const groundMaterial = new THREE.MeshStandardMaterial({
+                map: grassTexture,
+                side: THREE.DoubleSide
+            });
+            terrain = new THREE.Mesh(groundGeometry, groundMaterial);
+            terrain.rotation.x = -Math.PI / 2;
+            terrain.receiveShadow = true;
+            scene.add(terrain);
+            // Add some trees and obstacles
+            createObstacles();
+            // Add skybox
+            const skyboxGeometry = new THREE.BoxGeometry(5000, 5000, 5000);
+            const skyboxMaterial = new THREE.MeshBasicMaterial({
+                color: 0x87CEEB,
+                side: THREE.BackSide
+            });
+            const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
+            scene.add(skybox);
+        }
+        function createRoad() {
+            // Generate a path for the road that winds through the terrain
+            generateRoadPath();
+            // Create road geometry
+            const roadGeometry = new THREE.BufferGeometry();
+            const vertices = [];
+            const normals = [];
+            const uv = [];
+            // Road resolution (how many segments)
+            const segments = roadPath.length * 2;
+            // Create road by extruding along the path
+            for (let i = 0; i < roadPath.length - 1; i++) {
+                const p1 = roadPath[i];
+                const p2 = roadPath[i + 1];
+                // Calculate perpendicular vector
+                const dir = new THREE.Vector3(
+                    p2.x - p1.x,
+                    0,
+                    p2.z - p1.z
+                ).normalize();
+                // Get perpendicular vector
+                const perp = new THREE.Vector3(-dir.z, 0, dir.x);
+                // Get road height from terrain
+                const h1 = getTerrainHeight(p1.x, p1.z) + 0.05;
+                const h2 = getTerrainHeight(p2.x, p2.z) + 0.05;
+                // Create vertices for left and right edges
+                const v1 = new THREE.Vector3(
+                    p1.x - perp.x * roadWidth/2,
+                    h1,
+                    p1.z - perp.z * roadWidth/2
+                );
+                const v2 = new THREE.Vector3(
+                    p1.x + perp.x * roadWidth/2,
+                    h1,
+                    p1.z + perp.z * roadWidth/2
+                );
+                const v3 = new THREE.Vector3(
+                    p2.x - perp.x * roadWidth/2,
+                    h2,
+                    p2.z - perp.z * roadWidth/2
+                );
+                const v4 = new THREE.Vector3(
+                    p2.x + perp.x * roadWidth/2,
+                    h2,
+                    p2.z + perp.z * roadWidth/2
+                );
+                // Add vertices for two triangles per segment
+                // Triangle 1
+                vertices.push(v1.x, v1.y, v1.z);
+                vertices.push(v2.x, v2.y, v2.z);
+                vertices.push(v3.x, v3.y, v3.z);
+                // Triangle 2
+                vertices.push(v2.x, v2.y, v2.z);
+                vertices.push(v4.x, v4.y, v4.z);
+                vertices.push(v3.x, v3.y, v3.z);
+                // Add normals (pointing up)
+                for (let j = 0; j < 6; j++) {
+                    normals.push(0, 1, 0);
+                }
+                // Add UV coordinates for texture mapping
+                uv.push(0, 0);
+                uv.push(1, 0);
+                uv.push(0, 1);
+                uv.push(1, 0);
+                uv.push(1, 1);
+                uv.push(0, 1);
+            }
+            // Set geometry attributes
+            roadGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+            roadGeometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+            roadGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
+            // Road material
+            const roadTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/terrain/asphalt.jpg');
+            roadTexture.wrapS = roadTexture.wrapT = THREE.RepeatWrapping;
+            roadTexture.repeat.set(roadPath.length / 10, 1);
+            const roadMaterial = new THREE.MeshStandardMaterial({
+                map: roadTexture,
+                roughness: 0.8,
+                metalness: 0.2
+            });
+            road = new THREE.Mesh(roadGeometry, roadMaterial);
+            scene.add(road);
+            // Add white road markings
+            createRoadMarkings();
+        }
+        function generateRoadPath() {
+            // Create a winding road that follows terrain contours
+            const startPoint = new THREE.Vector3(0, 0, 0);
+            roadPath.push(startPoint);
+            // Generate random waypoints
+            const segments = 100;
+            let currentAngle = 0;
+            for (let i = 0; i < segments; i++) {
+                // Random angle change to make the road wind
+                currentAngle += (Math.random() - 0.5) * 0.5;
+                // Calculate next point
+                const distance = 20 + Math.random() * 10;
+                const lastPoint = roadPath[roadPath.length - 1];
+                const newPoint = new THREE.Vector3(
+                    lastPoint.x + Math.sin(currentAngle) * distance,
+                    0,
+                    lastPoint.z + Math.cos(currentAngle) * distance
+                );
+                // Adjust y position to terrain
+                newPoint.y = getTerrainHeight(newPoint.x, newPoint.z);
+                roadPath.push(newPoint);
+            }
+            // Smooth the path
+            smoothRoadPath();
+        }
+        function smoothRoadPath() {
+            // Apply simple smoothing to the road path
+            const smoothedPath = [];
+            for (let i = 0; i < roadPath.length; i++) {
+                if (i === 0 || i === roadPath.length - 1) {
+                    smoothedPath.push(roadPath[i].clone());
+                    continue;
+                }
+                // Average with previous and next points
+                const avgX = (roadPath[i-1].x + roadPath[i].x + roadPath[i+1].x) / 3;
+                const avgZ = (roadPath[i-1].z + roadPath[i].z + roadPath[i+1].z) / 3;
+                const avgY = getTerrainHeight(avgX, avgZ);
+                smoothedPath.push(new THREE.Vector3(avgX, avgY, avgZ));
+            }
+            roadPath = smoothedPath;
+        }
+        function createRoadMarkings() {
+            const centerLineGeometry = new THREE.BufferGeometry();
+            const centerVertices = [];
+            for (let i = 1; i < roadPath.length; i++) {
+                const p1 = roadPath[i-1];
+                const p2 = roadPath[i];
+                // Midpoint between p1 and p2
+                const mid = new THREE.Vector3(
+                    (p1.x + p2.x) / 2,
+                    (p1.y + p2.y) / 2 + 0.01, // Slightly above road
+                    (p1.z + p2.z) / 2
+                );
+                // Direction between points
+                const dir = new THREE.Vector3(
+                    p2.x - p1.x,
+                    0,
+                    p2.z - p1.z
+                ).normalize();
+                // Perpendicular vector
+                const perp = new THREE.Vector3(-dir.z, 0, dir.x);
+                // Create a small line segment
+                const lineLength = 2;
+                const gapLength = 3;
+                // Total segment length
+                const segLength = p1.distanceTo(p2);
+                const segments = Math.floor(segLength / (lineLength + gapLength));
+                for (let j = 0; j < segments; j++) {
+                    const startPos = j / segments;
+                    const endPos = (j + lineLength/(lineLength+gapLength)) / segments;
+                    const start = new THREE.Vector3().lerpVectors(p1, p2, startPos);
+                    const end = new THREE.Vector3().lerpVectors(p1, p2, endPos);
+                    start.y = getTerrainHeight(start.x, start.z) + 0.01;
+                    end.y = getTerrainHeight(end.x, end.z) + 0.01;
+                    centerVertices.push(start.x, start.y, start.z);
+                    centerVertices.push(end.x, end.y, end.z);
+                }
+            }
+            centerLineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(centerVertices, 3));
+            const centerLineMaterial = new THREE.LineBasicMaterial({
+                color: 0xffffff,
+                linewidth: 3
+            });
+            const centerLine = new THREE.LineSegments(centerLineGeometry, centerLineMaterial);
+            scene.add(centerLine);
+        }
+        function createBike() {
+            // Create a simple bike with a frame and wheels
+            const bikeGroup = new THREE.Group();
+            // Frame
+            const frameGeometry = new THREE.BoxGeometry(2, 0.5, 0.8);
+            const frameMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
+            const frame = new THREE.Mesh(frameGeometry, frameMaterial);
+            frame.position.y = 0.7;
+            bikeGroup.add(frame);
+            // Handlebar
+            const handlebarGeometry = new THREE.BoxGeometry(0.3, 0.05, 1);
+            const handlebarMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
+            const handlebar = new THREE.Mesh(handlebarGeometry, handlebarMaterial);
+            handlebar.position.set(0, 1.2, 0.3);
+            bikeGroup.add(handlebar);
+            // Front wheel
+            const wheelGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.1, 32);
+            const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 });
+            const frontWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+            frontWheel.position.set(0, 0.4, 0.8);
+            frontWheel.rotation.z = Math.PI / 2;
+            bikeGroup.add(frontWheel);
+            // Rear wheel
+            const rearWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+            rearWheel.position.set(0, 0.4, -0.8);
+            rearWheel.rotation.z = Math.PI / 2;
+            bikeGroup.add(rearWheel);
+            // Rider (simple representation)
+            const headGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+            const headMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
+            const head = new THREE.Mesh(headGeometry, headMaterial);
+            head.position.set(0, 1.5, 0);
+            bikeGroup.add(head);
+            bikeGroup.position.y = 1;
+            bike = bikeGroup;
+            scene.add(bike);
+        }
+        function createObstacles() {
+            // Add some trees outside the road
+            for (let i = 0; i < 100; i++) {
+                const angle = Math.random() * Math.PI * 2;
+                const radius = 50 + Math.random() * 2950;
+                const x = Math.cos(angle) * radius;
+                const z = Math.sin(angle) * radius;
+                // Skip if too close to road
+                let nearRoad = false;
+                for (let j = 0; j < roadPath.length; j++) {
+                    const p = roadPath[j];
+                    if (Math.sqrt((x - p.x) * (x - p.x) + (z - p.z) * (z - p.z)) < 10) {
+                        nearRoad = true;
+                        break;
+                    }
+                }
+                if (nearRoad) continue;
+                const y = getTerrainHeight(x, z);
+                if (y > 2 || y < -2) continue; // Don't place trees on steep slopes
+                const treeHeight = 5 + Math.random() * 10;
+                // Trunk
+                const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.4, treeHeight, 8);
+                const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
+                const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
+                trunk.position.set(x, y + treeHeight/2, z);
+                scene.add(trunk);
+                // Leaves
+                const leavesGeometry = new THREE.SphereGeometry(treeHeight/3, 8, 8);
+                const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
+                const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
+                leaves.position.set(x, y + treeHeight, z);
+                scene.add(leaves);
+            }
+            // Add some roadside objects (cones, signs, etc.)
+            for (let i = 0; i < 50; i++) {
+                // Pick a random point along the road
+                const segIdx = Math.floor(Math.random() * (roadPath.length - 1));
+                const p1 = roadPath[segIdx];
+                const p2 = roadPath[segIdx + 1];
+                // Get direction vector
+                const dir = new THREE.Vector3(
+                    p2.x - p1.x,
+                    0,
+                    p2.z - p1.z
+                ).normalize();
+                // Get perpendicular vector
+                const perp = new THREE.Vector3(-dir.z, 0, dir.x);
+                // Place obstacle slightly off the road
+                const t = Math.random();
+                const alongRoad = new THREE.Vector3().lerpVectors(p1, p2, t);
+                const offset = 1.5 + Math.random() * 3; // Random offset from road edge
+                const position = new THREE.Vector3(
+                    alongRoad.x + perp.x * (roadWidth/2 + offset),
+                    getTerrainHeight(alongRoad.x, alongRoad.z) + 0.1,
+                    alongRoad.z + perp.z * (roadWidth/2 + offset)
+                );
+                // Create cone
+                const coneGeometry = new THREE.ConeGeometry(0.3, 1, 8);
+                const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xFFA500 });
+                const cone = new THREE.Mesh(coneGeometry, coneMaterial);
+                cone.position.copy(position);
+                scene.add(cone);
+            }
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function onKeyDown(event) {
+            keyState[event.key.toLowerCase()] = true;
+            // Space for jump
+            if (event.key === ' ' && isOnGround && !isJumping && gameStarted) {
+                isJumping = true;
+                isOnGround = false;
+                upDownSpeed = jumpPower;
+            }
+        }
+        function onKeyUp(event) {
+            keyState[event.key.toLowerCase()] = false;
+        }
+        function startGame() {
+            document.getElementById('start-screen').style.display = 'none';
+            gameStarted = true;
+        }
+        function resetGame() {
+            speed = 0;
+            distance = 0;
+            currentGear = 3;
+            bike.position.set(0, 1, 0);
+            bike.rotation.y = 0;
+            camera.position.set(0, 2, -5);
+            camera.lookAt(0, 2, 0);
+            updateUI();
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            if (gameStarted) {
+                // Physics and controls
+                handleControls(delta);
+                // Update bike position and rotation
+                updateBike(delta);
+                // Update camera to follow the bike
+                updateCamera();
+                // Check terrain under bike
+                checkTerrain();
+                // Update distance
+                distance += speed * delta;
+                updateUI();
+            }
+            renderer.render(scene, camera);
+        }
+        function handleControls(delta) {
+            // Change gears
+            if (keyState['q'] && currentGear > 1) {
+                currentGear--;
+                updateUI();
+            }
+            if (keyState['e'] && currentGear < 7) {
+                currentGear++;
+                updateUI();
+            }
+            // Calculate gear multiplier
+            const gearMultiplier = 0.5 + currentGear * 0.2;
+            // Acceleration
+            if (keyState['w']) {
+                speed += acceleration * gearMultiplier * delta * 60;
+                if (speed > maxSpeed) speed = maxSpeed;
+            }
+            // Braking
+            if (keyState['s']) {
+                speed -= brakePower * delta * 60;
+                if (speed < 0) speed = 0;
+            }
+            // Natural deceleration
+            if (speed > 0 && !keyState['w']) {
+                speed -= deceleration * delta * 60;
+                if (speed < 0) speed = 0;
+            }
+            // Steering
+            if (keyState['a']) {
+                bike.rotation.y += 0.03 * (1 - speed / maxSpeed) * delta * 60;
+            }
+            if (keyState['d']) {
+                bike.rotation.y -= 0.03 * (1 - speed / maxSpeed) * delta * 60;
+            }
+            // Apply gravity
+            if (!isOnGround) {
+                upDownSpeed -= 9.8 * delta;
+                bike.position.y += upDownSpeed * delta;
+                // Check if bike hits the ground
+                const terrainHeight = getTerrainHeight(bike.position.x, bike.position.z);
+                if (bike.position.y - 0.5 < terrainHeight) {
+                    bike.position.y = terrainHeight + 0.5;
+                    isOnGround = true;
+                    isJumping = false;
+                    upDownSpeed = 0;
+                }
+            }
+        }
+        function updateBike(delta) {
+            // Move bike forward based on speed
+            if (speed > 0) {
+                const direction = new THREE.Vector3(
+                    Math.sin(bike.rotation.y),
+                    0,
+                    Math.cos(bike.rotation.y)
+                ).normalize();
+                bike.position.add(direction.multiplyScalar(speed * delta));
+            }
+            // Keep bike on terrain
+            const terrainHeight = getTerrainHeight(bike.position.x, bike.position.z);
+            if (isOnGround && !isJumping) {
+                bike.position.y = terrainHeight + 0.5;
+            }
+            // Rotate wheels when moving
+            const wheels = bike.children.filter(child => child.geometry instanceof THREE.CylinderGeometry);
+            wheels.forEach(wheel => {
+                wheel.rotation.x -= speed * delta * 0.1;
+            });
+        }
+        function updateCamera() {
+            // Third-person camera that follows the bike
+            const targetPosition = new THREE.Vector3(
+                bike.position.x - Math.sin(bike.rotation.y) * 5,
+                bike.position.y + 2,
+                bike.position.z - Math.cos(bike.rotation.y) * 5
+            );
+            // Smooth camera movement
+            camera.position.lerp(targetPosition, 0.1);
+            camera.lookAt(bike.position.x, bike.position.y + 1, bike.position.z);
+        }
+        function checkTerrain() {
+            const terrainHeight = getTerrainHeight(bike.position.x, bike.position.z);
+            // Check if bike is on the ground
+            if (bike.position.y - 0.5 <= terrainHeight && !isJumping) {
+                bike.position.y = terrainHeight + 0.5;
+                isOnGround = true;
+            } else {
+                isOnGround = false;
+            }
+            // Check if bike is on the road
+            let onRoad = false;
+            for (let i = 0; i < roadPath.length; i++) {
+                const p = roadPath[i];
+                const dist = Math.sqrt((bike.position.x - p.x) * (bike.position.x - p.x) +
+                                      (bike.position.z - p.z) * (bike.position.z - p.z));
+                if (dist < roadWidth/2) {
+                    onRoad = true;
+                    break;
+                }
+            }
+            // Determine terrain type
+            const gradient = getTerrainGradient(bike.position.x, bike.position.z);
+            const slopeAngle = Math.atan(Math.sqrt(gradient.x * gradient.x + gradient.z * gradient.z)) * (180 / Math.PI);
+            if (onRoad) {
+                terrainType = 'road';
+                maxSpeed = 40;
+            } else if (slopeAngle > 20) {
+                terrainType = 'steep climb';
+                maxSpeed = 15;
+            } else if (slopeAngle > 10) {
+                terrainType = 'uphill';
+                maxSpeed = 25;
+            } else if (slopeAngle < -10) {
+                terrainType = 'downhill';
+                maxSpeed = 60;
+            } else {
+                terrainType = 'flat';
+                maxSpeed = 40;
+            }
+            // Apply terrain effects to speed
+            if (terrainType === 'uphill' || terrainType === 'steep climb') {
+                if (!keyState['w']) {
+                    speed -= 0.05 * slopeAngle * 0.1;
+                }
+            } else if (terrainType === 'downhill') {
+                speed += 0.05 * -slopeAngle * 0.1;
+            } else if (!onRoad) {
+                // Off-road penalty
+                speed *= 0.95;
+            }
+            // Update UI for terrain
+            if (onRoad) {
+                document.getElementById('terrain-info').textContent = 'Terrain: Road';
+            } else {
+                document.getElementById('terrain-info').textContent = `Terrain: ${terrainType}`;
+            }
+        }
+        function getTerrainHeight(x, z) {
+            // Check road first since it's slightly above terrain
+            // Get closest point on road
+            let closestRoadPoint = null;
+            let closestRoadDist = Infinity;
+            for (let i = 0; i < roadPath.length; i++) {
+                const p = roadPath[i];
+                const dist = Math.sqrt((x - p.x) * (x - p.x) + (z - p.z) * (z - p.z));
+                if (dist < closestRoadDist) {
+                    closestRoadDist = dist;
+                    closestRoadPoint = p;
+                }
+            }
+            // If point is within road width, use road height
+            if (closestRoadDist < roadWidth/2) {
+                return closestRoadPoint.y + 0.05; // Road is slightly above terrain
+            }
+            // Otherwise check terrain height
+            const terrainGeometry = terrain.geometry;
+            const vertices = terrainGeometry.attributes.position;
+            let closestVertex = 0;
+            let closestDistance = Infinity;
+            for (let i = 0; i < vertices.count; i++) {
+                const vx = vertices.getX(i);
+                const vz = vertices.getZ(i);
+                const distance = Math.sqrt((vx - x) * (vx - x) + (vz - z) * (vz - z));
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestVertex = i;
+                }
+            }
+            return vertices.getY(closestVertex);
+        }
+        function getTerrainGradient(x, z) {
+            const delta = 0.5;
+            const height = getTerrainHeight(x, z);
+            const heightX = getTerrainHeight(x + delta, z);
+            const heightZ = getTerrainHeight(x, z + delta);
+            return {
+                x: (heightX - height) / delta,
+                z: (heightZ - height) / delta
+            };
+        }
+        function updateUI() {
+            document.getElementById('speed').textContent = Math.round(speed * 3.6); // Convert m/s to km/h
+            document.getElementById('distance').textContent = `Distance: ${Math.round(distance)} m`;
+            document.getElementById('gear').textContent = `Gear: ${currentGear}`;
+        }
+        // Initialize the game when the page loads
+        window.onload = init;
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>