Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +31 -16
index.html CHANGED
@@ -13,15 +13,18 @@
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 -->
27
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
@@ -29,12 +32,17 @@
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 });
@@ -42,13 +50,12 @@
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);
@@ -72,26 +79,27 @@
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');
@@ -100,6 +108,13 @@
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();
@@ -131,7 +146,7 @@
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) {
@@ -158,7 +173,7 @@
158
 
159
  animate();
160
 
161
- // Resize handling
162
  window.addEventListener("resize", () => {
163
  camera.aspect = window.innerWidth / window.innerHeight;
164
  camera.updateProjectionMatrix();
 
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;
20
+ right: 0px;
21
+ z-index: 100;
22
  }
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 -->
30
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
 
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,
43
+ 0.1,
44
+ 10000
45
+ );
46
  camera.position.set(0, 50, 150);
47
 
48
  const renderer = new THREE.WebGLRenderer({ antialias: true });
 
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);
 
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');
 
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();
 
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) {
 
173
 
174
  animate();
175
 
176
+ // Handle window resize events
177
  window.addEventListener("resize", () => {
178
  camera.aspect = window.innerWidth / window.innerHeight;
179
  camera.updateProjectionMatrix();