Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

App Files Community
eaglelandsonce commited on
Commit
a0ae832
·
verified ·
1 Parent(s): 2b36632

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +45 -51
index.html CHANGED
@@ -11,12 +11,16 @@
11
  left: 10px;
12
  color: #fff;
13
  font-family: sans-serif;
14
- z-index: 1;
 
 
 
 
15
  }
16
  </style>
17
  </head>
18
  <body>
19
- <div id="info">Spin Launch Attach Simulation<br />Use the GUI controls to adjust parameters and advance stages.</div>
20
  <!-- Include Three.js from CDN -->
21
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
22
  <!-- Include dat.GUI -->
@@ -24,74 +28,70 @@
24
  <!-- Include OrbitControls -->
25
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
26
  <script>
27
- // Basic Three.js Setup
28
  console.log("Initializing simulation...");
 
 
29
  const scene = new THREE.Scene();
30
- scene.background = new THREE.Color(0x000000); // Set background to black
31
-
32
- const camera = new THREE.PerspectiveCamera(
33
- 60,
34
- window.innerWidth / window.innerHeight,
35
- 0.1,
36
- 10000
37
- );
38
  camera.position.set(0, 50, 150);
39
-
40
  const renderer = new THREE.WebGLRenderer({ antialias: true });
41
  renderer.setSize(window.innerWidth, window.innerHeight);
42
- renderer.setClearColor(0x000000, 1); // Ensure clear color is black
43
  document.body.appendChild(renderer.domElement);
44
-
45
- // OrbitControls to allow camera navigation
46
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
47
-
48
- // Lights
49
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
50
  scene.add(ambientLight);
 
51
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
52
  directionalLight.position.set(50, 100, 50);
53
  scene.add(directionalLight);
54
-
55
  // Create Earth (blue sphere)
56
  const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
57
  const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233ff, shininess: 10 });
58
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
59
- // Position Earth at scene center
60
  earth.position.set(0, 0, 0);
61
  scene.add(earth);
62
-
63
- // Create the payload (red cylinder)
64
  const payloadGeometry = new THREE.CylinderGeometry(2, 2, 6, 32);
65
  const payloadMaterial = new THREE.MeshPhongMaterial({ color: 0xff3333 });
66
  const payload = new THREE.Mesh(payloadGeometry, payloadMaterial);
67
- // Initially position payload at the edge of the spin launcher (Stage 1)
68
  payload.position.set(40, 0, 0);
69
  scene.add(payload);
70
-
71
- // Create the manned vehicle (blue cube)
72
  const vehicleGeometry = new THREE.BoxGeometry(5, 5, 5);
73
  const vehicleMaterial = new THREE.MeshPhongMaterial({ color: 0x3333ff });
74
  const mannedVehicle = new THREE.Mesh(vehicleGeometry, vehicleMaterial);
75
- // Preposition the manned vehicle in a higher orbit for rendezvous
76
  mannedVehicle.position.set(-40, 60, 0);
77
  scene.add(mannedVehicle);
78
-
79
- // dat.GUI control parameters
80
  const params = {
81
- stage: 1, // Current stage (1 to 5)
82
- spinRate: 0.5, // radians per second (Stage 1)
83
- thrusterBurn: 2.0, // Thruster burn factor (Stage 2)
84
- despinRate: 0.01, // Rate to reduce spin (Stage 3)
85
- dockingSpeed: 0.02, // Lerp speed for docking (Stage 4)
86
  nextStage: function() {
87
  if (this.stage < 5) {
88
  this.stage++;
89
- elapsedTime = 0; // Reset elapsed time for new stage
90
- console.log("Advancing to stage " + this.stage);
91
  }
92
  }
93
  };
94
-
95
  const gui = new dat.GUI();
96
  gui.add(params, 'stage', 1, 5, 1).name('Stage').listen();
97
  gui.add(params, 'spinRate', 0.1, 2.0).name('Spin Rate');
@@ -99,32 +99,30 @@
99
  gui.add(params, 'despinRate', 0.001, 0.05).name('Despin Rate');
100
  gui.add(params, 'dockingSpeed', 0.005, 0.05).name('Docking Speed');
101
  gui.add(params, 'nextStage').name('Next Stage');
102
-
103
  // Animation variables
104
  let elapsedTime = 0;
105
  const clock = new THREE.Clock();
