Hugging Face's logo

Spaces:
eaglelandsonce
/
AIstronauts_Launch_System
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +49 -10
index.html CHANGED
@@ -2,7 +2,7 @@
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,6 +13,8 @@
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,27 +26,64 @@
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
 
 
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;
 
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
  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);
88
  }
89