Hugging Face's logo

Spaces:
privateuserh
/
privmv
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +740 -340
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
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/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
@@ -33,11 +33,13 @@
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 */
@@ -61,35 +63,97 @@
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 -->
@@ -98,7 +162,7 @@
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>
@@ -106,206 +170,126 @@
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
  ]
@@ -313,64 +297,169 @@
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
  ]
@@ -378,173 +467,351 @@
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
  }
@@ -558,7 +825,7 @@
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);
@@ -580,9 +847,8 @@
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);
@@ -592,6 +858,9 @@
592
  // Load initial model
593
  loadVRMLModel(spaceModels[0]);
594
 
 
 
 
595
  // Hide loader when scene is ready
596
  document.getElementById('loader').style.display = 'none';
597
 
@@ -601,8 +870,8 @@
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
@@ -627,6 +896,87 @@
627
  scene.add(stars);
628
  }
629
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
630
  // Load VRML model
631
  function loadVRMLModel(vrmlText) {
632
  // Remove previous model if exists
@@ -646,9 +996,10 @@
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;
@@ -772,28 +1123,71 @@
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
@@ -849,7 +1243,13 @@
849
  // Toggle grid
850
  document.getElementById('toggleGrid').addEventListener('click', function() {
851
  isGridVisible = !isGridVisible;
852
- grid.visible = isGridVisible;
 
 
 
 
 
 
853
  });
854
 
855
  // Model selector
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lunar Celestial 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/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
 
33
  bottom: 20px;
34
  right: 20px;
35
  z-index: 100;
36
+ background: rgba(0, 0, 0, 0.8);
37
  padding: 15px;
38
  border-radius: 10px;
39
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
40
+ width: 320px;
41
+ color: white;
42
+ border: 1px solid rgba(255, 255, 255, 0.1);
43
  }
44
 
45
  /* Loading animation */
 
63
  }
64
 
65
  /* Coordinate display */
66
+ .celestial-display {
67
  position: fixed;
68
  top: 20px;
69
  left: 20px;
70
  z-index: 100;
71
  background: rgba(0, 0, 0, 0.7);
72
  color: white;
73
+ padding: 15px;
74
+ border-radius: 8px;
75
+ font-family: 'Courier New', monospace;
76
+ border: 1px solid rgba(255, 255, 255, 0.2);
77
+ min-width: 300px;
78
+ }
79
+
80
+ .celestial-value {
81
+ color: #4ade80;
82
+ font-weight: bold;
83
  }
84
 
85
  /* Model selector dropdown */
