Spaces:

privateuserh
/

privmv

Running

App Files Files Community

privateuserh commited on Apr 24

Commit

18043eb

verified ·

1 Parent(s): 557e0cc

Add 2 files

Browse files

Files changed (2) hide show

index.html +389 -45
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lunar Celestial Viewer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
@@ -128,6 +128,20 @@
             background: linear-gradient(90deg, #333 50%, #eee 50%);
             margin-right: 10px;
         }
     </style>
 </head>
 <body class="bg-gray-900">
@@ -153,12 +167,19 @@
             <div class="celestial-value" id="azimuth">214° 22'</div>
             <div>Altitude:</div>
             <div class="celestial-value" id="altitude">+32° 47'</div>
         </div>
     </div>
     <!-- VRML 3D Renderer Canvas -->
     <div id="renderCanvas"></div>
     <!-- Control Panel -->
     <div class="control-panel">
         <div class="flex items-center justify-between mb-4">
@@ -175,6 +196,7 @@
             <option value="2">Moon with Craters</option>
             <option value="3">Earth-Moon System</option>
             <option value="4">Lunar Landing Site</option>
         </select>
         <div class="flex flex-wrap gap-2 mt-4">
@@ -190,12 +212,19 @@
             <button id="toggleCoordinates" class="control-btn bg-yellow-600 hover:bg-yellow-700 text-white">
                 Toggle Coordinates
             </button>
         </div>
         <div class="mt-4 text-xs text-gray-400">
             <p>• Drag to rotate view | Scroll to zoom | Right-drag to pan</p>
             <p>• Current moon phase: <span id="moonPhaseText">Waning Gibbous</span></p>
             <p>• Coordinates updated in real-time</p>
         </div>
     </div>
@@ -206,6 +235,10 @@
         let isStarsVisible = true;
         let isGridVisible = true;
         let isCoordinatesVisible = true;
         // Current moon coordinates (from TheSkyLive)
         const moonCoords = {
@@ -214,9 +247,25 @@
             hourAngle: { hours: 14, minutes: 55, seconds: 53 },
             siderealTime: { hours: 13, minutes: 49, seconds: 9 },
             azimuth: 214.3667,
-            altitude: 32.7833
         };
         // Space and lunar models with celestial coordinates
         const spaceModels = [
             // Celestial Moon
@@ -496,52 +545,50 @@
                                         translation -1 0 0.5
                                         children [
                                             Shape {
-                                                appearance Appearance {
-                                                    material Material {
-                                                        diffuseColor 0.5 0.5 0.5
-                                                    }
-                                                }
-                                                geometry Cylinder {
-                                                    radius 0.3
-                                                    height 0.1
-                                                    top FALSE
-                                                }
                                             }
-                                        ]
-                                    },
-                                    Transform {
-                                        translation 0.8 0 -0.8
-                                        children [
-                                            Shape {
-                                                appearance Appearance {
-                                                    material Material {
-                                                        diffuseColor 0.5 0.5 0.5
-                                                    }
-                                                }
-                                                geometry Cylinder {
-                                                    radius 0.5
-                                                    height 0.15
-                                                    top FALSE
-                                                }
                                             }
-                                        ]
-                                    },
-                                    Transform {
-                                        translation 0.5 0 1
-                                        children [
-                                            Shape {
-                                                appearance Appearance {
-                                                    material Material {
-                                                        diffuseColor 0.5 0.5 0.5
-                                                    }
-                                                }
-                                                geometry Cylinder {
-                                                    radius 0.4
-                                                    height 0.12
-                                                    top FALSE
-                                                }
                                             }
-                                        ]
                                     }
                                 ]
                             }
@@ -818,6 +865,71 @@
                         ]
                     }
                 ]
             }`
         ];
@@ -858,6 +970,12 @@
             // Load initial model
             loadVRMLModel(spaceModels[0]);
             // Update moon phase display
             updateMoonPhase();
@@ -872,6 +990,149 @@
             // Update coordinates periodically to simulate real-time
             setInterval(updateMoonCoordinates, 1000);
         }
         // Create starfield background
@@ -1001,6 +1262,8 @@
                         camera.position.z = 8;
                     } else if (selectedModel === "3") {
                         camera.position.z = 10;
                     } else {
                         camera.position.z = 5;
                     }
@@ -1177,6 +1440,12 @@
             document.getElementById('altitude').textContent =
                 `${moonCoords.altitude >= 0 ? '+' : ''}${Math.floor(moonCoords.altitude)}° ${Math.floor((moonCoords.altitude % 1) * 60)}'`;
         }
         // Update moon phase display
