Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

App Files Community
eaglelandsonce commited on
Commit
f9393f0
·
verified ·
1 Parent(s): c528bbf

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +34 -46
index.html CHANGED
@@ -2,86 +2,74 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <title>3D Solar System with Three.js</title>
6
  <style>
7
  body {
8
  margin: 0;
9
  overflow: hidden;
 
10
  }
11
  </style>
12
  </head>
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();
21
 
22
- // Camera setup
23
  const camera = new THREE.PerspectiveCamera(
24
  75,
25
  window.innerWidth / window.innerHeight,
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
- // Helper function to create a planet
46
- function createPlanet(size, color, distance) {
47
- const geometry = new THREE.SphereGeometry(size, 32, 32);
48
- const material = new THREE.MeshPhongMaterial({ color });
49
- const mesh = new THREE.Mesh(geometry, material);
50
- mesh.position.x = distance;
51
- return mesh;
52
- }
53
 
54
- // Sun
55
- const sun = createPlanet(5, 0xffff00, 0);
56
- scene.add(sun);
 
 
57
 
58
- // Planets
59
- const planets = [];
60
- planets.push(createPlanet(1, 0xaaaaaa, 10)); // Mercury
61
- planets.push(createPlanet(1.2, 0xff4500, 15)); // Venus
62
- planets.push(createPlanet(1.3, 0x0000ff, 20)); // Earth
63
- planets.push(createPlanet(1.1, 0xff0000, 25)); // Mars
64
-
65
- planets.forEach((planet) => {
66
- scene.add(planet);
67
- });
68
 
69
  // Animation loop
70
  function animate() {
71
  requestAnimationFrame(animate);
72
 
73
- // Rotate the sun
74
- sun.rotation.y += 0.001;
75
-
76
- // Rotate planets around the sun
77
- planets.forEach((planet, index) => {
78
- const speed = 0.01 + index * 0.005;
79
- const distance = planet.position.x;
80
- const angle = Date.now() * speed * 0.001;
81
- planet.position.x = distance * Math.cos(angle);
82
- planet.position.z = distance * Math.sin(angle);
83
- planet.rotation.y += 0.01;
84
- });
85
 
86
  controls.update();
87
  renderer.render(scene, camera);
@@ -89,8 +77,8 @@
89
 
90
  animate();
91
 
92
- // Handle window resize
93
- window.addEventListener('resize', () => {
94
  camera.aspect = window.innerWidth / window.innerHeight;
95
  camera.updateProjectionMatrix();
96
  renderer.setSize(window.innerWidth, window.innerHeight);
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <title>Rocket Orbiting Earth - Three.js Simulation</title>
6
  <style>
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
+ background-color: black;
11
  }
12
  </style>
13
  </head>
14
  <body>
15
+ <!-- Load Three.js -->
16
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
17
+ <!-- Load OrbitControls -->
18
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
19
  <script>
20
+ // Initialize the scene
21
  const scene = new THREE.Scene();
22
 
23
+ // Create camera
24
  const camera = new THREE.PerspectiveCamera(
25
  75,
26
  window.innerWidth / window.innerHeight,
27
  0.1,
28
  1000
29
  );
30
+ camera.position.set(0, 50, 150);
31
 
32
+ // Create renderer
33
  const renderer = new THREE.WebGLRenderer({ antialias: true });
34
  renderer.setSize(window.innerWidth, window.innerHeight);
35
  document.body.appendChild(renderer.domElement);
36
 
37
+ // Add OrbitControls for interactivity
38
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
39
 
40
+ // Add lighting
41
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
42
  scene.add(ambientLight);
43
+
44
+ const pointLight = new THREE.PointLight(0xffffff, 1.2);
45
+ pointLight.position.set(50, 50, 50);
46
  scene.add(pointLight);
47
 
48
+ // Create Earth
49
+ const earthGeometry = new THREE.SphereGeometry(30, 32, 32);
50
+ const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233ff });
51
+ const earth = new THREE.Mesh(earthGeometry, earthMaterial);
52
+ scene.add(earth);
 
 
 
53
 
54
+ // Create Rocket (represented as a small red sphere)
55
+ const rocketGeometry = new THREE.SphereGeometry(2, 16, 16);
56
+ const rocketMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
57
+ const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
58
+ scene.add(rocket);
59
 
60
+ // Orbit parameters
61
+ const orbitRadius = 50; // Distance from Earth
62
+ const orbitSpeed = 0.005; // Speed of orbit
 
 
 
 
 
 
 
63
 
64
  // Animation loop
65
  function animate() {
66
  requestAnimationFrame(animate);
67
 
68
+ // Update rocket position
69
+ const time = Date.now() * 0.001; // Time in seconds
70
+ rocket.position.x = orbitRadius * Math.cos(time * orbitSpeed);
71
+ rocket.position.z = orbitRadius * Math.sin(time * orbitSpeed);
72
+ rocket.position.y = 0; // Keep it at the same altitude
 
 
 
 
 
 
 
73
 
74
  controls.update();
75
  renderer.render(scene, camera);
 
77
 
78
  animate();
79
 
80
+ // Handle window resizing
81
+ window.addEventListener("resize", () => {
82
  camera.aspect = window.innerWidth / window.innerHeight;
83
  camera.updateProjectionMatrix();
84
  renderer.setSize(window.innerWidth, window.innerHeight);