Hugging Face's logo

Spaces:
akhaliq
/
cars
Running

App Files Community
akhaliq HF Staff commited on
Commit
a679c46
·
verified ·
1 Parent(s): 1bb18ed

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +318 -19
index.html CHANGED
@@ -1,19 +1,318 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D Car Simulator</title>
7
+ <style>
8
+ body { margin: 0; overflow: hidden; }
9
+ canvas { display: block; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
15
+ <script>
16
+ // Scene setup
17
+ const scene = new THREE.Scene();
18
+ scene.background = new THREE.Color(0x87CEEB);
19
+
20
+ // Camera
21
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
22
+ camera.position.set(0, 10, 20);
23
+
24
+ // Renderer
25
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
26
+ renderer.setSize(window.innerWidth, window.innerHeight);
27
+ renderer.shadowMap.enabled = true;
28
+ document.body.appendChild(renderer.domElement);
29
+
30
+ // Controls
31
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
32
+ controls.enableDamping = true;
33
+ controls.dampingFactor = 0.05;
34
+
35
+ // Lighting
36
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
37
+ scene.add(ambientLight);
38
+
39
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
40
+ directionalLight.position.set(50, 100, 50);
41
+ directionalLight.castShadow = true;
42
+ directionalLight.shadow.mapSize.width = 2048;
43
+ directionalLight.shadow.mapSize.height = 2048;
44
+ scene.add(directionalLight);
45
+
46
+ // Ground
47
+ const groundGeometry = new THREE.PlaneGeometry(500, 500);
48
+ const groundMaterial = new THREE.MeshStandardMaterial({
49
+ color: 0x4CAF50,
50
+ roughness: 0.8
51
+ });
52
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
53
+ ground.rotation.x = -Math.PI / 2;
54
+ ground.receiveShadow = true;
55
+ scene.add(ground);
56
+
57
+ // Road
58
+ const roadGeometry = new THREE.PlaneGeometry(15, 500);
59
+ const roadMaterial = new THREE.MeshStandardMaterial({
60
+ color: 0x333333,
61
+ roughness: 0.9
62
+ });
63
+ const road = new THREE.Mesh(roadGeometry, roadMaterial);
64
+ road.rotation.x = -Math.PI / 2;
65
+ road.position.y = 0.01;
66
+ road.receiveShadow = true;
67
+ scene.add(road);
68
+
69
+ // Car
70
+ const carGroup = new THREE.Group();
71
+ scene.add(carGroup);
72
+
73
+ const carBodyGeometry = new THREE.BoxGeometry(5, 1, 2);
74
+ const carBodyMaterial = new THREE.MeshStandardMaterial({ color: 0xFF5722 });
75
+ const carBody = new THREE.Mesh(carBodyGeometry, carBodyMaterial);
76
+ carBody.position.y = 1;
77
+ carBody.castShadow = true;
78
+ carGroup.add(carBody);
79
+
80
+ const carTopGeometry = new THREE.BoxGeometry(3, 1, 2);
81
+ const carTopMaterial = new THREE.MeshStandardMaterial({ color: 0xE91E63 });
82
+ const carTop = new THREE.Mesh(carTopGeometry, carTopMaterial);
83
+ carTop.position.y = 2;
84
+ carTop.castShadow = true;
85
+ carGroup.add(carTop);
86
+
87
+ function addWheel(x, z) {
88
+ const wheelGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.4, 32);
89
+ const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x212121 });
90
+ const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
91
+ wheel.rotation.z = Math.PI / 2;
92
+ wheel.position.set(x, 0.5, z);
93
+ wheel.castShadow = true;
94
+ carGroup.add(wheel);
95
+ }
96
+
97
+ addWheel(-2, -1);
98
+ addWheel(-2, 1);
99
+ addWheel(2, -1);
100
+ addWheel(2, 1);
101
+
102
+ // Mountains
103
+ function createMountain() {
104
+ const mountainGroup = new THREE.Group();
105
+ const height = 10 + Math.random() * 20;
106
+ const width = 20 + Math.random() * 30;
107
+ const depth = 20 + Math.random() * 30;
108
+
109
+ const mountainGeometry = new THREE.ConeGeometry(width, height, 32);
110
+ const mountainMaterial = new THREE.MeshStandardMaterial({ color: 0x795548 });
111
+ const mountain = new THREE.Mesh(mountainGeometry, mountainMaterial);
112
+ mountain.rotation.x = -Math.PI / 2;
113
+ mountain.position.y = height / 2;
114
+ mountain.castShadow = true;
115
+ mountainGroup.add(mountain);
116
+
117
+ const positionX = -250 + Math.random() * 500;
118
+ const positionZ = -250 + Math.random() * 500;
119
+ mountainGroup.position.set(positionX, 0, positionZ);
120
+
121
+ return mountainGroup;
122
+ }
123
+
124
+ for (let i = 0; i < 15; i++) {
125
+ scene.add(createMountain());
126
+ }
127
+
128
+ // Trees
129
+ function createTree() {
130
+ const treeGroup = new THREE.Group();
131
+
132
+ const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.5, 5);
133
+ const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x5D4037 });
134
+ const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
135
+ trunk.position.y = 2.5;
136
+ trunk.castShadow = true;
137
+ treeGroup.add(trunk);
138
+
139
+ const leavesGeometry = new THREE.ConeGeometry(2, 4, 8);
140
+ const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x2E7D32 });
141
+ const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
142
+ leaves.position.y = 6;
143
+ leaves.castShadow = true;
144
+ treeGroup.add(leaves);
145
+
146
+ const positionX = -200 + Math.random() * 400;
147
+ const positionZ = -200 + Math.random() * 400;
148
+ treeGroup.position.set(positionX, 0, positionZ);
149
+
150
+ return treeGroup;
151
+ }
152
+
153
+ for (let i = 0; i < 30; i++) {
154
+ scene.add(createTree());
155
+ }
156
+
157
+ // Clouds
158
+ function createCloud() {
159
+ const cloudGroup = new THREE.Group();
160
+
161
+ for (let i = 0; i < 3; i++) {
162
+ const cloudGeometry = new THREE.SphereGeometry(2.5 + Math.random() * 2, 16, 16);
163
+ const cloudMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
164
+ const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
165
+ cloud.position.set(
166
+ -3 + Math.random() * 6,
167
+ -2 + Math.random() * 4,
168
+ -3 + Math.random() * 6
169
+ );
170
+ cloud.castShadow = true;
171
+ cloudGroup.add(cloud);
172
+ }
173
+
174
+ const positionX = -200 + Math.random() * 400;
175
+ const positionZ = -200 + Math.random() * 400;
176
+ const positionY = 20 + Math.random() * 30;
177
+ cloudGroup.position.set(positionX, positionY, positionZ);
178
+
179
+ return cloudGroup;
180
+ }
181
+
182
+ for (let i = 0; i < 10; i++) {
183
+ scene.add(createCloud());
184
+ }
185
+
186
+ // Train
187
+ const trainGroup = new THREE.Group();
188
+ scene.add(trainGroup);
189
+
190
+ function createTrainCar() {
191
+ const carGroup = new THREE.Group();
192
+
193
+ const carGeometry = new THREE.BoxGeometry(5, 3, 8);
194
+ const carMaterial = new THREE.MeshStandardMaterial({ color: 0x2196F3 });
195
+ const car = new THREE.Mesh(carGeometry, carMaterial);
196
+ car.position.y = 1.5;
197
+ car.castShadow = true;
198
+ carGroup.add(car);
199
+
200
+ const wheelGeometry = new THREE.CylinderGeometry(0.8, 0.8, 1, 32);
201
+ const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x212121 });
202
+
203
+ const wheelFL = new THREE.Mesh(wheelGeometry, wheelMaterial);
204
+ wheelFL.rotation.z = Math.PI / 2;
205
+ wheelFL.position.set(-2.5, 0.8, 3);
206
+ wheelFL.castShadow = true;
207
+ carGroup.add(wheelFL);
208
+
209
+ const wheelFR = new THREE.Mesh(wheelGeometry, wheelMaterial);
210
+ wheelFR.rotation.z = Math.PI / 2;
211
+ wheelFR.position.set(2.5, 0.8, 3);
212
+ wheelFR.castShadow = true;
213
+ carGroup.add(wheelFR);
214
+
215
+ const wheelBL = new THREE.Mesh(wheelGeometry, wheelMaterial);
216
+ wheelBL.rotation.z = Math.PI / 2;
217
+ wheelBL.position.set(-2.5, 0.8, -3);
218
+ wheelBL.castShadow = true;
219
+ carGroup.add(wheelBL);
220
+
221
+ const wheelBR = new THREE.Mesh(wheelGeometry, wheelMaterial);
222
+ wheelBR.rotation.z = Math.PI / 2;
223
+ wheelBR.position.set(2.5, 0.8, -3);
224
+ wheelBR.castShadow = true;
225
+ carGroup.add(wheelBR);
226
+
227
+ return carGroup;
228
+ }
229
+
230
+ // Train tracks
231
+ const trackRadius = 100;
232
+ for (let i = 0; i < 64; i++) {
233
+ const angle = (i / 64) * Math.PI * 2;
234
+ const x = Math.cos(angle) * trackRadius;
235
+ const z = Math.sin(angle) * trackRadius;
236
+
237
+ const trackGeometry = new THREE.BoxGeometry(5, 0.2, 1);
238
+ const trackMaterial = new THREE.MeshStandardMaterial({ color: 0x212121 });
239
+ const track = new THREE.Mesh(trackGeometry, trackMaterial);
240
+ track.position.set(x, 0.02, z);
241
+ track.rotation.y = angle;
242
+ track.receiveShadow = true;
243
+ scene.add(track);
244
+
245
+ if (i % 8 === 0) {
246
+ const sleeperGeometry = new THREE.BoxGeometry(0.5, 0.5, 3);
247
+ const sleeperMaterial = new THREE.MeshStandardMaterial({ color: 0x795548 });
248
+ const sleeper = new THREE.Mesh(sleeperGeometry, sleeperMaterial);
249
+ sleeper.position.set(x, 0.02, z);
250
+ sleeper.receiveShadow = true;
251
+ scene.add(sleeper);
252
+ }
253
+ }
254
+
255
+ // Create train with multiple cars
256
+ for (let i = 0; i < 4; i++) {
257
+ const trainCar = createTrainCar();
258
+ trainCar.position.z = -i * 8;
259
+ trainGroup.add(trainCar);
260
+ }
261
+
262
+ // Move car forward with keyboard
263
+ const keys = {};
264
+ document.addEventListener('keydown', (e) => { keys[e.code] = true; });
265
+ document.addEventListener('keyup', (e) => { keys[e.code] = false; });
266
+
267
+ // Animation
268
+ let trainAngle = 0;
269
+
270
+ function animate() {
271
+ requestAnimationFrame(animate);
272
+
273
+ // Car movement
274
+ if (keys['ArrowUp']) {
275
+ carGroup.position.z -= 0.2;
276
+ }
277
+ if (keys['ArrowDown']) {
278
+ carGroup.position.z += 0.2;
279
+ }
280
+ if (keys['ArrowLeft']) {
281
+ carGroup.rotation.y += 0.05;
282
+ }
283
+ if (keys['ArrowRight']) {
284
+ carGroup.rotation.y -= 0.05;
285
+ }
286
+
287
+ // Train movement
288
+ trainAngle += 0.005;
289
+ trainGroup.position.x = Math.cos(trainAngle) * trackRadius;
290
+ trainGroup.position.z = Math.sin(trainAngle) * trackRadius;
291
+ trainGroup.rotation.y = -trainAngle + Math.PI / 2;
292
+
293
+ // Update camera to follow car
294
+ const carDirection = new THREE.Vector3();
295
+ carGroup.getWorldDirection(carDirection);
296
+ carDirection.multiplyScalar(-10);
297
+
298
+ const carPosition = carGroup.position.clone();
299
+ carPosition.y += 5;
300
+
301
+ camera.position.lerp(carPosition.clone().add(carDirection), 0.1);
302
+ camera.lookAt(carPosition);
303
+
304
+ controls.update();
305
+ renderer.render(scene, camera);
306
+ }
307
+
308
+ // Handle window resize
309
+ window.addEventListener('resize', () => {
310
+ camera.aspect = window.innerWidth / window.innerHeight;
311
+ camera.updateProjectionMatrix();
312
+ renderer.setSize(window.innerWidth, window.innerHeight);
313
+ });
314
+
315
+ animate();
316
+ </script>
317
+ </body>
318
+ </html>