Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

App Files Community
eaglelandsonce commited on
Commit
c0c3f27
·
verified ·
1 Parent(s): 77f061d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +91 -98
index.html CHANGED
@@ -2,9 +2,13 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <title>Spin Launch Attach Simulation</title>
6
  <style>
7
- body { margin: 0; overflow: hidden; background-color: #000; }
 
 
 
 
8
  #info {
9
  position: absolute;
10
  top: 10px;
@@ -13,7 +17,6 @@
13
  font-family: sans-serif;
14
  z-index: 2;
15
  }
16
- /* Ensure dat.GUI panel is on top */
17
  .dg.main {
18
  position: absolute;
19
  top: 0px;
@@ -23,7 +26,10 @@
23
  </style>
24
  </head>
25
  <body>
26
- <div id="info">Spin Launch Attach Simulation<br />Use the GUI controls to adjust parameters and advance stages.</div>
 
 
 
27
  <!-- Include Three.js -->
28
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
29
  <!-- Include dat.GUI -->
@@ -31,12 +37,10 @@
31
  <!-- Include OrbitControls -->
32
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
33
  <script>
34
- console.log("Initializing simulation...");
35
-
36
- // Create scene, camera, and renderer
37
  const scene = new THREE.Scene();
38
  scene.background = new THREE.Color(0x000000);
39
-
40
  const camera = new THREE.PerspectiveCamera(
41
  60,
42
  window.innerWidth / window.innerHeight,
@@ -44,62 +48,60 @@
44
  10000
45
  );
46
  camera.position.set(0, 50, 150);
47
-
48
  const renderer = new THREE.WebGLRenderer({ antialias: true });
49
  renderer.setSize(window.innerWidth, window.innerHeight);
50
- renderer.setClearColor(0x000000, 1);
51
  document.body.appendChild(renderer.domElement);
52
-
53
- // Set up OrbitControls
54
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
55
-
56
- // Add lighting
57
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
58
  scene.add(ambientLight);
59
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
60
  directionalLight.position.set(50, 100, 50);
61
  scene.add(directionalLight);
62
-
63
- // Create Earth (blue sphere)
64
  const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
65
- const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233ff, shininess: 10 });
 
 
 
66
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
67
  earth.position.set(0, 0, 0);
68
  scene.add(earth);
69
-
70
- // Create payload (red cylinder)
71
  const payloadGeometry = new THREE.CylinderGeometry(2, 2, 6, 32);
72
  const payloadMaterial = new THREE.MeshPhongMaterial({ color: 0xff3333 });
73
  const payload = new THREE.Mesh(payloadGeometry, payloadMaterial);
74
- // Initial position for Stage 1
75
  payload.position.set(40, 0, 0);
76
  scene.add(payload);
77
-
78
- // Create manned vehicle (blue cube)
79
  const vehicleGeometry = new THREE.BoxGeometry(5, 5, 5);
80
  const vehicleMaterial = new THREE.MeshPhongMaterial({ color: 0x3333ff });
81
  const mannedVehicle = new THREE.Mesh(vehicleGeometry, vehicleMaterial);
82
- // Preposition the manned vehicle in orbit for docking
83
  mannedVehicle.position.set(-40, 60, 0);
84
  scene.add(mannedVehicle);
85
-
86
- // Set up control parameters with dat.GUI
87
  const params = {
88
- stage: 1, // Current stage (1 to 5)
89
- spinRate: 0.5, // For Stage 1: radians per second
90
- thrusterBurn: 2.0, // For Stage 2: thruster burn factor
91
- despinRate: 0.01, // For Stage 3: rate of spin reduction per second
92
- dockingSpeed: 0.02, // For Stage 4: interpolation speed for docking
93
- nextStage: function() {
94
  if (this.stage < 5) {
95
  this.stage++;
96
- elapsedTime = 0; // Reset time for new stage
97
- console.log("Advancing to Stage " + this.stage);
98
  }
99
- }
100
  };
101
-
102
- // Create dat.GUI panel and set its style explicitly
103
  const gui = new dat.GUI();
104
  gui.add(params, 'stage', 1, 5, 1).name('Stage').listen();
105
  gui.add(params, 'spinRate', 0.1, 2.0).name('Spin Rate');
@@ -107,78 +109,69 @@
107
  gui.add(params, 'despinRate', 0.001, 0.05).name('Despin Rate');
108
  gui.add(params, 'dockingSpeed', 0.005, 0.05).name('Docking Speed');
109
  gui.add(params, 'nextStage').name('Next Stage');
