Spaces:

Donmill
/

3dsolarsystem

Runtime error

App Files Files Community

Donmill commited on Jun 13, 2025

Commit

d586eda

verified ·

1 Parent(s): 97f1f9e

Create index.html

Browse files

Files changed (1) hide show

index.html +281 -0

index.html ADDED Viewed

	@@ -0,0 +1,281 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Enhanced 3D Solar System</title>
+  <style>
+    body { margin: 0; overflow: hidden; }
+    #info { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.5); padding: 10px; font-family: Arial, sans-serif; border-radius: 5px; z-index: 100; }
+    #panel { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: #fff; padding: 15px; border-radius: 10px; min-width: 220px; z-index: 200; display: none; }
+    #panel h2 { margin-top: 0; }
+    #closePanel { float: right; cursor: pointer; color: #fff; font-size: 18px; }
+    #ai-chat { position: absolute; bottom: 10px; right: 10px; color: white; background: rgba(0,0,0,0.7); padding: 10px; font-family: Arial, sans-serif; border-radius: 5px; max-width: 300px; z-index: 100; }
+    #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px; font-family: Arial, sans-serif; display: none; z-index: 1000; }
+    button { background: #444; color: white; border: none; padding: 5px 10px; margin: 5px 0; cursor: pointer; border-radius: 3px; }
+    button:hover { background: #666; }
+    input { padding: 5px; margin: 5px 0; width: 100%; }
+    #ai-response { margin-top: 10px; max-height: 200px; overflow-y: auto; }
+  </style>
+</head>
+<body>
+  <div id="info">Click a planet to learn more!</div>
+  <div id="panel"><span id="closePanel">&times;</span><h2 id="panel-title"></h2><div id="panel-content"></div></div>
+  <div id="ai-chat">
+    <h3>Ask the AI about the Solar System</h3>
+    <input id="ai-question" type="text" placeholder="Your question...">
+    <button id="ai-submit">Ask</button>
+    <div id="ai-response"></div>
+  </div>
+  <div id="loading">Loading...</div>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/js/controls/OrbitControls.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/js/renderers/CSS2DRenderer.js"></script>
+  <script>
+    // --- Three.js Solar System with enhancements ---
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x000010);
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(0, 30, 70);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+    // CSS2DRenderer for labels
+    const labelRenderer = new THREE.CSS2DRenderer();
+    labelRenderer.setSize(window.innerWidth, window.innerHeight);
+    labelRenderer.domElement.style.position = 'absolute';
+    labelRenderer.domElement.style.top = '0px';
+    labelRenderer.domElement.style.pointerEvents = 'none';
+    document.body.appendChild(labelRenderer.domElement);
+    // Controls
+    const controls = new THREE.OrbitControls(camera, renderer.domElement);
+    // Lighting
+    scene.add(new THREE.AmbientLight(0x404040));
+    const sunLight = new THREE.PointLight(0xffffaa, 2, 200);
+    scene.add(sunLight);
+    // Textures (remote URLs)
+    const textures = {
+      "Sun": "https://www.solarsystemscope.com/textures/download/2k_sun.jpg",
+      "Mercury": "https://www.solarsystemscope.com/textures/download/2k_mercury.jpg",
+      "Venus": "https://www.solarsystemscope.com/textures/download/2k_venus_surface.jpg",
+      "Earth": "https://www.solarsystemscope.com/textures/download/2k_earth_daymap.jpg",
+      "Moon": "https://www.solarsystemscope.com/textures/download/2k_moon.jpg",
+      "Mars": "https://www.solarsystemscope.com/textures/download/2k_mars.jpg",
+      "Jupiter": "https://www.solarsystemscope.com/textures/download/2k_jupiter.jpg",
+      "Saturn": "https://www.solarsystemscope.com/textures/download/2k_saturn.jpg",
+      "Uranus": "https://www.solarsystemscope.com/textures/download/2k_uranus.jpg",
+      "Neptune": "https://www.solarsystemscope.com/textures/download/2k_neptune.jpg"
+    };
+    // Planets and moons
+    const planets = [
+      { name: "Mercury", radius: 0.8, distance: 10, speed: 0.04, moons: [] },
+      { name: "Venus", radius: 1.2, distance: 15, speed: 0.03, moons: [] },
+      {
+        name: "Earth", radius: 1.2, distance: 20, speed: 0.02,
+        moons: [{ name: "Moon", radius: 0.3, distance: 2, speed: 0.05 }]
+      },
+      { name: "Mars", radius: 0.9, distance: 25, speed: 0.015, moons: [] },
+      {
+        name: "Jupiter", radius: 2.5, distance: 35, speed: 0.01,
+        moons: [{ name: "Europa", radius: 0.2, distance: 4, speed: 0.04 }]
+      },
+      {
+        name: "Saturn", radius: 2.2, distance: 45, speed: 0.008, rings: true, moons: []
+      },
+      { name: "Uranus", radius: 1.8, distance: 55, speed: 0.005, moons: [] },
+      { name: "Neptune", radius: 1.8, distance: 65, speed: 0.003, moons: [] }
+    ];
+    // Asteroid belt
+    for (let i = 0; i < 200; i++) {
+      const beltGeometry = new THREE.SphereGeometry(0.1, 8, 8);
+      const beltMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
+      const beltMesh = new THREE.Mesh(beltGeometry, beltMaterial);
+      const angle = Math.random() * Math.PI * 2;
+      const distance = 28 + Math.random() * 4;
+      beltMesh.position.x = Math.cos(angle) * distance;
+      beltMesh.position.z = Math.sin(angle) * distance;
+      beltMesh.position.y = (Math.random() - 0.5) * 0.5;
+      scene.add(beltMesh);
+    }
+    // Sun
+    const sunTexture = new THREE.TextureLoader().load(textures["Sun"]);
+    const sunGeometry = new THREE.SphereGeometry(4, 64, 64);
+    const sunMaterial = new THREE.MeshBasicMaterial({ map: sunTexture });
+    const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+    scene.add(sun);
+    sunLight.position.copy(sun.position);
+    addLabel(sun, "Sun");
+    // Create planets, moons, rings, orbits
+    const planetObjects = [];
+    const clickableObjects = [];
+    planets.forEach((planet) => {
+      const texture = textures[planet.name] ? new THREE.TextureLoader().load(textures[planet.name]) : null;
+      const geometry = new THREE.SphereGeometry(planet.radius, 32, 32);
+      const material = texture ? new THREE.MeshPhongMaterial({ map: texture }) : new THREE.MeshPhongMaterial({ color: 0xffffff });
+      const mesh = new THREE.Mesh(geometry, material);
+      mesh.position.x = planet.distance;
+      mesh.userData = { type: 'planet', name: planet.name };
+      scene.add(mesh);
+      clickableObjects.push(mesh);
+      addLabel(mesh, planet.name);
+      // Saturn's rings
+      if (planet.rings) {
+        const ringGeometry = new THREE.RingGeometry(planet.radius * 1.5, planet.radius * 2.2, 64);
+        const ringMaterial = new THREE.MeshPhongMaterial({ color: 0xe9e5c6, side: THREE.DoubleSide, transparent: true, opacity: 0.7 });
+        const ring = new THREE.Mesh(ringGeometry, ringMaterial);
+        ring.rotation.x = Math.PI / 2;
+        mesh.add(ring);
+      }
+      // Moons
+      const planetMoons = [];
+      if (planet.moons && planet.moons.length > 0) {
+        planet.moons.forEach(moon => {
+          const moonGeometry = new THREE.SphereGeometry(moon.radius, 16, 16);
+          const moonMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
+          const moonMesh = new THREE.Mesh(moonGeometry, moonMaterial);
+          moonMesh.position.x = moon.distance;
+          moonMesh.userData = { type: 'moon', name: moon.name, parent: planet.name };
+          mesh.add(moonMesh);
+          planetMoons.push({ mesh: moonMesh, ...moon });
+          addLabel(moonMesh, moon.name);
+          clickableObjects.push(moonMesh);
+        });
+      }
+      // Orbit path
+      const orbitGeometry = new THREE.BufferGeometry();
+      const points = [];
+      const segments = 64;
+      for (let i = 0; i <= segments; i++) {
+        const theta = (i / segments) * Math.PI * 2;
+        points.push(new THREE.Vector3(
+          Math.cos(theta) * planet.distance,
+          0,
+          Math.sin(theta) * planet.distance
+        ));
+      }
+      orbitGeometry.setFromPoints(points);
+      const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xaaaaaa, transparent: true, opacity: 0.4 });
+      const orbit = new THREE.Line(orbitGeometry, orbitMaterial);
+      scene.add(orbit);
+      planetObjects.push({ mesh, ...planet, moons: planetMoons });
+    });
+    // Add labels
+    function addLabel(object, name) {
+      const div = document.createElement('div');
+      div.className = 'label';
+      div.textContent = name;
+      div.style.color = '#fff';
+      div.style.fontSize = '14px';
+      div.style.textShadow = '0 0 5px #000';
+      const label = new THREE.CSS2DObject(div);
+      label.position.set(0, object.geometry.parameters.radius + 0.6, 0);
+      object.add(label);
+    }
+    // Raycaster for click events
+    const raycaster = new THREE.Raycaster();
+    const mouse = new THREE.Vector2();
+    window.addEventListener('click', (event) => {
+      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+      raycaster.setFromCamera(mouse, camera);
+      const intersects = raycaster.intersectObjects(clickableObjects, true);
+      if (intersects.length > 0) {
+        const obj = intersects[0].object;
+        showPanel(obj.userData);
+      }
+    });
+    // Info panel logic
+    function showPanel(data) {
+      const panel = document.getElementById('panel');
+      const title = document.getElementById('panel-title');
+      const content = document.getElementById('panel-content');
+      panel.style.display = 'block';
+      title.textContent = data.name;
+      content.innerHTML = "Loading info...";
+      // Example: fetch Wikipedia summary (or use your AI backend)
+      fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(data.name)}`)
+        .then(res => res.json())
+        .then(info => {
+          content.innerHTML = info.extract_html || "No info found.";
+        })
+        .catch(() => {
+          content.innerHTML = "No info found.";
+        });
+    }
+    document.getElementById('closePanel').onclick = () => {
+      document.getElementById('panel').style.display = 'none';
+    };
+    // Animation loop
+    let angle = 0;
+    function animate() {
+      requestAnimationFrame(animate);
+      controls.update();
+      angle += 0.005;
+      planetObjects.forEach((planet) => {
+        planet.mesh.position.x = Math.cos(angle * planet.speed) * planet.distance;
+        planet.mesh.position.z = Math.sin(angle * planet.speed) * planet.distance;
+        if (planet.moons) {
+          planet.moons.forEach((moon) => {
+            moon.mesh.position.x = Math.cos(angle * moon.speed) * moon.distance;
+            moon.mesh.position.z = Math.sin(angle * moon.speed) * moon.distance;
+          });
+        }
+      });
+      renderer.render(scene, camera);
+      labelRenderer.render(scene, camera);
+    }
+    animate();
+    // Responsive resize
+    window.addEventListener('resize', () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      labelRenderer.setSize(window.innerWidth, window.innerHeight);
+    });
+    // --- AI Chat Integration ---
+    document.getElementById('ai-submit').addEventListener('click', async () => {
+      const question = document.getElementById('ai-question').value;
+      const responseDiv = document.getElementById('ai-response');
+      const loadingDiv = document.getElementById('loading');
+      responseDiv.textContent = "";
+      loadingDiv.style.display = "block";
+      try {
+        const resp = await fetch("/api/ask", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ question })
+        });
+        const data = await resp.json();
+        if (data.answer) {
+          responseDiv.textContent = "AI: " + data.answer;
+        } else {
+          responseDiv.textContent = "Error: " + (data.error || "Unknown error.");
+        }
+      } catch (error) {
+        responseDiv.textContent = "Error: Could not connect to AI.";
+      }
+      loadingDiv.style.display = "none";
+    });
+  </script>
+</body>
+</html>