@@ -1190,6 +1459,58 @@
             moonPhaseTextElement.textContent = 'Waning Gibbous (70%)';
         }
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
@@ -1228,6 +1549,8 @@
                     camera.position.z = 8;
                 } else if (selectedModel === "3") {
                     camera.position.z = 10;
                 } else {
                     camera.position.z = 5;
                 }
@@ -1252,10 +1575,31 @@
             document.getElementById('celestialDisplay').style.display = isCoordinatesVisible ? 'block' : 'none';
         });
         // Model selector
         document.getElementById('modelSelector').addEventListener('change', function() {
             const modelIndex = parseInt(this.value);
             loadVRMLModel(spaceModels[modelIndex]);
         });
         // Initialize the scene when the page loads

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lunar Celestial Viewer with Magnetic Field</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
             background: linear-gradient(90deg, #333 50%, #eee 50%);
             margin-right: 10px;
         }
+        /* Pin info window */
+        .pin-info {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            pointer-events: none;
+            z-index: 200;
+            max-width: 200px;
+            display: none;
+        }
     </style>
 </head>
 <body class="bg-gray-900">
             <div class="celestial-value" id="azimuth">214° 22'</div>
             <div>Altitude:</div>
             <div class="celestial-value" id="altitude">+32° 47'</div>
+            <div>Gravity:</div>
+            <div class="celestial-value" id="gravity">1.62 m/s²</div>
+            <div>Magnetic Field:</div>
+            <div class="celestial-value" id="magneticField">~1-100 nT</div>
         </div>
     </div>
     <!-- VRML 3D Renderer Canvas -->
     <div id="renderCanvas"></div>
+    <!-- Pin info window -->
+    <div id="pinInfo" class="pin-info"></div>
     <!-- Control Panel -->
     <div class="control-panel">
         <div class="flex items-center justify-between mb-4">
             <option value="2">Moon with Craters</option>
             <option value="3">Earth-Moon System</option>
             <option value="4">Lunar Landing Site</option>
+            <option value="5">Magnetic Field View</option>
         </select>
         <div class="flex flex-wrap gap-2 mt-4">
             <button id="toggleCoordinates" class="control-btn bg-yellow-600 hover:bg-yellow-700 text-white">
                 Toggle Coordinates
             </button>
+            <button id="togglePins" class="control-btn bg-red-600 hover:bg-red-700 text-white">
+                Toggle Site Pins
+            </button>
+            <button id="toggleMagnetic" class="control-btn bg-indigo-600 hover:bg-indigo-700 text-white">
+                Toggle Magnetic Field
+            </button>
         </div>
         <div class="mt-4 text-xs text-gray-400">
             <p>• Drag to rotate view | Scroll to zoom | Right-drag to pan</p>
             <p>• Current moon phase: <span id="moonPhaseText">Waning Gibbous</span></p>
             <p>• Coordinates updated in real-time</p>
+            <p>• Click on pins for site information</p>
         </div>
     </div>
         let isStarsVisible = true;
         let isGridVisible = true;
         let isCoordinatesVisible = true;
+        let isPinsVisible = true;
+        let isMagneticVisible = false;
+        let pins = [];
+        let magneticFieldLines = [];
         // Current moon coordinates (from TheSkyLive)
         const moonCoords = {
             hourAngle: { hours: 14, minutes: 55, seconds: 53 },
             siderealTime: { hours: 13, minutes: 49, seconds: 9 },
             azimuth: 214.3667,
+            altitude: 32.7833,
+            gravity: 1.62,
+            magneticField: "~1-100 nT"
         };