86
  .model-selector {
87
  width: 100%;
88
+ padding: 8px;
89
  margin-top: 10px;
90
  border-radius: 5px;
91
+ border: 1px solid #4b5563;
92
+ background-color: #1f2937;
93
+ color: white;
94
+ }
95
+
96
+ /* Celestial grid */
97
+ .celestial-grid {
98
+ position: absolute;
99
+ width: 100%;
100
+ height: 100%;
101
+ pointer-events: none;
102
+ }
103
+
104
+ /* Button styles */
105
+ .control-btn {
106
+ transition: all 0.2s ease;
107
+ border-radius: 6px;
108
+ padding: 6px 12px;
109
+ font-size: 14px;
110
+ }
111
+
112
+ .control-btn:hover {
113
+ transform: translateY(-1px);
114
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
115
+ }
116
+
117
+ /* Celestial lines */
118
+ .celestial-line {
119
+ position: absolute;
120
+ background: rgba(255, 255, 255, 0.1);
121
+ }
122
+
123
+ /* Moon phase indicator */
124
+ .moon-phase {
125
+ width: 40px;
126
+ height: 40px;
127
+ border-radius: 50%;
128
+ background: linear-gradient(90deg, #333 50%, #eee 50%);
129
+ margin-right: 10px;
130
  }
131
  </style>
132
  </head>
133
+ <body class="bg-gray-900">
134
  <!-- Loading indicator -->
135
  <div id="loader" class="loader"></div>
136
 
137
+ <!-- Celestial coordinate display -->
138
+ <div class="celestial-display" id="celestialDisplay">
139
+ <div class="flex items-center mb-2">
140
+ <div class="moon-phase" id="moonPhase"></div>
141
+ <h3 class="text-lg font-bold">Lunar Celestial Coordinates</h3>
142
+ </div>
143
+ <div class="grid grid-cols-2 gap-2 text-sm">
144
+ <div>Right Ascension:</div>
145
+ <div class="celestial-value" id="rightAscension">22h 53m 16s</div>
146
+ <div>Declination:</div>
147
+ <div class="celestial-value" id="declination">-09° 30' 48"</div>
148
+ <div>Hour Angle:</div>
149
+ <div class="celestial-value" id="hourAngle">14h 55m 53s</div>
150
+ <div>Sidereal Time:</div>
151
+ <div class="celestial-value" id="siderealTime">13h 49m 09s</div>
152
+ <div>Azimuth:</div>
153
+ <div class="celestial-value" id="azimuth">214° 22'</div>
154
+ <div>Altitude:</div>
155
+ <div class="celestial-value" id="altitude">+32° 47'</div>
156
+ </div>
157
  </div>
158
 
159
  <!-- VRML 3D Renderer Canvas -->
 
162
  <!-- Control Panel -->
163
  <div class="control-panel">
164
  <div class="flex items-center justify-between mb-4">
165
+ <span class="text-gray-200 font-medium">Lunar Celestial Viewer</span>
166
  <div class="relative inline-block w-10 mr-2 align-middle select-none">
167
  <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/>
168
  <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 
170
  </div>
171
 
172
  <select id="modelSelector" class="model-selector">
173
+ <option value="0">Celestial Moon</option>
174
+ <option value="1">Lunar Surface Grid</option>
175
  <option value="2">Moon with Craters</option>
176
  <option value="3">Earth-Moon System</option>
177
  <option value="4">Lunar Landing Site</option>
178
  </select>
179
 
180
+ <div class="flex flex-wrap gap-2 mt-4">
181
+ <button id="resetView" class="control-btn bg-blue-600 hover:bg-blue-700 text-white">
182
  Reset View
183
  </button>
184
+ <button id="toggleStars" class="control-btn bg-purple-600 hover:bg-purple-700 text-white">
185
  Toggle Stars
186
  </button>
187
+ <button id="toggleGrid" class="control-btn bg-green-600 hover:bg-green-700 text-white">
188
+ Toggle Celestial Grid
189
+ </button>
190
+ <button id="toggleCoordinates" class="control-btn bg-yellow-600 hover:bg-yellow-700 text-white">
191
+ Toggle Coordinates
192
  </button>
193
  </div>
194
 
195
+ <div class="mt-4 text-xs text-gray-400">
196
+ <p>• Drag to rotate view | Scroll to zoom | Right-drag to pan</p>
197
+ <p>• Current moon phase: <span id="moonPhaseText">Waning Gibbous</span></p>
198
+ <p>• Coordinates updated in real-time</p>
199
  </div>
200
  </div>
201
 
202
  <script>
203
  // Initialize Three.js scene
204
+ let scene, camera, renderer, controls, model, stars, celestialGrid;
205
  let isVRMLActive = true;
206
  let isStarsVisible = true;
207
  let isGridVisible = true;
208
+ let isCoordinatesVisible = true;
209
+
210
+ // Current moon coordinates (from TheSkyLive)
211
+ const moonCoords = {
212
+ rightAscension: { hours: 22, minutes: 53, seconds: 16 },
213
+ declination: { degrees: -9, minutes: 30, seconds: 48 },
214
+ hourAngle: { hours: 14, minutes: 55, seconds: 53 },
215
+ siderealTime: { hours: 13, minutes: 49, seconds: 9 },
216
+ azimuth: 214.3667,
217
+ altitude: 32.7833
218
+ };
219
 
220
+ // Space and lunar models with celestial coordinates
221
  const spaceModels = [
222
+ // Celestial Moon
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  `#VRML V2.0 utf8
224
 
225
  Group {
226
  children [
227
+ # Moon positioned at current celestial coordinates
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  Transform {
229
+ rotation 0 1 0 ${(moonCoords.hourAngle.hours / 24) * Math.PI * 2}
230
  children [
 
 
 
 
 
 
 
 
 
 
 
231
  Transform {
232
+ rotation 1 0 0 ${moonCoords.declination.degrees * Math.PI / 180}
233
  children [
234
  Shape {
235
  appearance Appearance {
236
  material Material {
237
+ diffuseColor 0.8 0.8 0.8
238
+ specularColor 0.5 0.5 0.5
239
+ shininess 0.2
240
+ }
241
+ texture ImageTexture {
242
+ url "moon_texture.jpg"
243
  }
244
  }
245
  geometry Sphere {
246
+ radius 1.5
247
  }
248
  }
249
  ]
250
  }
251
  ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
  },
253
 
254
+ # Celestial equator
255
  Transform {
256
+ rotation 1 0 0 0
257
  children [
258
  Shape {
259
  appearance Appearance {
260
  material Material {
261
+ diffuseColor 0.2 0.4 1.0
262
+ transparency 0.7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
  }
264
  }
265
  geometry Cylinder {
266
+ radius 3.0
267
+ height 0.01
268
+ side TRUE
269
  top FALSE
270
+ bottom FALSE
271
  }
272
  }
273
  ]
274
  },
275
+
276
+ # Ecliptic plane (tilted 23.5°)
277
  Transform {
278
+ rotation 1 0 0 ${23.5 * Math.PI / 180}
279
  children [
280
  Shape {
281
  appearance Appearance {
282
  material Material {
283
+ diffuseColor 1.0 0.5 0.2
284
+ transparency 0.7
285
  }
286
  }
287
  geometry Cylinder {
288
+ radius 3.0
289
+ height 0.01
290
+ side TRUE
291
  top FALSE
292
+ bottom FALSE
293
  }
294
  }
295
  ]
 
297
  ]
298
  }`,
299
 
300
+ // Lunar Surface Grid with coordinates
301
  `#VRML V2.0 utf8
302
 
303
  Group {
304
  children [
305
+ # Moon surface with coordinate grid
306
  Transform {
307
+ rotation 0 1 0 ${(moonCoords.hourAngle.hours / 24) * Math.PI * 2}
308
  children [
309
+ Transform {
310
+ rotation 1 0 0 ${moonCoords.declination.degrees * Math.PI / 180}
311
+ children [
312
+ # Surface
313
+ Shape {
314
+ appearance Appearance {
315
+ material Material {
316
+ diffuseColor 0.6 0.6 0.6
317
+ }
318
+ }
319
+ geometry ElevationGrid {
320
+ xDimension 10
321
+ zDimension 10
322
+ xSpacing 0.5
323
+ zSpacing 0.5
324
+ height [
325
+ 0.0, 0.1, 0.2, 0.1, 0.0, -0.1, -0.2, -0.1, 0.0, 0.1,
326
+ 0.1, 0.2, 0.3, 0.2, 0.1, 0.0, -0.1, 0.0, 0.1, 0.2,
327
+ 0.2, 0.3, 0.4, 0.3, 0.2, 0.1, 0.0, 0.1, 0.2, 0.3,
328
+ 0.1, 0.2, 0.3, 0.2, 0.1, 0.0, -0.1, 0.0, 0.1, 0.2,
329
+ 0.0, 0.1, 0.2, 0.1, 0.0, -0.1, -0.2, -0.1, 0.0, 0.1,
330
+ -0.1, 0.0, 0.1, 0.0, -0.1, -0.2, -0.3, -0.2, -0.1, 0.0,
331
+ -0.2, -0.1, 0.0, -0.1, -0.2, -0.3, -0.4, -0.3, -0.2, -0.1,
332
+ -0.1, 0.0, 0.1, 0.0, -0.1, -0.2, -0.3, -0.2, -0.1, 0.0,
333
+ 0.0, 0.1, 0.2, 0.1, 0.0, -0.1, -0.2, -0.1, 0.0, 0.1,
334
+ 0.1, 0.2, 0.3, 0.2, 0.1, 0.0, -0.1, 0.0, 0.1, 0.2
335
+ ]
336
+ creaseAngle 0.5
337
+ }
338
+ },
339
+
340
+ # Coordinate grid lines
341
+ DEF GridLines Group {
342
+ children [
343
+ # Longitude lines (every 30 degrees)
344
+ Transform {
345
+ rotation 0 1 0 0
346
+ children [
347
+ Shape {
348
+ appearance Appearance {
349
+ material Material {
350
+ diffuseColor 1.0 0.0 0.0
351
+ emissiveColor 0.8 0.0 0.0
352
+ }
353
+ }
354
+ geometry Cylinder {
355
+ radius 2.5
356
+ height 0.01
357
+ top FALSE
358
+ bottom FALSE
359
+ }
360
+ }
361
+ ]
362
+ },
363
+ Transform {
364
+ rotation 0 1 0 ${30 * Math.PI / 180}
365
+ children [
366
+ Shape {
367
+ appearance Appearance {
368
+ material Material {
369
+ diffuseColor 1.0 0.0 0.0
370
+ emissiveColor 0.8 0.0 0.0
371
+ }
372
+ }
373
+ geometry Cylinder {
374
+ radius 2.5
375
+ height 0.01
376
+ top FALSE
377
+ bottom FALSE
378
+ }
379
+ }
380
+ ]
381
+ },
382
+ Transform {
383
+ rotation 0 1 0 ${60 * Math.PI / 180}
384
+ children [
385
+ Shape {
386
+ appearance Appearance {
387
+ material Material {
388
+ diffuseColor 1.0 0.0 0.0
389
+ emissiveColor 0.8 0.0 0.0
390
+ }
391
+ }
392
+ geometry Cylinder {
393
+ radius 2.5
394
+ height 0.01
395
+ top FALSE
396
+ bottom FALSE
397
+ }
398
+ }
399
+ ]
400
+ },
401
+
402
+ # Latitude lines (every 30 degrees)
403
+ Transform {
404
+ rotation 1 0 0 ${30 * Math.PI / 180}
405
+ children [
406
+ Shape {
407
+ appearance Appearance {
408
+ material Material {
409
+ diffuseColor 0.0 0.0 1.0
410
+ emissiveColor 0.0 0.0 0.8
411
+ }
412
+ }
413
+ geometry Cylinder {
414
+ radius 2.5
415
+ height 0.01
416
+ top FALSE
417
+ bottom FALSE
418
+ }
419
+ }
420
+ ]
421
+ },
422
+ Transform {
423
+ rotation 1 0 0 ${60 * Math.PI / 180}
424
+ children [
425
+ Shape {
426
+ appearance Appearance {
427
+ material Material {
428
+ diffuseColor 0.0 0.0 1.0
429
+ emissiveColor 0.0 0.0 0.8
430
+ }
431
+ }
432
+ geometry Cylinder {
433
+ radius 2.5
434
+ height 0.01
435
+ top FALSE
436
+ bottom FALSE
437
+ }
438
+ }
439
+ ]
440
+ }
441
+ ]
442
  }
443
+ ]
 
 
 
444
  }
445
  ]
446
  },
447
 
448
+ # Current position marker
449
  Transform {
450
+ translation ${Math.cos(moonCoords.azimuth * Math.PI / 180) * 2.5}
451
+ ${Math.sin(moonCoords.altitude * Math.PI / 180) * 2.5}
452
+ ${Math.sin(moonCoords.azimuth * Math.PI / 180) * 2.5}
453
  children [
454
  Shape {
455
  appearance Appearance {
456
  material Material {
457
+ diffuseColor 1.0 1.0 0.0
458
+ emissiveColor 1.0 1.0 0.2
459
  }
460
  }
461
  geometry Sphere {
462
+ radius 0.1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
463
  }
464
  }
465
  ]
 
467
  ]
468
  }`,
469
 
470
+ // Moon with Craters (celestial positioned)
471
  `#VRML V2.0 utf8
472
 
473
  Group {
474
  children [
475
+ # Moon positioned at current celestial coordinates
476
  Transform {
477
+ rotation 0 1 0 ${(moonCoords.hourAngle.hours / 24) * Math.PI * 2}
478
  children [
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
479
  Transform {
480
+ rotation 1 0 0 ${moonCoords.declination.degrees * Math.PI / 180}
481
  children [
482
+ # Moon base
483
  Shape {
484
  appearance Appearance {
485
  material Material {
486
  diffuseColor 0.7 0.7 0.7
487
  }
488
  }
489
+ geometry Sphere {
490
+ radius 1.5
 
491
  }
492
+ },
493
+
494
+ # Craters
495
+ Transform {
496
+ translation -1 0 0.5
497
+ children [
498
+ Shape {
499
+ appearance Appearance {
500
+ material Material {
501
+ diffuseColor 0.5 0.5 0.5
502
+ }
503
+ }
504
+ geometry Cylinder {
505
+ radius 0.3
506
+ height 0.1
507
+ top FALSE
508
+ }
509
  }
510
+ ]
511
+ },
512
+ Transform {
513
+ translation 0.8 0 -0.8
514
+ children [
515
+ Shape {
516
+ appearance Appearance {
517
+ material Material {
518
+ diffuseColor 0.5 0.5 0.5
519
+ }
520
+ }
521
+ geometry Cylinder {
522
+ radius 0.5
523
+ height 0.15
524
+ top FALSE
525
+ }
526
  }
527
+ ]
528
+ },
529
+ Transform {
530
+ translation 0.5 0 1
531
+ children [
532
+ Shape {
533
+ appearance Appearance {
534
+ material Material {
535
+ diffuseColor 0.5 0.5 0.5
536
+ }
537
+ }
538
+ geometry Cylinder {
539
+ radius 0.4
540
+ height 0.12
541
+ top FALSE
542
+ }
543
  }
544
+ ]
 
 
 
 
545
  }
546
  ]
547
+ }
548
+ ]
549
+ }
550
+ ]
551
+ }`,
552
+
553
+ // Earth-Moon System with celestial coordinates
554
+ `#VRML V2.0 utf8
555
+
556
+ Group {
557
+ children [
558
+ # Earth positioned at celestial coordinates
559
+ Transform {
560
+ rotation 0 1 0 ${(moonCoords.hourAngle.hours / 24) * Math.PI * 2}
561
+ children [
562
  Transform {
563
+ rotation 1 0 0 ${moonCoords.declination.degrees * Math.PI / 180}
564
  children [
565
+ Transform {
566
+ translation -3 0 0
567
+ children [
568
+ Shape {
569
+ appearance Appearance {
570
+ material Material {
571
+ diffuseColor 0.2 0.4 0.8
572
+ specularColor 0.5 0.5 0.5
573
+ shininess 0.3
574
+ }
575
+ }
576
+ geometry Sphere {
577
+ radius 1.0
578
+ }
579
+ }
580
+ ]
581
+ },
582
+
583
+ # Moon
584
+ Transform {
585
+ translation 3 0 0
586
+ children [
587
+ Shape {
588
+ appearance Appearance {
589
+ material Material {
590
+ diffuseColor 0.8 0.8 0.8
591
+ }
592
+ }
593
+ geometry Sphere {
594
+ radius 0.3
595
+ }
596
+ }
597
+ ]
598
+ },
599
+
600
+ # Orbit path
601
  Shape {
602
  appearance Appearance {
603
  material Material {
604
+ diffuseColor 0.8 0.8 0.8
605
+ transparency 0.7
606
  }
607
  }
608
  geometry Cylinder {
609
+ radius 3.0
610
+ height 0.01
611
+ side TRUE
612
+ top FALSE
613
+ bottom FALSE
614
  }
615
  }
616
  ]
617
  }
618
  ]
619
+ }
620
+ ]
621
+ }`,
622
+
623
+ // Lunar Landing Site with coordinates
624
+ `#VRML V2.0 utf8
625
+
626
+ Group {
627
+ children [
628
+ # Lunar surface positioned at celestial coordinates
629
  Transform {
630
+ rotation 0 1 0 ${(moonCoords.hourAngle.hours / 24) * Math.PI * 2}
631
  children [
 
 
 
 
 
 
 
 
 
 
 
 
 
 
632
  Transform {
633
+ rotation 1 0 0 ${moonCoords.declination.degrees * Math.PI / 180}
 
634
  children [
635
+ # Lunar surface
636
  Shape {
637
  appearance Appearance {
638
  material Material {
639
+ diffuseColor 0.6 0.6 0.6
640
  }
641
  }
642
+ geometry ElevationGrid {
643
+ xDimension 5
644
+ zDimension 5
645
+ xSpacing 1.0
646
+ zSpacing 1.0
647
+ height [
648
+ 0.0, 0.1, 0.2, 0.1, 0.0,
649
+ -0.1, 0.0, 0.1, 0.0, -0.1,
650
+ -0.2, -0.1, 0.0, -0.1, -0.2,
651
+ -0.1, 0.0, 0.1, 0.0, -0.1,
652
+ 0.0, 0.1, 0.2, 0.1, 0.0
653
+ ]
654
  }
655
+ },
656
+
657
+ # Lunar lander
658
+ Transform {
659
+ translation 0 0.5 0
660
+ children [
661
+ # Lander base
662
+ Shape {
663
+ appearance Appearance {
664
+ material Material {
665
+ diffuseColor 0.8 0.8 0.8
666
+ }
667
+ }
668
+ geometry Box {
669
+ size 0.5 0.2 0.5
670
+ }
671
+ },
672
+
673
+ # Lander legs
674
+ Transform {
675
+ translation -0.3 -0.2 -0.3
676
+ children [
677
+ Shape {
678
+ appearance Appearance {
679
+ material Material {
680
+ diffuseColor 0.7 0.7 0.7
681
+ }
682
+ }
683
+ geometry Cylinder {
684
+ radius 0.03
685
+ height 0.4
686
+ }
687
+ }
688
+ ]
689
+ },
690
+ Transform {
691
+ translation 0.3 -0.2 -0.3
692
+ children [
693
+ Shape {
694
+ appearance Appearance {
695
+ material Material {
696
+ diffuseColor 0.7 0.7 0.7
697
+ }
698
+ }
699
+ geometry Cylinder {
700
+ radius 0.03
701
+ height 0.4
702
+ }
703
+ }
704
+ ]
705
+ },
706
+ Transform {
707
+ translation -0.3 -0.2 0.3
708
+ children [
709
+ Shape {
710
+ appearance Appearance {
711
+ material Material {
712
+ diffuseColor 0.7 0.7 0.7
713
+ }
714
+ }
715
+ geometry Cylinder {
716
+ radius 0.03
717
+ height 0.4
718
+ }
719
+ }
720
+ ]
721
+ },
722
+ Transform {
723
+ translation 0.3 -0.2 0.3
724
+ children [
725
+ Shape {
726
+ appearance Appearance {
727
+ material Material {
728
+ diffuseColor 0.7 0.7 0.7
729
+ }
730
+ }
731
+ geometry Cylinder {
732
+ radius 0.03
733
+ height 0.4
734
+ }
735
+ }
736
+ ]
737
+ },
738
+
739
+ # Lander module
740
+ Transform {
741
+ translation 0 0.3 0
742
+ children [
743
+ Shape {
744
+ appearance Appearance {
745
+ material Material {
746
+ diffuseColor 0.9 0.9 0.9
747
+ }
748
+ }
749
+ geometry Cylinder {
750
+ radius 0.2
751
+ height 0.4
752
+ }
753
+ }
754
+ ]
755
+ }
756
+ ]
757
+ },
758
+
759
+ # Flag with coordinates marker
760
+ Transform {
761
+ translation 0.5 0.5 0
762
+ children [
763
+ # Flag pole
764
+ Shape {
765
+ appearance Appearance {
766
+ material Material {
767
+ diffuseColor 0.5 0.5 0.5
768
+ }
769
+ }
770
+ geometry Cylinder {
771
+ radius 0.02
772
+ height 1.0
773
+ }
774
+ },
775
+
776
+ # Flag with coordinates
777
+ Transform {
778
+ translation 0 0.6 0.1
779
+ rotation 0 1 0 0.5
780
+ children [
781
+ Shape {
782
+ appearance Appearance {
783
+ material Material {
784
+ diffuseColor 1 0 0
785
+ }
786
+ }
787
+ geometry Box {
788
+ size 0.3 0.2 0.01
789
+ }
790
+ },
791
+ Transform {
792
+ translation 0 0 0.02
793
+ scale 0.5 0.5 0.5
794
+ children [
795
+ Shape {
796
+ appearance Appearance {
797
+ material Material {
798
+ diffuseColor 0 0 0
799
+ }
800
+ }
801
+ geometry Text {
802
+ string ["RA: 22h 53m", "Dec: -09°30'"]
803
+ fontStyle FontStyle {
804
+ size 0.1
805
+ family "SANS"
806
+ style "BOLD"
807
+ }
808
+ }
809
+ }
810
+ ]
811
+ }
812
+ ]
813
+ }
814
+ ]
815
  }
816
  ]
817
  }
 
825
  function init() {
826
  // Create scene
827
  scene = new THREE.Scene();
828
+ scene.background = new THREE.Color(0x000011);
829
 
830
  // Create camera
831
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
847
  // Add stars background
848
  createStars();
849
 
850
+ // Add celestial grid
851
+ createCelestialGrid();
 
852
 
853
  // Add orbit controls
854
  controls = new THREE.OrbitControls(camera, renderer.domElement);
 
858
  // Load initial model
859
  loadVRMLModel(spaceModels[0]);
860
 
861
+ // Update moon phase display
862
+ updateMoonPhase();
863
+
864
  // Hide loader when scene is ready
865
  document.getElementById('loader').style.display = 'none';
866
 
 
870
  // Start animation loop
871
  animate();
872
 
873
+ // Update coordinates periodically to simulate real-time
874
+ setInterval(updateMoonCoordinates, 1000);
875
  }
876
 
877
  // Create starfield background
 
896
  scene.add(stars);
897
  }
898
 
899
+ // Create celestial coordinate grid
900
+ function createCelestialGrid() {
901
+ const gridGroup = new THREE.Group();
902
+
903
+ // Celestial equator (blue)
904
+ const equatorGeometry = new THREE.TorusGeometry(3, 0.01, 16, 64);
905
+ const equatorMaterial = new THREE.MeshBasicMaterial({
906
+ color: 0x4444ff,
907
+ transparent: true,
908
+ opacity: 0.5
909
+ });
910
+ const equator = new THREE.Mesh(equatorGeometry, equatorMaterial);
911
+ equator.rotation.x = Math.PI / 2;
912
+ gridGroup.add(equator);
913
+
914
+ // Ecliptic (yellow, tilted 23.5°)
915
+ const eclipticGeometry = new THREE.TorusGeometry(3, 0.01, 16, 64);
916
+ const eclipticMaterial = new THREE.MeshBasicMaterial({
917
+ color: 0xffff44,
918
+ transparent: true,
919
+ opacity: 0.5
920
+ });
921
+ const ecliptic = new THREE.Mesh(eclipticGeometry, eclipticMaterial);
922
+ ecliptic.rotation.x = Math.PI / 2 + (23.5 * Math.PI / 180);
923
+ gridGroup.add(ecliptic);
924
+
925
+ // Right ascension lines (every 30 degrees)
926
+ for (let i = 0; i < 12; i++) {
927
+ const raGeometry = new THREE.BufferGeometry();
928
+ const raMaterial = new THREE.LineBasicMaterial({
929
+ color: 0xff0000,
930
+ transparent: true,
931
+ opacity: 0.3
932
+ });
933
+
934
+ const raAngle = (i * 30) * Math.PI / 180;
935
+ const vertices = new Float32Array([
936
+ 0, 0, 0,
937
+ Math.cos(raAngle) * 3, Math.sin(raAngle) * 3, 0
938
+ ]);
939
+
940
+ raGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
941
+ const raLine = new THREE.Line(raGeometry, raMaterial);
942
+ gridGroup.add(raLine);
943
+ }
944
+
945
+ // Declination lines (every 15 degrees from -90 to +90)
946
+ for (let i = -6; i <= 6; i++) {
947
+ const decGeometry = new THREE.BufferGeometry();
948
+ const decMaterial = new THREE.LineBasicMaterial({
949
+ color: 0x0000ff,
950
+ transparent: true,
951
+ opacity: 0.3
952
+ });
953
+
954
+ const decAngle = (i * 15) * Math.PI / 180;
955
+ const radius = Math.cos(decAngle) * 3;
956
+ const y = Math.sin(decAngle) * 3;
957
+
958
+ const circleGeometry = new THREE.BufferGeometry();
959
+ const circleVertices = [];
960
+ const segments = 64;
961
+
962
+ for (let j = 0; j <= segments; j++) {
963
+ const theta = (j / segments) * Math.PI * 2;
964
+ circleVertices.push(
965
+ Math.cos(theta) * radius,
966
+ y,
967
+ Math.sin(theta) * radius
968
+ );
969
+ }
970
+
971
+ circleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(circleVertices, 3));
972
+ const decCircle = new THREE.Line(circleGeometry, decMaterial);
973
+ gridGroup.add(decCircle);
974
+ }
975
+
976
+ celestialGrid = gridGroup;
977
+ scene.add(celestialGrid);
978
+ }
979
+
980
  // Load VRML model
981
  function loadVRMLModel(vrmlText) {
982
  // Remove previous model if exists
 
996
  scene.add(model);
997
 
998
  // Adjust camera position based on model
999
+ const selectedModel = document.getElementById('modelSelector').value;
1000
+ if (selectedModel === "1" || selectedModel === "4") {
1001
  camera.position.z = 8;
1002
+ } else if (selectedModel === "3") {
1003
  camera.position.z = 10;
1004
  } else {
1005
  camera.position.z = 5;
 
1123
  return null;
1124
  }
1125
 
1126
+ // Update moon coordinates display
1127
+ function updateMoonCoordinates() {
1128
+ // Simulate slight changes in coordinates over time
1129
+ moonCoords.rightAscension.seconds = (moonCoords.rightAscension.seconds + 0.1) % 60;
1130
+ if (moonCoords.rightAscension.seconds < 0.1) {
1131
+ moonCoords.rightAscension.minutes = (moonCoords.rightAscension.minutes + 1) % 60;
1132
+ if (moonCoords.rightAscension.minutes === 0) {
1133
+ moonCoords.rightAscension.hours = (moonCoords.rightAscension.hours + 1) % 24;
1134
+ }
1135
+ }
1136
 
1137
+ moonCoords.declination.seconds = (moonCoords.declination.seconds + 0.05) % 60;
1138
+ if (moonCoords.declination.seconds < 0.05) {
1139
+ moonCoords.declination.minutes = (moonCoords.declination.minutes + 1) % 60;
1140
+ }
1141
 
1142
+ moonCoords.hourAngle.seconds = (moonCoords.hourAngle.seconds + 0.15) % 60;
1143
+ if (moonCoords.hourAngle.seconds < 0.15) {
1144
+ moonCoords.hourAngle.minutes = (moonCoords.hourAngle.minutes + 1) % 60;
1145
+ if (moonCoords.hourAngle.minutes === 0) {
1146
+ moonCoords.hourAngle.hours = (moonCoords.hourAngle.hours + 1) % 24;
1147
+ }
1148
+ }
1149
 
1150
+ moonCoords.siderealTime.seconds = (moonCoords.siderealTime.seconds + 0.1) % 60;
1151
+ if (moonCoords.siderealTime.seconds < 0.1) {
1152
+ moonCoords.siderealTime.minutes = (moonCoords.siderealTime.minutes + 1) % 60;
1153
+ if (moonCoords.siderealTime.minutes === 0) {
1154
+ moonCoords.siderealTime.hours = (moonCoords.siderealTime.hours + 1) % 24;
1155
+ }
1156
  }
1157
+
1158
+ // Update azimuth and altitude slightly
1159
+ moonCoords.azimuth = (moonCoords.azimuth + 0.05) % 360;
1160
+ moonCoords.altitude = Math.min(90, Math.max(-90, moonCoords.altitude + (Math.random() - 0.5) * 0.1));
1161
+
1162
+ // Update the display
1163
+ document.getElementById('rightAscension').textContent =
1164
+ `${Math.floor(moonCoords.rightAscension.hours)}h ${Math.floor(moonCoords.rightAscension.minutes)}m ${Math.floor(moonCoords.rightAscension.seconds)}s`;
1165
+
1166
+ document.getElementById('declination').textContent =
1167
+ `${moonCoords.declination.degrees < 0 ? '-' : '+'}${Math.abs(Math.floor(moonCoords.declination.degrees))}° ${Math.floor(moonCoords.declination.minutes)}' ${Math.floor(moonCoords.declination.seconds)}"`;
1168
+
1169
+ document.getElementById('hourAngle').textContent =
1170
+ `${Math.floor(moonCoords.hourAngle.hours)}h ${Math.floor(moonCoords.hourAngle.minutes)}m ${Math.floor(moonCoords.hourAngle.seconds)}s`;
1171
+
1172
+ document.getElementById('siderealTime').textContent =
1173
+ `${Math.floor(moonCoords.siderealTime.hours)}h ${Math.floor(moonCoords.siderealTime.minutes)}m ${Math.floor(moonCoords.siderealTime.seconds)}s`;
1174
+
1175
+ document.getElementById('azimuth').textContent =
1176
+ `${Math.floor(moonCoords.azimuth)}° ${Math.floor((moonCoords.azimuth % 1) * 60)}'`;
1177
+
1178
+ document.getElementById('altitude').textContent =
1179
+ `${moonCoords.altitude >= 0 ? '+' : ''}${Math.floor(moonCoords.altitude)}° ${Math.floor((moonCoords.altitude % 1) * 60)}'`;
1180
+ }
1181
+
1182
+ // Update moon phase display
1183
+ function updateMoonPhase() {
1184
+ const moonPhaseElement = document.getElementById('moonPhase');
1185
+ const moonPhaseTextElement = document.getElementById('moonPhaseText');
1186
+
1187
+ // Simulate waning gibbous phase (about 70% illuminated)
1188
+ moonPhaseElement.style.background = 'linear-gradient(90deg, #333 30%, #eee 30%)';
1189
+ moonPhaseElement.style.borderRadius = '50%';
1190
+ moonPhaseTextElement.textContent = 'Waning Gibbous (70%)';
1191
  }
1192
 
1193
  // Animation loop
 
1243
  // Toggle grid
1244
  document.getElementById('toggleGrid').addEventListener('click', function() {
1245
  isGridVisible = !isGridVisible;
1246
+ celestialGrid.visible = isGridVisible;
1247
+ });
1248
+
1249
+ // Toggle coordinates display
1250
+ document.getElementById('toggleCoordinates').addEventListener('click', function() {
1251
+ isCoordinatesVisible = !isCoordinatesVisible;
1252
+ document.getElementById('celestialDisplay').style.display = isCoordinatesVisible ? 'block' : 'none';
1253
  });
1254
 
1255
  // Model selector
prompts.txt CHANGED
@@ -1,2 +1,3 @@
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
 
 
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
3
+ Modify and use real time moon location coordinates reference Celestial Coordinates Apparent Right Ascension22h 53m 16s Declination-09° 30’ 48” Hour Angle14h 55m 53s Sidereal Time https://theskylive.com/moon-info and position the grid in those coordinates