110
-
111
- // Ensure the GUI panel is appended and styled
112
- console.log("dat.GUI panel:", gui.domElement);
113
- gui.domElement.style.position = "absolute";
114
- gui.domElement.style.top = "0px";
115
- gui.domElement.style.right = "0px";
116
- gui.domElement.style.zIndex = 100;
117
 
118
  // Animation variables
119
  let elapsedTime = 0;
120
  const clock = new THREE.Clock();
121
-
122
  function animate() {
123
  requestAnimationFrame(animate);
124
  const delta = clock.getDelta();
125
  elapsedTime += delta;
126
-
127
- // Stage 1: Ground-Based Spin-Up Launch
128
- if (params.stage === 1) {
129
- const radius = 40;
130
- payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
131
- payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
132
- payload.position.y = 0;
133
- }
134
- // Stage 2: Orbital Insertion via Thruster Burn
135
- else if (params.stage === 2) {
136
- const radius = 40;
137
- const upwardGain = params.thrusterBurn * elapsedTime * 10;
138
- payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
139
- payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
140
- payload.position.y = upwardGain;
141
- }
142
- // Stage 3: On-Orbit Stabilization and Despin
143
- else if (params.stage === 3) {
144
- const orbitRadius = 80;
145
- // Gradually reduce spinRate to simulate despinning
146
- params.spinRate = Math.max(0.1, params.spinRate - params.despinRate * delta);
147
- payload.position.x = orbitRadius * Math.cos(elapsedTime * params.spinRate);
148
- payload.position.z = orbitRadius * Math.sin(elapsedTime * params.spinRate);
149
- payload.position.y = 20; // Set fixed orbital altitude
150
- }
151
- // Stage 4: Rendezvous and Docking with Manned Vehicle
152
- else if (params.stage === 4) {
153
- payload.position.lerp(mannedVehicle.position, params.dockingSpeed);
154
- }
155
- // Stage 5: Integrated Mission Operations (Combined Orbit)
156
- else if (params.stage === 5) {
157
- const orbitRadius = 80;
158
- const angularSpeed = 0.01;
159
- const angle = elapsedTime * angularSpeed;
160
- const center = new THREE.Vector3(0, 20, 0);
161
- const offset = new THREE.Vector3(
162
- orbitRadius * Math.cos(angle),
163
- 0,
164
- orbitRadius * Math.sin(angle)
165
- );
166
- payload.position.copy(center).add(offset);
167
- mannedVehicle.position.copy(center).add(offset);
 
 
 
 
168
  }
169
-
170
  controls.update();
171
  renderer.render(scene, camera);
172
  }
173
-
174
  animate();
175
-
176
- // Handle window resize events
177
- window.addEventListener("resize", () => {
178
- camera.aspect = window.innerWidth / window.innerHeight;
179
- camera.updateProjectionMatrix();
180
- renderer.setSize(window.innerWidth, window.innerHeight);
181
- });
182
- </script>
183
- </body>
184
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <title>3D Simulation with Three.js</title>
6
  <style>
7
+ body {
8
+ margin: 0;
9
+ overflow: hidden;
10
+ background-color: #000;
11
+ }
12
  #info {
13
  position: absolute;
14
  top: 10px;
 
17
  font-family: sans-serif;
18
  z-index: 2;
19
  }
 