+        // Known lunar sites with coordinates (latitude, longitude)
+        const lunarSites = [
+            { name: "Volcano Prime", lat: 16.84, long: -21.22, type: "colony", description: "Primary lunar colony located in volcanic highlands" },
+            { name: "Apollo 11", lat: 0.6741, long: 23.4731, type: "landing", description: "First human landing site (1969)" },
+            { name: "Apollo 17", lat: 20.1919, long: 30.7717, type: "landing", description: "Last Apollo mission landing site (1972)" },
+            { name: "Tycho Crater", lat: -43.31, long: -11.36, type: "feature", description: "Prominent impact crater with ray system" },
+            { name: "Mare Tranquillitatis", lat: 8.5, long: 31.4, type: "feature", description: "Sea of Tranquility - dark volcanic plain" },
+            { name: "Shackleton Crater", lat: -89.9, long: 0, type: "feature", description: "South pole crater with potential water ice" },
+            { name: "Luna 2", lat: 29.1, long: 0, type: "impact", description: "First human-made object to reach the Moon (1959)" },
+            { name: "Chang'e 4", lat: -45.5, long: 177.6, type: "lander", description: "First spacecraft to land on far side (2019)" },
+            { name: "Mons Hadley", lat: 26.5, long: 3.7, type: "feature", description: "Mountain near Apollo 15 landing site" },
+            { name: "Oceanus Procellarum", lat: 18.4, long: -57.4, type: "feature", description: "Largest lunar mare (Ocean of Storms)" }
+        ];
         // Space and lunar models with celestial coordinates
         const spaceModels = [
             // Celestial Moon
                                         translation -1 0 0.5
                                         children [
                                             Shape {
+                                        appearance Appearance {
+                                            material Material {
+                                                diffuseColor 0.5 0.5 0.5
                                             }
+                                        }
+                                        geometry Cylinder {
+                                            radius 0.3
+                                            height 0.1
+                                            top FALSE
+                                        }
+                                    }
+                                ]
+                            },
+                            Transform {
+                                translation 0.8 0 -0.8
+                                children [
+                                    Shape {
+                                        appearance Appearance {
+                                            material Material {
+                                                diffuseColor 0.5 0.5 0.5
                                             }
+                                        }
+                                        geometry Cylinder {
+                                            radius 0.5
+                                            height 0.15
+                                            top FALSE
+                                        }
+                                    }
+                                ]
+                            },
+                            Transform {
+                                translation 0.5 0 1
+                                children [
+                                    Shape {
+                                        appearance Appearance {
+                                            material Material {
+                                                diffuseColor 0.5 0.5 0.5
                                             }
+                                        }
+                                        geometry Cylinder {
+                                            radius 0.4
+                                            height 0.12
+                                            top FALSE
+                                        }
                                     }
                                 ]
                             }
                         ]
                     }
                 ]
