Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

App Files Community
eaglelandsonce commited on
Commit
36db671
·
verified ·
1 Parent(s): 2fa5fbb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +28 -31
index.html CHANGED
@@ -5,14 +5,8 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Rocket Orbiting Earth</title>
7
  <style>
8
- body {
9
- margin: 0;
10
- overflow: hidden;
11
- background-color: black;
12
- }
13
- canvas {
14
- display: block;
15
- }
16
  </style>
17
  </head>
18
  <body>
@@ -20,35 +14,37 @@
20
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
21
  <!-- Load OrbitControls -->
22
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
23
-
24
  <script>
25
- // 1️⃣ Create Scene, Camera, and Renderer
 
 
26
  const scene = new THREE.Scene();
27
- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
28
  const renderer = new THREE.WebGLRenderer();
29
  renderer.setSize(window.innerWidth, window.innerHeight);
30
  document.body.appendChild(renderer.domElement);
31
 
32
- // 2️⃣ Add Camera Controls
33
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
34
- controls.enableDamping = true; // Smooth movement
35
  controls.dampingFactor = 0.05;
36
  controls.minDistance = 20;
37
- controls.maxDistance = 100;
38
 
39
- // 3️⃣ Create Earth (Blue Sphere)
40
  const earthGeometry = new THREE.SphereGeometry(10, 32, 32);
41
  const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x2233ff });
42
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
43
  scene.add(earth);
44
 
45
- // 4️⃣ Create Rocket (Red Sphere)
46
  const rocketGeometry = new THREE.SphereGeometry(1, 16, 16);
47
  const rocketMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
48
  const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
49
  scene.add(rocket);
50
 
51
- // 5️⃣ Lighting (Improved for Better Visibility)
52
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
53
  scene.add(ambientLight);
54
 
@@ -56,38 +52,39 @@
56
  pointLight.position.set(30, 30, 30);
57
  scene.add(pointLight);
58
 
59
- // 6️⃣ Camera Positioning
60
  camera.position.set(0, 30, 50);
61
  camera.lookAt(earth.position);
62
 
63
- // 7️⃣ Orbit Parameters
64
- const orbitRadius = 30; // Distance from Earth
65
- const orbitSpeed = 0.002; // Speed of Orbit
66
- let time = 0; // Time tracker
67
 
68
- // 8️⃣ Animation Loop
69
  function animate() {
70
  requestAnimationFrame(animate);
71
-
72
- // Calculate Rocket's Orbit Position
73
- time += orbitSpeed;
74
- rocket.position.x = orbitRadius * Math.cos(time);
75
- rocket.position.z = orbitRadius * Math.sin(time);
76
- rocket.position.y = 5 * Math.sin(time * 0.5); // Small vertical oscillation
77
 
78
- // Update camera controls and render
 
 
 
 
 
79
  controls.update();
80
  renderer.render(scene, camera);
81
  }
82
 
83
  animate(); // Start animation
84
 
85
- // 9️⃣ Window Resize Handling
86
  window.addEventListener("resize", () => {
87
  camera.aspect = window.innerWidth / window.innerHeight;
88
  camera.updateProjectionMatrix();
89
  renderer.setSize(window.innerWidth, window.innerHeight);
90
  });
 
 
91
  </script>
92
  </body>
93
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Rocket Orbiting Earth</title>
7
  <style>
8
+ body { margin: 0; overflow: hidden; background-color: black; }
9
+ canvas { display: block; }
 
 
 
 
 
 
10
  </style>
11
  </head>
12
  <body>
 
14
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
15
  <!-- Load OrbitControls -->
16
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
17
+
18
  <script>
19
+ console.log("🚀 Initializing Three.js Rocket Orbit Simulation");
20
+
21
+ // ✅ 1. Scene, Camera, and Renderer
22
  const scene = new THREE.Scene();
23
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
24
  const renderer = new THREE.WebGLRenderer();
25
  renderer.setSize(window.innerWidth, window.innerHeight);
26
  document.body.appendChild(renderer.domElement);
27
 
28
+ // ✅ 2. Add OrbitControls (for camera movement)
29
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
30
+ controls.enableDamping = true;
31
  controls.dampingFactor = 0.05;
32
  controls.minDistance = 20;
33
+ controls.maxDistance = 200;
34
 
35
+ // ✅ 3. Create Earth (Blue Sphere)
36
  const earthGeometry = new THREE.SphereGeometry(10, 32, 32);
37
  const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x2233ff });
38
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
39
  scene.add(earth);
40
 
41
+ // ✅ 4. Create Rocket (Red Sphere)
42
  const rocketGeometry = new THREE.SphereGeometry(1, 16, 16);
43
  const rocketMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
44
  const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
45
  scene.add(rocket);
46
 
47
+ // ✅ 5. Lighting (Improved for Better Visibility)
48
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
49
  scene.add(ambientLight);
50
 
 
52
  pointLight.position.set(30, 30, 30);
53
  scene.add(pointLight);
54
 
55
+ // ✅ 6. Camera Position
56
  camera.position.set(0, 30, 50);
57
  camera.lookAt(earth.position);
58
 
59
+ // ✅ 7. Orbit Parameters
60
+ const orbitRadius = 25; // Distance from Earth
61
+ const orbitSpeed = 0.01; // Speed of orbit
62
+ let angle = 0; // Angle of orbit
63
 
64
+ // ✅ 8. Animation Loop
65
  function animate() {
66
  requestAnimationFrame(animate);
 
 
 
 
 
 
67
 
68
+ // Update Rocket Position (Circular Orbit)
69
+ angle += orbitSpeed;
70
+ rocket.position.x = orbitRadius * Math.cos(angle);
71
+ rocket.position.z = orbitRadius * Math.sin(angle);
72
+ rocket.position.y = 5 * Math.sin(angle * 0.5); // Small vertical oscillation
73
+
74
  controls.update();
75
  renderer.render(scene, camera);
76
  }
77
 
78
  animate(); // Start animation
79
 
80
+ // ✅ 9. Window Resize Handling
81
  window.addEventListener("resize", () => {
82
  camera.aspect = window.innerWidth / window.innerHeight;
83
  camera.updateProjectionMatrix();
84
  renderer.setSize(window.innerWidth, window.innerHeight);
85
  });
86
+
87
+ console.log("✅ Simulation Running Successfully");
88
  </script>
89
  </body>
90
  </html>