Spaces:

eaglelandsonce
/

AIstronauts_Launch_System

Running

App Files Files Community

eaglelandsonce commited on Feb 8

Commit

ee44b0e

verified ·

1 Parent(s): c0c3f27

Update index.html

Browse files

Files changed (1) hide show

index.html +38 -131

index.html CHANGED Viewed

@@ -2,169 +2,70 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>3D Simulation with Three.js</title>
     <style>
       body {
         margin: 0;
         overflow: hidden;
-        background-color: #000;
-      }
-      #info {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        color: #fff;
-        font-family: sans-serif;
-        z-index: 2;
-      }
-      .dg.main {
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        z-index: 100;
       }
     </style>
   </head>
   <body>
-    <div id="info">
-      3D Simulation with Three.js<br />
-      Use the GUI controls to interact with the scene.
-    </div>
     <!-- Include Three.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
-    <!-- Include dat.GUI -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
     <!-- Include OrbitControls -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
     <script>
-      // Initialize scene, camera, and renderer
       const scene = new THREE.Scene();
-      scene.background = new THREE.Color(0x000000);
       const camera = new THREE.PerspectiveCamera(
-        60,
         window.innerWidth / window.innerHeight,
         0.1,
-        10000
       );
-      camera.position.set(0, 50, 150);
       const renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setSize(window.innerWidth, window.innerHeight);
       document.body.appendChild(renderer.domElement);
-      // OrbitControls for camera interaction
       const controls = new THREE.OrbitControls(camera, renderer.domElement);
       // Lighting
-      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
       scene.add(ambientLight);