+            }`,
+            // Magnetic Field View
+            `#VRML V2.0 utf8
+            Group {
+                children [
+                    # Moon positioned at current celestial coordinates
+                    Transform {
+                        rotation 0 1 0 ${(moonCoords.hourAngle.hours / 24) * Math.PI * 2}
+                        children [
+                            Transform {
+                                rotation 1 0 0 ${moonCoords.declination.degrees * Math.PI / 180}
+                                children [
+                                    # Moon with transparent surface
+                                    Shape {
+                                        appearance Appearance {
+                                            material Material {
+                                                diffuseColor 0.8 0.8 0.8
+                                                transparency 0.7
+                                            }
+                                        }
+                                        geometry Sphere {
+                                            radius 1.5
+                                        }
+                                    },
+                                    # Magnetic poles (north and south)
+                                    Transform {
+                                        translation 0 1.5 0
+                                        children [
+                                            Shape {
+                                                appearance Appearance {
+                                                    material Material {
+                                                        diffuseColor 1.0 0.0 0.0
+                                                        emissiveColor 1.0 0.3 0.3
+                                                    }
+                                                }
+                                                geometry Sphere {
+                                                    radius 0.15
+                                                }
+                                            }
+                                        ]
+                                    },
+                                    Transform {
+                                        translation 0 -1.5 0
+                                        children [
+                                            Shape {
+                                                appearance Appearance {
+                                                    material Material {
+                                                        diffuseColor 0.0 0.0 1.0
+                                                        emissiveColor 0.3 0.3 1.0
+                                                    }
+                                                }
+                                                geometry Sphere {
+                                                    radius 0.15
+                                                }
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
             }`
         ];
             // Load initial model
             loadVRMLModel(spaceModels[0]);
+            // Add lunar site pins
+            createLunarSitePins();
+            // Create magnetic field visualization
+            createMagneticField();
             // Update moon phase display
             updateMoonPhase();
             // Update coordinates periodically to simulate real-time
             setInterval(updateMoonCoordinates, 1000);
+            // Set up pin click handler
+            document.getElementById('renderCanvas').addEventListener('click', onCanvasClick, false);
+        }
+        // Create lunar site pins
+        function createLunarSitePins() {
+            // Remove existing pins
+            pins.forEach(pin => scene.remove(pin));
+            pins = [];
+            lunarSites.forEach(site => {
+                // Convert lat/long to 3D position on sphere
+                const latRad = site.lat * Math.PI / 180;
+                const longRad = site.long * Math.PI / 180;
+                const radius = 1.52; // Slightly larger than moon radius
+                const x = radius * Math.cos(latRad) * Math.cos(longRad);
+                const y = radius * Math.sin(latRad);
+                const z = radius * Math.cos(latRad) * Math.sin(longRad);
+                // Create pin based on site type
+                let pinMaterial, pinHeight;
+                if (site.type === "colony") {
+                    pinMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                    pinHeight = 0.3;
+                } else if (site.type === "landing") {
+                    pinMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+                    pinHeight = 0.25;
+                } else if (site.type === "impact") {
+                    pinMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+                    pinHeight = 0.2;
+                } else {
+                    pinMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
+                    pinHeight = 0.15;
+                }
+                // Create pin (cone on top of a cylinder)
+                const pinGroup = new THREE.Group();
+                // Pin base (cylinder)
+                const pinBaseGeometry = new THREE.CylinderGeometry(0.03, 0.03, pinHeight, 8);
+                const pinBase = new THREE.Mesh(pinBaseGeometry, pinMaterial);
+                pinBase.position.y = pinHeight / 2;
+                pinGroup.add(pinBase);
+                // Pin tip (cone)
+                const pinTipGeometry = new THREE.ConeGeometry(0.05, 0.1, 8);
+                const pinTip = new THREE.Mesh(pinTipGeometry, pinMaterial);
+                pinTip.position.y = pinHeight + 0.05;
+                pinGroup.add(pinTip);
+                // Position the pin on the moon's surface
+                pinGroup.position.set(x, y, z);
+                // Make pin point outward from moon's center
+                pinGroup.lookAt(new THREE.Vector3(0, 0, 0));
+                pinGroup.rotateX(Math.PI / 2);
+                // Store site data for click handling
+                pinGroup.userData = {
+                    isPin: true,
+                    siteInfo: site
+                };
+                scene.add(pinGroup);
+                pins.push(pinGroup);
+            });
+        }
+        // Create magnetic field visualization
+        function createMagneticField() {
+            // Remove existing field lines
+            magneticFieldLines.forEach(line => scene.remove(line));
+            magneticFieldLines = [];
+            // Moon's magnetic field is weak and localized, so we'll visualize it with field lines
+            // emanating from the poles (simplified representation)
+            // North pole position
+            const northPole = new THREE.Vector3(0, 1.5, 0);
+            // South pole position
+            const southPole = new THREE.Vector3(0, -1.5, 0);
+            // Create field lines (simplified dipole field)
+            const segments = 12;
+            const steps = 20;
+            const material = new THREE.LineBasicMaterial({
+                color: 0xff5555,
+                transparent: true,
+                opacity: 0.7
+            });
+            for (let i = 0; i < segments; i++) {
+                // Field lines from north pole
+                const northGeometry = new THREE.BufferGeometry();
+                const northVertices = [];
+                const angle = (i / segments) * Math.PI * 2;
+                for (let j = 0; j <= steps; j++) {
+                    const t = j / steps;
+                    const theta = angle;
+                    const phi = t * Math.PI;
+                    // Simplified dipole field line path
+                    const r = 1.5 * Math.sin(phi) * Math.sin(phi);
+                    const x = r * Math.cos(theta);
+                    const y = 1.5 * Math.cos(phi);
+                    const z = r * Math.sin(theta);
+                    northVertices.push(x, y, z);
+                }
+                northGeometry.setAttribute('position', new THREE.Float32BufferAttribute(northVertices, 3));
+                const northLine = new THREE.Line(northGeometry, material);
+                magneticFieldLines.push(northLine);
+                scene.add(northLine);
+                // Field lines from south pole (same but inverted)
+                const southGeometry = new THREE.BufferGeometry();
+                const southVertices = [];
+                for (let j = 0; j <= steps; j++) {
+                    const t = j / steps;
+                    const theta = angle + Math.PI;
+                    const phi = t * Math.PI;
+                    const r = 1.5 * Math.sin(phi) * Math.sin(phi);
+                    const x = r * Math.cos(theta);
+                    const y = -1.5 * Math.cos(phi);
+                    const z = r * Math.sin(theta);
+                    southVertices.push(x, y, z);
+                }
+                southGeometry.setAttribute('position', new THREE.Float32BufferAttribute(southVertices, 3));
+                const southLine = new THREE.Line(southGeometry, material);
+                magneticFieldLines.push(southLine);
+                scene.add(southLine);
+            }
+            // Set initial visibility
+            magneticFieldLines.forEach(line => line.visible = isMagneticVisible);
         }
         // Create starfield background
                         camera.position.z = 8;
                     } else if (selectedModel === "3") {
                         camera.position.z = 10;
+                    } else if (selectedModel === "5") {
+                        camera.position.z = 7;
                     } else {
                         camera.position.z = 5;
                     }
             document.getElementById('altitude').textContent =
                 `${moonCoords.altitude >= 0 ? '+' : ''}${Math.floor(moonCoords.altitude)}° ${Math.floor((moonCoords.altitude % 1) * 60)}'`;
+            document.getElementById('gravity').textContent =
+                `${moonCoords.gravity.toFixed(2)} m/s²`;
+            document.getElementById('magneticField').textContent =
+                moonCoords.magneticField;
         }
         // Update moon phase display
             moonPhaseTextElement.textContent = 'Waning Gibbous (70%)';
         }
+        // Handle canvas clicks for pin selection
+        function onCanvasClick(event) {
+            if (!isPinsVisible) return;
+            // Calculate mouse position in normalized device coordinates
+            const mouse = new THREE.Vector2();
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+            // Set up raycaster
+            const raycaster = new THREE.Raycaster();
+            raycaster.setFromCamera(mouse, camera);
+            // Calculate objects intersecting the ray
+            const intersects = raycaster.intersectObjects(pins);
+            if (intersects.length > 0) {
+                const clickedPin = intersects[0].object;
+                if (clickedPin.userData.isPin) {
+                    const site = clickedPin.userData.siteInfo;
+                    const pinInfo = document.getElementById('pinInfo');
+                    // Position the info window near the pin
+                    const pinPosition = clickedPin.position.clone().project(camera);
+                    pinInfo.style.left = `${(pinPosition.x * 0.5 + 0.5) * window.innerWidth}px`;
+                    pinInfo.style.top = `${(-(pinPosition.y * 0.5 - 0.5)) * window.innerHeight}px`;
+                    // Set content based on site type
+                    let typeColor;
+                    switch(site.type) {
+                        case 'colony': typeColor = 'text-green-400'; break;
+                        case 'landing': typeColor = 'text-red-400'; break;
+                        case 'impact': typeColor = 'text-yellow-400'; break;
+                        default: typeColor = 'text-cyan-400';
+                    }
+                    pinInfo.innerHTML = `
+                        <div class="font-bold ${typeColor}">${site.name}</div>
+                        <div>Lat: ${site.lat}° | Long: ${site.long}°</div>
+                        <div class="mt-1">${site.description}</div>
+                    `;
+                    pinInfo.style.display = 'block';
+                    // Hide after 5 seconds
+                    setTimeout(() => {
+                        pinInfo.style.display = 'none';
+                    }, 5000);
+                }
+            }
+        }
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
                     camera.position.z = 8;
                 } else if (selectedModel === "3") {
                     camera.position.z = 10;
+                } else if (selectedModel === "5") {
+                    camera.position.z = 7;
                 } else {
                     camera.position.z = 5;
                 }
             document.getElementById('celestialDisplay').style.display = isCoordinatesVisible ? 'block' : 'none';
         });
+        // Toggle site pins
+        document.getElementById('togglePins').addEventListener('click', function() {
+            isPinsVisible = !isPinsVisible;
+            pins.forEach(pin => pin.visible = isPinsVisible);
+        });
+        // Toggle magnetic field
+        document.getElementById('toggleMagnetic').addEventListener('click', function() {
+            isMagneticVisible = !isMagneticVisible;
+            magneticFieldLines.forEach(line => line.visible = isMagneticVisible);
+        });
         // Model selector
         document.getElementById('modelSelector').addEventListener('change', function() {
             const modelIndex = parseInt(this.value);
             loadVRMLModel(spaceModels[modelIndex]);
+            // Special handling for magnetic field view
+            if (modelIndex === 5) {
+                isMagneticVisible = true;
+                magneticFieldLines.forEach(line => line.visible = true);
+            } else {
+                isMagneticVisible = false;
+                magneticFieldLines.forEach(line => line.visible = false);
+            }
         });
         // Initialize the scene when the page loads

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 Create a full screen VRML 3D site with toggle on off switch
 Add a few space scenes like the moon and lunar surface render in geometry with coordinates to points on the moon
-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

 Create a full screen VRML 3D site with toggle on off switch
 Add a few space scenes like the moon and lunar surface render in geometry with coordinates to points on the moon
+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
+Add a magnetic field and corresponding poles also add appropriate gravity add a moon colony pin named Volcano Prime and also add all known site locations as pins with a corresponding name