Hugging Face's logo

Spaces:
privateuserh
/
privmv
Running

App Files Community
privateuserh commited on
Commit
13115ef
·
verified ·
1 Parent(s): 73a84d5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +975 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privmv
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: privmv
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,975 @@
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>Space VRML 3D Viewer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
10
+ <style>
11
+ /* Custom styles for the toggle switch */
12
+ .toggle-checkbox:checked {
13
+ right: 0;
14
+ border-color: #68D391;
15
+ }
16
+ .toggle-checkbox:checked + .toggle-label {
17
+ background-color: #68D391;
18
+ }
19
+
20
+ /* Full screen canvas */
21
+ #renderCanvas {
22
+ position: fixed;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ z-index: 0;
28
+ }
29
+
30
+ /* Control panel */
31
+ .control-panel {
32
+ position: fixed;
33
+ bottom: 20px;
34
+ right: 20px;
35
+ z-index: 100;
36
+ background: rgba(255, 255, 255, 0.9);
37
+ padding: 15px;
38
+ border-radius: 10px;
39
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
40
+ width: 300px;
41
+ }
42
+
43
+ /* Loading animation */
44
+ .loader {
45
+ border: 5px solid #f3f3f3;
46
+ border-top: 5px solid #3498db;
47
+ border-radius: 50%;
48
+ width: 50px;
49
+ height: 50px;
50
+ animation: spin 2s linear infinite;
51
+ position: fixed;
52
+ top: 50%;
53
+ left: 50%;
54
+ transform: translate(-50%, -50%);
55
+ z-index: 1000;
56
+ }
57
+
58
+ @keyframes spin {
59
+ 0% { transform: translate(-50%, -50%) rotate(0deg); }
60
+ 100% { transform: translate(-50%, -50%) rotate(360deg); }
61
+ }
62
+
63
+ /* Coordinate display */
64
+ .coordinate-display {
65
+ position: fixed;
66
+ top: 20px;
67
+ left: 20px;
68
+ z-index: 100;
69
+ background: rgba(0, 0, 0, 0.7);
70
+ color: white;
71
+ padding: 10px;
72
+ border-radius: 5px;
73
+ font-family: monospace;
74
+ }
75
+
76
+ /* Model selector dropdown */
77
+ .model-selector {
78
+ width: 100%;
79
+ padding: 5px;
80
+ margin-top: 10px;
81
+ border-radius: 5px;
82
+ border: 1px solid #ccc;
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="bg-gray-100">
87
+ <!-- Loading indicator -->
88
+ <div id="loader" class="loader"></div>
89
+
90
+ <!-- Coordinate display -->
91
+ <div class="coordinate-display" id="coordinateDisplay">
92
+ X: 0.00, Y: 0.00, Z: 0.00
93
+ </div>
94
+
95
+ <!-- VRML 3D Renderer Canvas -->
96
+ <div id="renderCanvas"></div>
97
+
98
+ <!-- Control Panel -->
99
+ <div class="control-panel">
100
+ <div class="flex items-center justify-between mb-4">
101
+ <span class="text-gray-700 font-medium">Space VRML Viewer</span>
102
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
103
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
104
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
105
+ </div>
106
+ </div>
107
+
108
+ <select id="modelSelector" class="model-selector">
109
+ <option value="0">Simple Moon</option>
110
+ <option value="1">Lunar Surface</option>
111
+ <option value="2">Moon with Craters</option>
112
+ <option value="3">Earth-Moon System</option>
113
+ <option value="4">Lunar Landing Site</option>
114
+ </select>
115
+
116
+ <div class="flex space-x-2 mt-4">
117
+ <button id="resetView" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
118
+ Reset View
119
+ </button>
120
+ <button id="toggleStars" class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 transition">
121
+ Toggle Stars
122
+ </button>
123
+ <button id="toggleGrid" class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition">
124
+ Toggle Grid
125
+ </button>
126
+ </div>
127
+
128
+ <div class="mt-4 text-sm text-gray-600">
129
+ <p>Click and drag to rotate view</p>
130
+ <p>Scroll to zoom in/out</p>
131
+ <p>Right-click and drag to pan</p>
132
+ </div>
133
+ </div>
134
+
135
+ <script>
136
+ // Initialize Three.js scene
137
+ let scene, camera, renderer, controls, model, stars, grid;
138
+ let isVRMLActive = true;
139
+ let isStarsVisible = true;
140
+ let isGridVisible = true;
141
+
142
+ // Space and lunar models
143
+ const spaceModels = [
144
+ // Simple Moon
145
+ `#VRML V2.0 utf8
146
+
147
+ Transform {
148
+ children [
149
+ Shape {
150
+ appearance Appearance {
151
+ material Material {
152
+ diffuseColor 0.8 0.8 0.8
153
+ specularColor 0.5 0.5 0.5
154
+ shininess 0.2
155
+ }
156
+ texture ImageTexture {
157
+ url "moon_texture.jpg"
158
+ }
159
+ }
160
+ geometry Sphere {
161
+ radius 1.5
162
+ }
163
+ }
164
+ ]
165
+ }`,
166
+
167
+ // Lunar Surface
168
+ `#VRML V2.0 utf8
169
+
170
+ Group {
171
+ children [
172
+ # Moon surface
173
+ Transform {
174
+ translation 0 0 0
175
+ children [
176
+ Shape {
177
+ appearance Appearance {
178
+ material Material {
179
+ diffuseColor 0.7 0.7 0.7
180
+ }
181
+ }
182
+ geometry ElevationGrid {
183
+ xDimension 10
184
+ zDimension 10
185
+ xSpacing 0.5
186
+ zSpacing 0.5
187
+ height [
188
+ 0.0, 0.1, 0.2, 0.1, 0.0, -0.1, -0.2, -0.1, 0.0, 0.1,
189
+ 0.1, 0.2, 0.3, 0.2, 0.1, 0.0, -0.1, 0.0, 0.1, 0.2,
190
+ 0.2, 0.3, 0.4, 0.3, 0.2, 0.1, 0.0, 0.1, 0.2, 0.3,
191
+ 0.1, 0.2, 0.3, 0.2, 0.1, 0.0, -0.1, 0.0, 0.1, 0.2,
192
+ 0.0, 0.1, 0.2, 0.1, 0.0, -0.1, -0.2, -0.1, 0.0, 0.1,
193
+ -0.1, 0.0, 0.1, 0.0, -0.1, -0.2, -0.3, -0.2, -0.1, 0.0,
194
+ -0.2, -0.1, 0.0, -0.1, -0.2, -0.3, -0.4, -0.3, -0.2, -0.1,
195
+ -0.1, 0.0, 0.1, 0.0, -0.1, -0.2, -0.3, -0.2, -0.1, 0.0,
196
+ 0.0, 0.1, 0.2, 0.1, 0.0, -0.1, -0.2, -0.1, 0.0, 0.1,
197
+ 0.1, 0.2, 0.3, 0.2, 0.1, 0.0, -0.1, 0.0, 0.1, 0.2
198
+ ]
199
+ creaseAngle 0.5
200
+ }
201
+ }
202
+ ]
203
+ },
204
+
205
+ # Apollo landing site marker
206
+ Transform {
207
+ translation 1.5 0.4 1.5
208
+ children [
209
+ Shape {
210
+ appearance Appearance {
211
+ material Material {
212
+ diffuseColor 1 0 0
213
+ emissiveColor 1 0.2 0.2
214
+ }
215
+ }
216
+ geometry Box {
217
+ size 0.1 0.8 0.1
218
+ }
219
+ },
220
+ Transform {
221
+ translation 0 0.5 0
222
+ children [
223
+ Shape {
224
+ appearance Appearance {
225
+ material Material {
226
+ diffuseColor 1 1 0
227
+ }
228
+ }
229
+ geometry Sphere {
230
+ radius 0.2
231
+ }
232
+ }
233
+ ]
234
+ }
235
+ ]
236
+ }
237
+ ]
238
+ }`,
239
+
240
+ // Moon with Craters
241
+ `#VRML V2.0 utf8
242
+
243
+ Group {
244
+ children [
245
+ # Moon base
246
+ Transform {
247
+ children [
248
+ Shape {
249
+ appearance Appearance {
250
+ material Material {
251
+ diffuseColor 0.7 0.7 0.7
252
+ }
253
+ }
254
+ geometry Sphere {
255
+ radius 1.5
256
+ }
257
+ }
258
+ ]
259
+ },
260
+
261
+ # Craters
262
+ Transform {
263
+ translation -1 0 0.5
264
+ children [
265
+ Shape {
266
+ appearance Appearance {
267
+ material Material {
268
+ diffuseColor 0.5 0.5 0.5
269
+ }
270
+ }
271
+ geometry Cylinder {
272
+ radius 0.3
273
+ height 0.1
274
+ top FALSE
275
+ }
276
+ }
277
+ ]
278
+ },
279
+ Transform {
280
+ translation 0.8 0 -0.8
281
+ children [
282
+ Shape {
283
+ appearance Appearance {
284
+ material Material {
285
+ diffuseColor 0.5 0.5 0.5
286
+ }
287
+ }
288
+ geometry Cylinder {
289
+ radius 0.5
290
+ height 0.15
291
+ top FALSE
292
+ }
293
+ }
294
+ ]
295
+ },
296
+ Transform {
297
+ translation 0.5 0 1
298
+ children [
299
+ Shape {
300
+ appearance Appearance {
301
+ material Material {
302
+ diffuseColor 0.5 0.5 0.5
303
+ }
304
+ }
305
+ geometry Cylinder {
306
+ radius 0.4
307
+ height 0.12
308
+ top FALSE
309
+ }
310
+ }
311
+ ]
312
+ }
313
+ ]
314
+ }`,
315
+
316
+ // Earth-Moon System
317
+ `#VRML V2.0 utf8
318
+
319
+ Group {
320
+ children [
321
+ # Earth
322
+ Transform {
323
+ translation -3 0 0
324
+ children [
325
+ Shape {
326
+ appearance Appearance {
327
+ material Material {
328
+ diffuseColor 0.2 0.4 0.8
329
+ specularColor 0.5 0.5 0.5
330
+ shininess 0.3
331
+ }
332
+ }
333
+ geometry Sphere {
334
+ radius 1.0
335
+ }
336
+ }
337
+ ]
338
+ },
339
+
340
+ # Moon
341
+ Transform {
342
+ translation 3 0 0
343
+ children [
344
+ Shape {
345
+ appearance Appearance {
346
+ material Material {
347
+ diffuseColor 0.8 0.8 0.8
348
+ }
349
+ }
350
+ geometry Sphere {
351
+ radius 0.3
352
+ }
353
+ }
354
+ ]
355
+ },
356
+
357
+ # Orbit path
358
+ Transform {
359
+ rotation 0 1 0 1.57
360
+ children [
361
+ Shape {
362
+ appearance Appearance {
363
+ material Material {
364
+ diffuseColor 0.8 0.8 0.8
365
+ transparency 0.7
366
+ }
367
+ }
368
+ geometry Cylinder {
369
+ radius 3.0
370
+ height 0.01
371
+ side TRUE
372
+ top FALSE
373
+ bottom FALSE
374
+ }
375
+ }
376
+ ]
377
+ }
378
+ ]
379
+ }`,
380
+
381
+ // Lunar Landing Site
382
+ `#VRML V2.0 utf8
383
+
384
+ Group {
385
+ children [
386
+ # Lunar surface
387
+ Transform {
388
+ children [
389
+ Shape {
390
+ appearance Appearance {
391
+ material Material {
392
+ diffuseColor 0.6 0.6 0.6
393
+ }
394
+ texture ImageTexture {
395
+ url "lunar_surface.jpg"
396
+ }
397
+ }
398
+ geometry ElevationGrid {
399
+ xDimension 5
400
+ zDimension 5
401
+ xSpacing 1.0
402
+ zSpacing 1.0
403
+ height [
404
+ 0.0, 0.1, 0.2, 0.1, 0.0,
405
+ -0.1, 0.0, 0.1, 0.0, -0.1,
406
+ -0.2, -0.1, 0.0, -0.1, -0.2,
407
+ -0.1, 0.0, 0.1, 0.0, -0.1,
408
+ 0.0, 0.1, 0.2, 0.1, 0.0
409
+ ]
410
+ }
411
+ }
412
+ ]
413
+ },
414
+
415
+ # Lunar lander
416
+ Transform {
417
+ translation 0 0.5 0
418
+ children [
419
+ # Lander base
420
+ Shape {
421
+ appearance Appearance {
422
+ material Material {
423
+ diffuseColor 0.8 0.8 0.8
424
+ }
425
+ }
426
+ geometry Box {
427
+ size 0.5 0.2 0.5
428
+ }
429
+ },
430
+
431
+ # Lander legs
432
+ Transform {
433
+ translation -0.3 -0.2 -0.3
434
+ children [
435
+ Shape {
436
+ appearance Appearance {
437
+ material Material {
438
+ diffuseColor 0.7 0.7 0.7
439
+ }
440
+ }
441
+ geometry Cylinder {
442
+ radius 0.03
443
+ height 0.4
444
+ }
445
+ }
446
+ ]
447
+ },
448
+ Transform {
449
+ translation 0.3 -0.2 -0.3
450
+ children [
451
+ Shape {
452
+ appearance Appearance {
453
+ material Material {
454
+ diffuseColor 0.7 0.7 0.7
455
+ }
456
+ }
457
+ geometry Cylinder {
458
+ radius 0.03
459
+ height 0.4
460
+ }
461
+ }
462
+ ]
463
+ },
464
+ Transform {
465
+ translation -0.3 -0.2 0.3
466
+ children [
467
+ Shape {
468
+ appearance Appearance {
469
+ material Material {
470
+ diffuseColor 0.7 0.7 0.7
471
+ }
472
+ }
473
+ geometry Cylinder {
474
+ radius 0.03
475
+ height 0.4
476
+ }
477
+ }
478
+ ]
479
+ },
480
+ Transform {
481
+ translation 0.3 -0.2 0.3
482
+ children [
483
+ Shape {
484
+ appearance Appearance {
485
+ material Material {
486
+ diffuseColor 0.7 0.7 0.7
487
+ }
488
+ }
489
+ geometry Cylinder {
490
+ radius 0.03
491
+ height 0.4
492
+ }
493
+ }
494
+ ]
495
+ },
496
+
497
+ # Lander module
498
+ Transform {
499
+ translation 0 0.3 0
500
+ children [
501
+ Shape {
502
+ appearance Appearance {
503
+ material Material {
504
+ diffuseColor 0.9 0.9 0.9
505
+ }
506
+ }
507
+ geometry Cylinder {
508
+ radius 0.2
509
+ height 0.4
510
+ }
511
+ }
512
+ ]
513
+ }
514
+ ]
515
+ },
516
+
517
+ # Flag
518
+ Transform {
519
+ translation 0.5 0.5 0
520
+ children [
521
+ # Flag pole
522
+ Shape {
523
+ appearance Appearance {
524
+ material Material {
525
+ diffuseColor 0.5 0.5 0.5
526
+ }
527
+ }
528
+ geometry Cylinder {
529
+ radius 0.02
530
+ height 1.0
531
+ }
532
+ },
533
+
534
+ # Flag
535
+ Transform {
536
+ translation 0 0.6 0.1
537
+ rotation 0 1 0 0.5
538
+ children [
539
+ Shape {
540
+ appearance Appearance {
541
+ material Material {
542
+ diffuseColor 1 0 0
543
+ }
544
+ }
545
+ geometry Box {
546
+ size 0.3 0.2 0.01
547
+ }
548
+ }
549
+ ]
550
+ }
551
+ ]
552
+ }
553
+ ]
554
+ }`
555
+ ];
556
+
557
+ // Initialize the 3D scene
558
+ function init() {
559
+ // Create scene
560
+ scene = new THREE.Scene();
561
+ scene.background = new THREE.Color(0x000033);
562
+
563
+ // Create camera
564
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
565
+ camera.position.z = 5;
566
+
567
+ // Create renderer
568
+ renderer = new THREE.WebGLRenderer({ antialias: true });
569
+ renderer.setSize(window.innerWidth, window.innerHeight);
570
+ document.getElementById('renderCanvas').appendChild(renderer.domElement);
571
+
572
+ // Add lights
573
+ const ambientLight = new THREE.AmbientLight(0x404040);
574
+ scene.add(ambientLight);
575
+
576
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
577
+ directionalLight.position.set(1, 1, 1);
578
+ scene.add(directionalLight);
579
+
580
+ // Add stars background
581
+ createStars();
582
+
583
+ // Add grid helper
584
+ grid = new THREE.GridHelper(20, 20, 0x888888, 0x444444);
585
+ scene.add(grid);
586
+
587
+ // Add orbit controls
588
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
589
+ controls.enableDamping = true;
590
+ controls.dampingFactor = 0.25;
591
+
592
+ // Load initial model
593
+ loadVRMLModel(spaceModels[0]);
594
+
595
+ // Hide loader when scene is ready
596
+ document.getElementById('loader').style.display = 'none';
597
+
598
+ // Handle window resize
599
+ window.addEventListener('resize', onWindowResize);
600
+
601
+ // Start animation loop
602
+ animate();
603
+
604
+ // Add mousemove listener for coordinates
605
+ renderer.domElement.addEventListener('mousemove', updateCoordinates);
606
+ }
607
+
608
+ // Create starfield background
609
+ function createStars() {
610
+ const starsGeometry = new THREE.BufferGeometry();
611
+ const starsMaterial = new THREE.PointsMaterial({
612
+ color: 0xffffff,
613
+ size: 0.1,
614
+ transparent: true
615
+ });
616
+
617
+ const starsVertices = [];
618
+ for (let i = 0; i < 10000; i++) {
619
+ const x = (Math.random() - 0.5) * 2000;
620
+ const y = (Math.random() - 0.5) * 2000;
621
+ const z = (Math.random() - 0.5) * 2000;
622
+ starsVertices.push(x, y, z);
623
+ }
624
+
625
+ starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
626
+ stars = new THREE.Points(starsGeometry, starsMaterial);
627
+ scene.add(stars);
628
+ }
629
+
630
+ // Load VRML model
631
+ function loadVRMLModel(vrmlText) {
632
+ // Remove previous model if exists
633
+ if (model) {
634
+ scene.remove(model);
635
+ }
636
+
637
+ try {
638
+ // Parse VRML (simplified for this example)
639
+ const parser = new VRMLParser();
640
+ const vrmlObject = parser.parse(vrmlText);
641
+
642
+ // Convert VRML to Three.js objects (simplified)
643
+ model = convertVRMLToThreeJS(vrmlObject);
644
+
645
+ if (model) {
646
+ scene.add(model);
647
+
648
+ // Adjust camera position based on model
649
+ if (vrmlText.includes("ElevationGrid")) {
650
+ camera.position.z = 8;
651
+ } else if (vrmlText.includes("Earth-Moon")) {
652
+ camera.position.z = 10;
653
+ } else {
654
+ camera.position.z = 5;
655
+ }
656
+
657
+ controls.update();
658
+ }
659
+ } catch (error) {
660
+ console.error('Error loading VRML model:', error);
661
+ // Fallback to a simple sphere if parsing fails
662
+ const geometry = new THREE.SphereGeometry(1.5, 32, 32);
663
+ const material = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
664
+ model = new THREE.Mesh(geometry, material);
665
+ scene.add(model);
666
+ }
667
+ }
668
+
669
+ // Simplified VRML to Three.js converter
670
+ function convertVRMLToThreeJS(vrmlObject) {
671
+ // This is a simplified version - a real converter would be more complex
672
+ if (vrmlObject.children && vrmlObject.children.length > 0) {
673
+ const group = new THREE.Group();
674
+
675
+ for (const child of vrmlObject.children) {
676
+ if (child.geometry) {
677
+ let geometry;
678
+ let material = new THREE.MeshStandardMaterial({
679
+ color: child.appearance?.material?.diffuseColor ?
680
+ new THREE.Color(...child.appearance.material.diffuseColor) :
681
+ 0xffffff,
682
+ emissive: child.appearance?.material?.emissiveColor ?
683
+ new THREE.Color(...child.appearance.material.emissiveColor) :
684
+ 0x000000,
685
+ transparent: child.appearance?.material?.transparency ? true : false,
686
+ opacity: child.appearance?.material?.transparency ?
687
+ 1 - child.appearance.material.transparency : 1.0
688
+ });
689
+
690
+ if (child.geometry.type === 'Box') {
691
+ geometry = new THREE.BoxGeometry(
692
+ child.geometry.size[0] || 1,
693
+ child.geometry.size[1] || 1,
694
+ child.geometry.size[2] || 1
695
+ );
696
+ } else if (child.geometry.type === 'Sphere') {
697
+ geometry = new THREE.SphereGeometry(
698
+ child.geometry.radius || 1,
699
+ 32, 32
700
+ );
701
+ } else if (child.geometry.type === 'Cone') {
702
+ geometry = new THREE.ConeGeometry(
703
+ child.geometry.bottomRadius || 1,
704
+ child.geometry.height || 1,
705
+ 32
706
+ );
707
+ } else if (child.geometry.type === 'Cylinder') {
708
+ geometry = new THREE.CylinderGeometry(
709
+ child.geometry.radius || 0.5,
710
+ child.geometry.radius || 0.5,
711
+ child.geometry.height || 1,
712
+ 32
713
+ );
714
+ if (child.geometry.top === false) {
715
+ // For craters, we need to flip the cylinder upside down
716
+ geometry.rotateX(Math.PI);
717
+ }
718
+ } else if (child.geometry.type === 'ElevationGrid') {
719
+ const xDimension = child.geometry.xDimension || 2;
720
+ const zDimension = child.geometry.zDimension || 2;
721
+ const xSpacing = child.geometry.xSpacing || 1;
722
+ const zSpacing = child.geometry.zSpacing || 1;
723
+ const heights = child.geometry.height || [0, 0, 0, 0];
724
+
725
+ geometry = new THREE.PlaneGeometry(
726
+ (xDimension - 1) * xSpacing,
727
+ (zDimension - 1) * zSpacing,
728
+ xDimension - 1,
729
+ zDimension - 1
730
+ );
731
+
732
+ // Apply height data to vertices
733
+ const positionAttribute = geometry.getAttribute('position');
734
+ for (let i = 0; i < positionAttribute.count; i++) {
735
+ positionAttribute.setY(i, heights[i]);
736
+ }
737
+ positionAttribute.needsUpdate = true;
738
+
739
+ // Rotate to make it horizontal
740
+ geometry.rotateX(-Math.PI / 2);
741
+ } else {
742
+ // Default to sphere if geometry type not recognized
743
+ geometry = new THREE.SphereGeometry(1, 32, 32);
744
+ }
745
+
746
+ const mesh = new THREE.Mesh(geometry, material);
747
+
748
+ if (child.translation) {
749
+ mesh.position.set(
750
+ child.translation[0] || 0,
751
+ child.translation[1] || 0,
752
+ child.translation[2] || 0
753
+ );
754
+ }
755
+
756
+ if (child.rotation) {
757
+ mesh.rotation.set(
758
+ child.rotation[0] || 0,
759
+ child.rotation[1] || 0,
760
+ child.rotation[2] || 0,
761
+ child.rotation[3] || 0
762
+ );
763
+ }
764
+
765
+ group.add(mesh);
766
+ }
767
+ }
768
+
769
+ return group;
770
+ }
771
+
772
+ return null;
773
+ }
774
+
775
+ // Update coordinate display
776
+ function updateCoordinates(event) {
777
+ if (!model) return;
778
+
779
+ // Get mouse position in normalized device coordinates (-1 to +1)
780
+ const mouse = new THREE.Vector2(
781
+ (event.clientX / window.innerWidth) * 2 - 1,
782
+ -(event.clientY / window.innerHeight) * 2 + 1
783
+ );
784
+
785
+ // Create a raycaster
786
+ const raycaster = new THREE.Raycaster();
787
+ raycaster.setFromCamera(mouse, camera);
788
+
789
+ // Calculate objects intersecting the raycaster
790
+ const intersects = raycaster.intersectObject(model, true);
791
+
792
+ if (intersects.length > 0) {
793
+ const point = intersects[0].point;
794
+ document.getElementById('coordinateDisplay').textContent =
795
+ `X: ${point.x.toFixed(2)}, Y: ${point.y.toFixed(2)}, Z: ${point.z.toFixed(2)}`;
796
+ }
797
+ }
798
+
799
+ // Animation loop
800
+ function animate() {
801
+ requestAnimationFrame(animate);
802
+
803
+ if (isVRMLActive) {
804
+ controls.update();
805
+ renderer.render(scene, camera);
806
+ }
807
+ }
808
+
809
+ // Handle window resize
810
+ function onWindowResize() {
811
+ camera.aspect = window.innerWidth / window.innerHeight;
812
+ camera.updateProjectionMatrix();
813
+ renderer.setSize(window.innerWidth, window.innerHeight);
814
+ }
815
+
816
+ // Toggle VRML display
817
+ document.getElementById('toggle').addEventListener('change', function(e) {
818
+ isVRMLActive = e.target.checked;
819
+ if (isVRMLActive) {
820
+ document.getElementById('renderCanvas').style.display = 'block';
821
+ } else {
822
+ document.getElementById('renderCanvas').style.display = 'none';
823
+ }
824
+ });
825
+
826
+ // Reset view
827
+ document.getElementById('resetView').addEventListener('click', function() {
828
+ if (controls) {
829
+ controls.reset();
830
+
831
+ // Adjust camera based on current model
832
+ const selectedModel = document.getElementById('modelSelector').value;
833
+ if (selectedModel === "1" || selectedModel === "4") {
834
+ camera.position.z = 8;
835
+ } else if (selectedModel === "3") {
836
+ camera.position.z = 10;
837
+ } else {
838
+ camera.position.z = 5;
839
+ }
840
+ }
841
+ });
842
+
843
+ // Toggle stars
844
+ document.getElementById('toggleStars').addEventListener('click', function() {
845
+ isStarsVisible = !isStarsVisible;
846
+ stars.visible = isStarsVisible;
847
+ });
848
+
849
+ // Toggle grid
850
+ document.getElementById('toggleGrid').addEventListener('click', function() {
851
+ isGridVisible = !isGridVisible;
852
+ grid.visible = isGridVisible;
853
+ });
854
+
855
+ // Model selector
856
+ document.getElementById('modelSelector').addEventListener('change', function() {
857
+ const modelIndex = parseInt(this.value);
858
+ loadVRMLModel(spaceModels[modelIndex]);
859
+ });
860
+
861
+ // Initialize the scene when the page loads
862
+ window.onload = init;
863
+
864
+ // Mock VRMLParser class for demonstration
865
+ class VRMLParser {
866
+ parse(vrmlText) {
867
+ // This is a very simplified parser for demonstration
868
+ const lines = vrmlText.split('\n');
869
+ const result = { children: [] };
870
+ let currentChild = null;
871
+ let currentGroup = null;
872
+
873
+ for (const line of lines) {
874
+ const trimmed = line.trim();
875
+
876
+ if (trimmed.startsWith('Transform {') || trimmed.startsWith('Group {')) {
877
+ currentGroup = { children: [] };
878
+ if (trimmed.startsWith('Transform')) {
879
+ currentGroup.type = 'Transform';
880
+ } else {
881
+ currentGroup.type = 'Group';
882
+ }
883
+ }
884
+ else if (trimmed.startsWith('translation')) {
885
+ const coords = trimmed.split(' ').slice(1).map(Number);
886
+ if (currentGroup) {
887
+ currentGroup.translation = coords;
888
+ }
889
+ }
890
+ else if (trimmed.startsWith('rotation')) {
891
+ const values = trimmed.split(' ').slice(1).map(Number);
892
+ if (currentGroup) {
893
+ currentGroup.rotation = values;
894
+ }
895
+ }
896
+ else if (trimmed.startsWith('Shape {')) {
897
+ currentChild = {
898
+ appearance: {},
899
+ geometry: {}
900
+ };
901
+ }
902
+ else if (trimmed.startsWith('diffuseColor')) {
903
+ const color = trimmed.split(' ').slice(1).map(Number);
904
+ if (currentChild) {
905
+ currentChild.appearance.material = { diffuseColor: color };
906
+ }
907
+ }
908
+ else if (trimmed.startsWith('emissiveColor')) {
909
+ const color = trimmed.split(' ').slice(1).map(Number);
910
+ if (currentChild) {
911
+ currentChild.appearance.material = currentChild.appearance.material || {};
912
+ currentChild.appearance.material.emissiveColor = color;
913
+ }
914
+ }
915
+ else if (trimmed.startsWith('transparency')) {
916
+ const value = parseFloat(trimmed.split(' ')[1]);
917
+ if (currentChild) {
918
+ currentChild.appearance.material = currentChild.appearance.material || {};
919
+ currentChild.appearance.material.transparency = value;
920
+ }
921
+ }
922
+ else if (trimmed.startsWith('geometry Box')) {
923
+ if (currentChild) {
924
+ currentChild.geometry = { type: 'Box', size: [2, 2, 2] };
925
+ }
926
+ }
927
+ else if (trimmed.startsWith('geometry Sphere')) {
928
+ if (currentChild) {
929
+ currentChild.geometry = { type: 'Sphere', radius: 1.5 };
930
+ }
931
+ }
932
+ else if (trimmed.startsWith('geometry Cone')) {
933
+ if (currentChild) {
934
+ currentChild.geometry = { type: 'Cone', bottomRadius: 1.5, height: 3 };
935
+ }
936
+ }
937
+ else if (trimmed.startsWith('geometry Cylinder')) {
938
+ if (currentChild) {
939
+ currentChild.geometry = { type: 'Cylinder', radius: 0.5, height: 1, top: true };
940
+ }
941
+ }
942
+ else if (trimmed.startsWith('geometry ElevationGrid')) {
943
+ if (currentChild) {
944
+ currentChild.geometry = {
945
+ type: 'ElevationGrid',
946
+ xDimension: 10,
947
+ zDimension: 10,
948
+ xSpacing: 0.5,
949
+ zSpacing: 0.5,
950
+ height: Array(100).fill(0)
951
+ };
952
+ }
953
+ }
954
+ else if (trimmed === '}') {
955
+ if (currentChild) {
956
+ if (currentGroup) {
957
+ currentGroup.children.push(currentChild);
958
+ } else {
959
+ result.children.push(currentChild);
960
+ }
961
+ currentChild = null;
962
+ }
963
+ else if (currentGroup) {
964
+ result.children.push(currentGroup);
965
+ currentGroup = null;
966
+ }
967
+ }
968
+ }
969
+
970
+ return result;
971
+ }
972
+ }
973
+ </script>
974
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privmv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
975
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Create a full screen VRML 3D site with toggle on off switch
2
+ Add a few space scenes like the moon and lunar surface render in geometry with coordinates to points on the moon