20
  .dg.main {
21
  position: absolute;
22
  top: 0px;
 
26
  </style>
27
  </head>
28
  <body>
29
+ <div id="info">
30
+ 3D Simulation with Three.js<br />
31
+ Use the GUI controls to interact with the scene.
32
+ </div>
33
  <!-- Include Three.js -->
34
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
35
  <!-- Include dat.GUI -->
 
37
  <!-- Include OrbitControls -->
38
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
39
  <script>
40
+ // Initialize scene, camera, and renderer
 
 
41
  const scene = new THREE.Scene();
42
  scene.background = new THREE.Color(0x000000);
43
+
44
  const camera = new THREE.PerspectiveCamera(
45
  60,
46
  window.innerWidth / window.innerHeight,
 
48
  10000
49
  );
50
  camera.position.set(0, 50, 150);
51
+
52
  const renderer = new THREE.WebGLRenderer({ antialias: true });
53
  renderer.setSize(window.innerWidth, window.innerHeight);
 
54
  document.body.appendChild(renderer.domElement);
55
+
56
+ // OrbitControls for camera interaction
57
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
58
+
59
+ // Lighting
60
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
61
  scene.add(ambientLight);
62
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
63
  directionalLight.position.set(50, 100, 50);
64
  scene.add(directionalLight);
65
+
66
+ // Earth (blue sphere)
67
  const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
68
+ const earthMaterial = new THREE.MeshPhongMaterial({
69
+ color: 0x2233ff,
70
+ shininess: 10,
71
+ });
72
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
73
  earth.position.set(0, 0, 0);
74
  scene.add(earth);
75
+
76
+ // Payload (red cylinder)
77
  const payloadGeometry = new THREE.CylinderGeometry(2, 2, 6, 32);
78
  const payloadMaterial = new THREE.MeshPhongMaterial({ color: 0xff3333 });
79
  const payload = new THREE.Mesh(payloadGeometry, payloadMaterial);
 
80
  payload.position.set(40, 0, 0);
81
  scene.add(payload);
82
+
83
+ // Manned vehicle (blue cube)
84
  const vehicleGeometry = new THREE.BoxGeometry(5, 5, 5);
85
  const vehicleMaterial = new THREE.MeshPhongMaterial({ color: 0x3333ff });
86
  const mannedVehicle = new THREE.Mesh(vehicleGeometry, vehicleMaterial);
 
87
  mannedVehicle.position.set(-40, 60, 0);
88
  scene.add(mannedVehicle);
89
+
90
+ // Control parameters with dat.GUI
91
  const params = {
92
+ stage: 1,
93
+ spinRate: 0.5,
94
+ thrusterBurn: 2.0,
95
+ despinRate: 0.01,
96
+ dockingSpeed: 0.02,
97
+ nextStage: function () {
98
  if (this.stage < 5) {
99
  this.stage++;
100
+ elapsedTime = 0;
 
101
  }
102
+ },
103
  };
104
+
 
105
  const gui = new dat.GUI();
106
  gui.add(params, 'stage', 1, 5, 1).name('Stage').listen();
107
  gui.add(params, 'spinRate', 0.1, 2.0).name('Spin Rate');
 
109
  gui.add(params, 'despinRate', 0.001, 0.05).name('Despin Rate');
110
  gui.add(params, 'dockingSpeed', 0.005, 0.05).name('Docking Speed');
111
  gui.add(params, 'nextStage').name('Next Stage');
 
 
 
 
 
 
 
112
 
113
  // Animation variables
114
  let elapsedTime = 0;
115
  const clock = new THREE.Clock();
116
+
117
  function animate() {
118
  requestAnimationFrame(animate);
119
  const delta = clock.getDelta();
120
  elapsedTime += delta;
121
+
122
+ switch (params.stage) {
123
+ case 1:
124
+ // Stage 1: Ground-Based Spin-Up Launch
125
+ const radius = 40;
126
+ payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
127
+ payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
128
+ payload.position.y = 0;
129
+ break;
130
+ case 2:
131
+ // Stage 2: Orbital Insertion via Thruster Burn
132
+ const upwardGain = params.thrusterBurn * elapsedTime * 10;
133
+ payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
134
+ payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
135
+ payload.position.y = upwardGain;
136
+ break;
137
+ case 3:
138
+ // Stage 3: On-Orbit Stabilization and Despin
139
+ const orbitRadius = 80;
140
+ params.spinRate = Math.max(
141
+ 0.1,
142
+ params.spinRate - params.despinRate * delta
143
+ );
144
+ payload.position.x =
145
+ orbitRadius * Math.cos(elapsedTime * params.spinRate);
146
+ payload.position.z =
147
+ orbitRadius * Math.sin(elapsedTime * params.spinRate);
148
+ payload.position.y = 20;
149
+ break;
150
+ case 4:
151
+ // Stage 4: Rendezvous and Docking with Manned Vehicle
152
+ payload.position.lerp(mannedVehicle.position, params.dockingSpeed);
153
+ break;
154
+ case 5:
155
+ // Stage 5: Integrated Mission Operations (Combined Orbit)
156
+ const angularSpeed = 0.01;
157
+ const angle = elapsedTime * angularSpeed;
158
+ const center = new THREE.Vector3(0, 20, 0);
159
+ const offset = new THREE.Vector3(
160
+ orbitRadius * Math.cos(angle),
161
+ 0,
162
+ orbitRadius * Math.sin(angle)
163
+ );
164
+ payload.position.copy(center).add(offset);
165
+ mannedVehicle.position.copy(center).add(offset);
166
+ break;
167
  }
168
+
169
  controls.update();
170
  renderer.render(scene, camera);
171
  }
172
+
173
  animate();
174
+
175
+ // Handle window
176
+ ::contentReference[oaicite:0]{index=0}
177
+