106
-
107
  function animate() {
108
  requestAnimationFrame(animate);
109
  const delta = clock.getDelta();
110
  elapsedTime += delta;
111
-
112
  // Stage 1: Ground-Based Spin-Up Launch
113
  if (params.stage === 1) {
114
  const radius = 40;
115
- // Rotate payload around a central axis (simulate spin)
116
  payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
117
  payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
118
- payload.position.y = 0; // On ground level for illustration
119
  }
120
  // Stage 2: Orbital Insertion via Thruster Burn
121
  else if (params.stage === 2) {
122
  const radius = 40;
123
- // Continue spin motion plus an upward boost to simulate thruster burn
124
  const upwardGain = params.thrusterBurn * elapsedTime * 10;
125
  payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
126
  payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
127
- payload.position.y = upwardGain;
128
  }
129
  // Stage 3: On-Orbit Stabilization and Despin
130
  else if (params.stage === 3) {
@@ -133,21 +131,17 @@
133
  params.spinRate = Math.max(0.1, params.spinRate - params.despinRate * delta);
134
  payload.position.x = orbitRadius * Math.cos(elapsedTime * params.spinRate);
135
  payload.position.z = orbitRadius * Math.sin(elapsedTime * params.spinRate);
136
- // Set a constant orbital altitude (e.g., 20 units above Earth surface)
137
- payload.position.y = 20;
138
  }
139
- // Stage 4: Rendezvous and Docking with the Manned Vehicle
140
  else if (params.stage === 4) {
141
- // Use linear interpolation to move payload toward the manned vehicle
142
  payload.position.lerp(mannedVehicle.position, params.dockingSpeed);
143
  }
144
  // Stage 5: Integrated Mission Operations (Combined Orbit)
145
  else if (params.stage === 5) {
146
- // Once docked, simulate a joint orbit with a circular motion
147
  const orbitRadius = 80;
148
  const angularSpeed = 0.01;
149
  const angle = elapsedTime * angularSpeed;
150
- // Define a center of the orbit (e.g., relative to Earth)
151
  const center = new THREE.Vector3(0, 20, 0);
152
  const offset = new THREE.Vector3(
153
  orbitRadius * Math.cos(angle),
@@ -161,10 +155,10 @@
161
  controls.update();
162
  renderer.render(scene, camera);
163
  }
164
-
165
  animate();
166
-
167
- // Handle window resize
168
  window.addEventListener("resize", () => {
169
  camera.aspect = window.innerWidth / window.innerHeight;
170
  camera.updateProjectionMatrix();
 
11
  left: 10px;
12
  color: #fff;
13
  font-family: sans-serif;
14
+ z-index: 2;
15
+ }
16
+ /* Force dat.GUI to appear on top */
17
+ .dg.main {
18
+ z-index: 100 !important;
19
  }
20
  </style>
21
  </head>
22
  <body>
23
+ <div id="info">Spin Launch Attach Simulation<br/>Use the GUI controls to adjust parameters and advance stages.</div>
24
  <!-- Include Three.js from CDN -->
25
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
26
  <!-- Include dat.GUI -->
 
28
  <!-- Include OrbitControls -->
29
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
30
  <script>
 
31
  console.log("Initializing simulation...");
32
+
33
+ // Create scene, camera, and renderer
34
  const scene = new THREE.Scene();
35
+ scene.background = new THREE.Color(0x000000);
36
+
37
+ const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
 
 
 
 
 
38
  camera.position.set(0, 50, 150);
39
+
40
  const renderer = new THREE.WebGLRenderer({ antialias: true });
41
  renderer.setSize(window.innerWidth, window.innerHeight);
42
+ renderer.setClearColor(0x000000, 1);
43
  document.body.appendChild(renderer.domElement);
44
+
45
+ // Add OrbitControls for scene navigation
46
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
47
+
48
+ // Add lights
49
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
50
  scene.add(ambientLight);
51
+
52
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
53
  directionalLight.position.set(50, 100, 50);
54
  scene.add(directionalLight);
55
+
56
  // Create Earth (blue sphere)
57
  const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
58
  const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233ff, shininess: 10 });
59
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
 
60
  earth.position.set(0, 0, 0);
61
  scene.add(earth);
62
+
63
+ // Create payload (red cylinder)
64
  const payloadGeometry = new THREE.CylinderGeometry(2, 2, 6, 32);
65
  const payloadMaterial = new THREE.MeshPhongMaterial({ color: 0xff3333 });
66
  const payload = new THREE.Mesh(payloadGeometry, payloadMaterial);
67
+ // Initial position for Stage 1
68
  payload.position.set(40, 0, 0);
69
  scene.add(payload);
70
+
71
+ // Create manned vehicle (blue cube)
72
  const vehicleGeometry = new THREE.BoxGeometry(5, 5, 5);
73
  const vehicleMaterial = new THREE.MeshPhongMaterial({ color: 0x3333ff });
74
  const mannedVehicle = new THREE.Mesh(vehicleGeometry, vehicleMaterial);
75
+ // Prepositioned in orbit for docking (for illustration)
76
  mannedVehicle.position.set(-40, 60, 0);
77
  scene.add(mannedVehicle);
78
+
79
+ // Control parameters using dat.GUI
80
  const params = {
81
+ stage: 1, // Stage number (1 to 5)
82
+ spinRate: 0.5, // For Stage 1: radians per second
83
+ thrusterBurn: 2.0, // For Stage 2: thruster burn factor
84
+ despinRate: 0.01, // For Stage 3: rate at which spinRate is reduced
85
+ dockingSpeed: 0.02, // For Stage 4: interpolation speed for docking
86
  nextStage: function() {
87
  if (this.stage < 5) {
88
  this.stage++;
89
+ elapsedTime = 0; // reset stage timer
90
+ console.log("Advancing to Stage " + this.stage);
91
  }
92
  }
93
  };
94
+
95
  const gui = new dat.GUI();
96
  gui.add(params, 'stage', 1, 5, 1).name('Stage').listen();
97
  gui.add(params, 'spinRate', 0.1, 2.0).name('Spin Rate');
 
99
  gui.add(params, 'despinRate', 0.001, 0.05).name('Despin Rate');
100
  gui.add(params, 'dockingSpeed', 0.005, 0.05).name('Docking Speed');
101
  gui.add(params, 'nextStage').name('Next Stage');
102
+
103
  // Animation variables
104
  let elapsedTime = 0;
105
  const clock = new THREE.Clock();
106
+
107
  function animate() {
108
  requestAnimationFrame(animate);
109
  const delta = clock.getDelta();
110
  elapsedTime += delta;
111
+
112
  // Stage 1: Ground-Based Spin-Up Launch
113
  if (params.stage === 1) {
114
  const radius = 40;
 
115
  payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
116
  payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
117
+ payload.position.y = 0;
118
  }
119
  // Stage 2: Orbital Insertion via Thruster Burn
120
  else if (params.stage === 2) {
121
  const radius = 40;
 
122
  const upwardGain = params.thrusterBurn * elapsedTime * 10;
123
  payload.position.x = radius * Math.cos(elapsedTime * params.spinRate);
124
  payload.position.z = radius * Math.sin(elapsedTime * params.spinRate);
125
+ payload.position.y = upwardGain;
126
  }
127
  // Stage 3: On-Orbit Stabilization and Despin
128
  else if (params.stage === 3) {
 
131
  params.spinRate = Math.max(0.1, params.spinRate - params.despinRate * delta);
132
  payload.position.x = orbitRadius * Math.cos(elapsedTime * params.spinRate);
133
  payload.position.z = orbitRadius * Math.sin(elapsedTime * params.spinRate);
134
+ payload.position.y = 20; // Fixed orbital altitude
 
135
  }
136
+ // Stage 4: Rendezvous and Docking with Manned Vehicle
137
  else if (params.stage === 4) {
 
138
  payload.position.lerp(mannedVehicle.position, params.dockingSpeed);
139
  }
140
  // Stage 5: Integrated Mission Operations (Combined Orbit)
141
  else if (params.stage === 5) {
 
142
  const orbitRadius = 80;
143
  const angularSpeed = 0.01;
144
  const angle = elapsedTime * angularSpeed;
 
145
  const center = new THREE.Vector3(0, 20, 0);
146
  const offset = new THREE.Vector3(
147
  orbitRadius * Math.cos(angle),
 
155
  controls.update();
156
  renderer.render(scene, camera);
157
  }
158
+
159
  animate();
160
+
161
+ // Resize handling
162
  window.addEventListener("resize", () => {
163
  camera.aspect = window.innerWidth / window.innerHeight;
164
  camera.updateProjectionMatrix();