Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

App Files Community
eaglelandsonce commited on
Commit
58918fc
·
verified ·
1 Parent(s): ee44b0e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +10 -33
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <title>Three.js Orbital Simulation</title>
6
  <style>
7
  body {
8
  margin: 0;
@@ -13,8 +13,6 @@
13
  <body>
14
  <!-- Include Three.js -->
15
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
16
- <!-- Include OrbitControls -->
17
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
18
  <script>
19
  // Scene setup
20
  const scene = new THREE.Scene();
@@ -26,48 +24,27 @@
26
  0.1,
27
  1000
28
  );
29
- camera.position.z = 50;
30
 
31
  // Renderer setup
32
  const renderer = new THREE.WebGLRenderer({ antialias: true });
33
  renderer.setSize(window.innerWidth, window.innerHeight);
34
  document.body.appendChild(renderer.domElement);
35
 
36
- // OrbitControls setup
37
- const controls = new THREE.OrbitControls(camera, renderer.domElement);
38
-
39
- // Lighting
40
- const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
41
- scene.add(ambientLight);
42
- const pointLight = new THREE.PointLight(0xffffff, 1, 0);
43
- scene.add(pointLight);
44
-
45
- // Central planet
46
- const planetGeometry = new THREE.SphereGeometry(10, 32, 32);
47
- const planetMaterial = new THREE.MeshPhongMaterial({ color: 0x0077ff });
48
- const planet = new THREE.Mesh(planetGeometry, planetMaterial);
49
- scene.add(planet);
50
-
51
- // Orbiting satellite
52
- const satelliteGeometry = new THREE.SphereGeometry(1, 16, 16);
53
- const satelliteMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
54
- const satellite = new THREE.Mesh(satelliteGeometry, satelliteMaterial);
55
- scene.add(satellite);
56
-
57
- // Animation parameters
58
- const orbitRadius = 30;
59
- const orbitSpeed = 0.01; // Radians per frame
60
 
61
  // Animation loop
62
  function animate() {
63
  requestAnimationFrame(animate);
64
 
65
- // Update satellite position
66
- const time = Date.now() * 0.001;
67
- satellite.position.x = orbitRadius * Math.cos(time * orbitSpeed);
68
- satellite.position.z = orbitRadius * Math.sin(time * orbitSpeed);
69
 
70
- controls.update();
71
  renderer.render(scene, camera);
72
  }
73
 
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <title>Three.js Rotating Cube</title>
6
  <style>
7
  body {
8
  margin: 0;
 
13
  <body>
14
  <!-- Include Three.js -->
15
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
 
 
16
  <script>
17
  // Scene setup
18
  const scene = new THREE.Scene();
 
24
  0.1,
25
  1000
26
  );
27
+ camera.position.z = 5;
28
 
29
  // Renderer setup
30
  const renderer = new THREE.WebGLRenderer({ antialias: true });
31
  renderer.setSize(window.innerWidth, window.innerHeight);
32
  document.body.appendChild(renderer.domElement);
33
 
34
+ // Cube geometry and material
35
+ const geometry = new THREE.BoxGeometry();
36
+ const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
37
+ const cube = new THREE.Mesh(geometry, material);
38
+ scene.add(cube);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
 
40
  // Animation loop
41
  function animate() {
42
  requestAnimationFrame(animate);
43
 
44
+ // Rotate the cube
45
+ cube.rotation.x += 0.01;
46
+ cube.rotation.y += 0.01;
 
47
 
 
48
  renderer.render(scene, camera);
49
  }
50