-      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-      directionalLight.position.set(50, 100, 50);
-      scene.add(directionalLight);
-      // Earth (blue sphere)
-      const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
-      const earthMaterial = new THREE.MeshPhongMaterial({
-        color: 0x2233ff,
-        shininess: 10,
-      });
-      const earth = new THREE.Mesh(earthGeometry, earthMaterial);
-      earth.position.set(0, 0, 0);
-      scene.add(earth);
-      // Payload (red cylinder)
-      const payloadGeometry = new THREE.CylinderGeometry(2, 2, 6, 32);
-      const payloadMaterial = new THREE.MeshPhongMaterial({ color: 0xff3333 });
-      const payload = new THREE.Mesh(payloadGeometry, payloadMaterial);
-      payload.position.set(40, 0, 0);
-      scene.add(payload);
-      // Manned vehicle (blue cube)
-      const vehicleGeometry = new THREE.BoxGeometry(5, 5, 5);
-      const vehicleMaterial = new THREE.MeshPhongMaterial({ color: 0x3333ff });
-      const mannedVehicle = new THREE.Mesh(vehicleGeometry, vehicleMaterial);
-      mannedVehicle.position.set(-40, 60, 0);
-      scene.add(mannedVehicle);
-      // Control parameters with dat.GUI
-      const params = {
-        stage: 1,
-        spinRate: 0.5,
-        thrusterBurn: 2.0,
-        despinRate: 0.01,
-        dockingSpeed: 0.02,
-        nextStage: function () {
-          if (this.stage < 5) {
-            this.stage++;
-            elapsedTime = 0;
-          }
-        },
-      };
-      const gui = new dat.GUI();
-      gui.add(params, 'stage', 1, 5, 1).name('Stage').listen();
-      gui.add(params, 'spinRate', 0.1, 2.0).name('Spin Rate');
-      gui.add(params, 'thrusterBurn', 0.5, 5.0).name('Thruster Burn');
-      gui.add(params, 'despinRate', 0.001, 0.05).name('Despin Rate');
-      gui.add(params, 'dockingSpeed', 0.005, 0.05).name('Docking Speed');
-      gui.add(params, 'nextStage').name('Next Stage');
-      // Animation variables
-      let elapsedTime = 0;
-      const clock = new THREE.Clock();
       function animate() {
         requestAnimationFrame(animate);
-        const delta = clock.getDelta();
-        elapsedTime += delta;
-        switch (params.stage) {
-          case 1:
-            // Stage 1: Ground-Based Spin-Up Launch
-            const radius = 40;
-            payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
-            payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
-            payload.position.y = 0;
-            break;
-          case 2:
-            // Stage 2: Orbital Insertion via Thruster Burn
-            const upwardGain = params.thrusterBurn * elapsedTime * 10;
-            payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
-            payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
-            payload.position.y = upwardGain;
-            break;
-          case 3:
-            // Stage 3: On-Orbit Stabilization and Despin
-            const orbitRadius = 80;
-            params.spinRate = Math.max(
-              0.1,
-              params.spinRate - params.despinRate * delta
-            );
-            payload.position.x =
-              orbitRadius * Math.cos(elapsedTime * params.spinRate);
-            payload.position.z =
-              orbitRadius * Math.sin(elapsedTime * params.spinRate);
-            payload.position.y = 20;
-            break;
-          case 4:
-            // Stage 4: Rendezvous and Docking with Manned Vehicle
-            payload.position.lerp(mannedVehicle.position, params.dockingSpeed);
-            break;
-          case 5:
-            // Stage 5: Integrated Mission Operations (Combined Orbit)
-            const angularSpeed = 0.01;
-            const angle = elapsedTime * angularSpeed;
-            const center = new THREE.Vector3(0, 20, 0);
-            const offset = new THREE.Vector3(
-              orbitRadius * Math.cos(angle),
-              0,
-              orbitRadius * Math.sin(angle)
-            );
-            payload.position.copy(center).add(offset);
-            mannedVehicle.position.copy(center).add(offset);
-            break;
-        }
         controls.update();
         renderer.render(scene, camera);
@@ -172,6 +73,12 @@
       animate();
-      // Handle window
-::contentReference[oaicite:0]{index=0}

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <title>Three.js Orbital Simulation</title>
     <style>
       body {
         margin: 0;
         overflow: hidden;
       }
     </style>
   </head>
   <body>
     <!-- Include Three.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
     <!-- Include OrbitControls -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
     <script>
+      // Scene setup
       const scene = new THREE.Scene();
+      // Camera setup
       const camera = new THREE.PerspectiveCamera(
+        75,
         window.innerWidth / window.innerHeight,
         0.1,
+        1000
       );
+      camera.position.z = 50;
+      // Renderer setup
       const renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setSize(window.innerWidth, window.innerHeight);
       document.body.appendChild(renderer.domElement);
+      // OrbitControls setup
       const controls = new THREE.OrbitControls(camera, renderer.domElement);
       // Lighting
+      const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
       scene.add(ambientLight);
+      const pointLight = new THREE.PointLight(0xffffff, 1, 0);
+      scene.add(pointLight);
+      // Central planet
+      const planetGeometry = new THREE.SphereGeometry(10, 32, 32);
+      const planetMaterial = new THREE.MeshPhongMaterial({ color: 0x0077ff });
+      const planet = new THREE.Mesh(planetGeometry, planetMaterial);
+      scene.add(planet);
+      // Orbiting satellite
+      const satelliteGeometry = new THREE.SphereGeometry(1, 16, 16);
+      const satelliteMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
+      const satellite = new THREE.Mesh(satelliteGeometry, satelliteMaterial);
+      scene.add(satellite);
+      // Animation parameters
+      const orbitRadius = 30;
+      const orbitSpeed = 0.01; // Radians per frame
+      // Animation loop
       function animate() {
         requestAnimationFrame(animate);
+        // Update satellite position
+        const time = Date.now() * 0.001;
+        satellite.position.x = orbitRadius * Math.cos(time * orbitSpeed);
+        satellite.position.z = orbitRadius * Math.sin(time * orbitSpeed);
         controls.update();
         renderer.render(scene, camera);
       animate();
+      // Handle window resize
+      window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+    </script>
+  </body>
+</html>