Spaces:

eaglelandsonce
/

AIstronauts_Launch_System

Running

App Files Files Community

eaglelandsonce commited on Feb 9

Commit

2fa5fbb

verified ·

1 Parent(s): 961c0dd

Update index.html

Browse files

Files changed (1) hide show

index.html +27 -22

index.html CHANGED Viewed

@@ -17,67 +17,72 @@
 </head>
 <body>
     <!-- Load Three.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <!-- Load OrbitControls -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/controls/OrbitControls.js"></script>
     <script>
-        // Create scene, camera, and renderer
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
-        // Add OrbitControls for interaction
         const controls = new THREE.OrbitControls(camera, renderer.domElement);
         controls.enableDamping = true; // Smooth movement
-        // Create Earth
         const earthGeometry = new THREE.SphereGeometry(10, 32, 32);
         const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x2233ff });
         const earth = new THREE.Mesh(earthGeometry, earthMaterial);
         scene.add(earth);
-        // Create Rocket (small red sphere representing the spacecraft)
         const rocketGeometry = new THREE.SphereGeometry(1, 16, 16);
         const rocketMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
         const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
         scene.add(rocket);
-        // Orbit parameters
-        const orbitRadius = 25; // Distance from Earth
-        const orbitSpeed = 0.002; // Orbit speed
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
         scene.add(ambientLight);
-        const pointLight = new THREE.PointLight(0xffffff, 1.2);
-        pointLight.position.set(50, 50, 50);
         scene.add(pointLight);
-        // Set initial camera position
         camera.position.set(0, 30, 50);
         camera.lookAt(earth.position);
-        // Animation loop
         function animate() {
             requestAnimationFrame(animate);
-            // Update rocket position
-            const time = Date.now() * orbitSpeed;
             rocket.position.x = orbitRadius * Math.cos(time);
             rocket.position.z = orbitRadius * Math.sin(time);
-            rocket.position.y = 0; // Keep it at the same altitude
             controls.update();
             renderer.render(scene, camera);
         }
-        animate();
-        // Handle window resizing
         window.addEventListener("resize", () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();

 </head>
 <body>
     <!-- Load Three.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
     <!-- Load OrbitControls -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
     <script>
+        // 1️⃣ Create Scene, Camera, and Renderer
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
+        // 2️⃣ Add Camera Controls
         const controls = new THREE.OrbitControls(camera, renderer.domElement);
         controls.enableDamping = true; // Smooth movement
+        controls.dampingFactor = 0.05;
+        controls.minDistance = 20;
+        controls.maxDistance = 100;
+        // 3️⃣ Create Earth (Blue Sphere)
         const earthGeometry = new THREE.SphereGeometry(10, 32, 32);
         const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x2233ff });
         const earth = new THREE.Mesh(earthGeometry, earthMaterial);
         scene.add(earth);
+        // 4️⃣ Create Rocket (Red Sphere)
         const rocketGeometry = new THREE.SphereGeometry(1, 16, 16);
         const rocketMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
         const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
         scene.add(rocket);
+        // 5️⃣ Lighting (Improved for Better Visibility)
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
         scene.add(ambientLight);
+        const pointLight = new THREE.PointLight(0xffffff, 1.5, 100);
+        pointLight.position.set(30, 30, 30);
         scene.add(pointLight);
+        // 6️⃣ Camera Positioning
         camera.position.set(0, 30, 50);
         camera.lookAt(earth.position);
+        // 7️⃣ Orbit Parameters
+        const orbitRadius = 30;  // Distance from Earth
+        const orbitSpeed = 0.002; // Speed of Orbit
+        let time = 0; // Time tracker
+        // 8️⃣ Animation Loop
         function animate() {
             requestAnimationFrame(animate);
+            // Calculate Rocket's Orbit Position
+            time += orbitSpeed;
             rocket.position.x = orbitRadius * Math.cos(time);
             rocket.position.z = orbitRadius * Math.sin(time);
+            rocket.position.y = 5 * Math.sin(time * 0.5); // Small vertical oscillation
+            // Update camera controls and render
             controls.update();
             renderer.render(scene, camera);
         }
+        animate(); // Start animation
+        // 9️⃣ Window Resize Handling
         window.addEventListener("resize", () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();