Spaces:

eaglelandsonce
/

AIstronauts_Launch_System

Running

App Files Files Community

eaglelandsonce commited on Feb 9

Commit

961c0dd

verified ·

1 Parent(s): f9393f0

Update index.html

Browse files

Files changed (1) hide show

index.html +67 -67

index.html CHANGED Viewed

@@ -1,88 +1,88 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Rocket Orbiting Earth - Three.js Simulation</title>
     <style>
-      body {
-        margin: 0;
-        overflow: hidden;
-        background-color: black;
-      }
     </style>
-  </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>
-      // Initialize the scene
-      const scene = new THREE.Scene();
-      // Create camera
-      const camera = new THREE.PerspectiveCamera(
-        75,
-        window.innerWidth / window.innerHeight,
-        0.1,
-        1000
-      );
-      camera.position.set(0, 50, 150);
-      // Create renderer
-      const renderer = new THREE.WebGLRenderer({ antialias: true });
-      renderer.setSize(window.innerWidth, window.innerHeight);
-      document.body.appendChild(renderer.domElement);
-      // Add OrbitControls for interactivity
-      const controls = new THREE.OrbitControls(camera, renderer.domElement);
-      // Add 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);
-      // Create Earth
-      const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
-      const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233ff });
-      const earth = new THREE.Mesh(earthGeometry, earthMaterial);
-      scene.add(earth);
-      // Create Rocket (represented as a small red sphere)
-      const rocketGeometry = new THREE.SphereGeometry(2, 16, 16);
-      const rocketMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
-      const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
-      scene.add(rocket);
-      // Orbit parameters
-      const orbitRadius = 50; // Distance from Earth
-      const orbitSpeed = 0.005; // Speed of orbit
-      // Animation loop
-      function animate() {
-        requestAnimationFrame(animate);
-        // Update rocket position
-        const time = Date.now() * 0.001; // Time in seconds
-        rocket.position.x = orbitRadius * Math.cos(time * orbitSpeed);
-        rocket.position.z = orbitRadius * Math.sin(time * orbitSpeed);
-        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();
-        renderer.setSize(window.innerWidth, window.innerHeight);
-      });
     </script>
-  </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rocket Orbiting Earth</title>
     <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background-color: black;
+        }
+        canvas {
+            display: block;
+        }
     </style>
+</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();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
     </script>
+</body>
 </html>