solar system

vinayakchandra · Jun 15, 2024 · 0e51219 · 0e51219
1 parent 0447efa
commit 0e51219
Show file tree

Hide file tree

Showing 22 changed files with 233 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>3D-Solar-System</title>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+        "jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+      }
+    }
+  </script>
+</head>
+<body>
+  <script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,123 @@
+import * as THREE from "three";
+import {OrbitControls} from 'jsm/controls/OrbitControls.js';
+import getPlanet from './src/makePlanet.js'
+import getSun from './src/makeSun.js'
+import addStar from './src/makeStars.js'
+
+const w = window.innerWidth;
+const h = window.innerHeight;
+
+//scene
+const scene = new THREE.Scene();
+
+//camera
+const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
+camera.position.z = 5;
+const cameraDistance = 4;
+let useAnimatedCamera = true;
+
+//renderer
+const renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setSize(w, h);
+document.body.appendChild(renderer.domElement);
+// THREE.ColorManagement.enabled = true;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
+
+//3d control
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.03;
+
+//light
+const hemiLight = new THREE.DirectionalLight(0x0099ff, 1);
+hemiLight.position.set(0, 1, 0);
+scene.add(hemiLight);
+
+// stars
+const stars = addStar(2000);
+scene.add(stars);
+
+//solar system
+const solarSystem = new THREE.Group();
+solarSystem.userData.update = (t) => {
+  solarSystem.children.forEach((child) => {
+    child.userData.update?.(t);
+  });
+};
+scene.add(solarSystem);
+
+//sun
+const sun = getSun();
+solarSystem.add(sun);
+
+//mercury
+const mercury = getPlanet({size: 0.1, distance: 1.25, img: "mercury.png"});
+solarSystem.add(mercury);
+
+//venus
+const venus = getPlanet({size: 0.2, distance: 1.65, img: "venus.png"});
+solarSystem.add(venus);
+
+//moon
+const moon = getPlanet({size: 0.08, distance: 0.6, img: "moon.png",bumpPath:"moonbump4k.jpg"});
+solarSystem.add(moon);
+//earth
+const earth = getPlanet({children: [moon], size: 0.225, distance: 2.1, img: '00_earthmap1k.jpg', bumpPath:"01_earthbump1k.jpg"});
+solarSystem.add(earth);
+
+//mars
+const mars = getPlanet({size: 0.15, distance: 2.45, img: 'mars.png'});
+solarSystem.add(mars);
+
+//jupiter
+const jupiter = getPlanet({size: 0.5, distance: 2.95, img: 'jupiter.png'});
+solarSystem.add(jupiter);
+
+//saturn
+const sRingGeo = new THREE.TorusGeometry(0.6, 0.15, 8, 64);
+const sRingMat = new THREE.MeshStandardMaterial();
+const saturnRing = new THREE.Mesh(sRingGeo, sRingMat);
+saturnRing.scale.z = 0.1;
+const saturn = getPlanet({children: [saturnRing], size: 0.35, distance: 3.55, img: 'saturn.png'});
+solarSystem.add(saturn);
+
+//uranus
+const uranus = getPlanet({children: [], size: 0.3, distance: 4.05, img: 'uranus.png'});
+solarSystem.add(uranus);
+
+//neptune
+const neptune = getPlanet({size: 0.3, distance: 4.55, img: 'neptune.png'});
+solarSystem.add(neptune);
+
+function animate(t = 0) {
+  requestAnimationFrame(animate);
+  stars.rotation.y += 0.0002;
+  let time = t * 0.0005;
+  solarSystem.userData.update(time);
+  renderer.render(scene, camera);
+  if (useAnimatedCamera) {
+    let time = t * 0.0002;
+    camera.position.x = Math.cos(time * 0.9) * cameraDistance;
+    camera.position.y = Math.cos(time * 0.9) * 2;
+    camera.position.z = Math.sin(time * 0.9) * cameraDistance;
+    camera.lookAt(0, 0, 0);
+  } else {
+    controls.update();
+  }
+  document.addEventListener('mousedown', () => {
+    useAnimatedCamera = false;
+  });
+  document.addEventListener('dblclick', () => {
+    useAnimatedCamera = true;
+  });
+}
+
+function handleWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+animate();
+window.addEventListener('resize', handleWindowResize, false);
diff --git a/src/makePlanet.js b/src/makePlanet.js
@@ -0,0 +1,50 @@
+import * as THREE from "three";
+
+const texLoader = new THREE.TextureLoader();
+const geo = new THREE.IcosahedronGeometry(1, 10);
+
+function getPlanet({children = [], distance = 0, img = '', size = 1,bumpPath=""}) {
+  const orbitGroup = new THREE.Group();
+  orbitGroup.rotation.x = Math.random() * Math.PI * 2;
+
+  const path = `./textures/${img}`;
+  const bump_path = `./textures/${bumpPath}`;
+  const map = texLoader.load(path);
+  const planetMat = new THREE.MeshStandardMaterial({
+    map,
+    bumpMap: texLoader.load(bump_path),
+  });
+  const planet = new THREE.Mesh(geo, planetMat);
+  planet.scale.setScalar(size);
+
+  const startAngle = Math.random() * Math.PI * 2;
+  // const startAngle = 100;
+  planet.position.x = Math.cos(startAngle) * distance;
+  planet.position.z = Math.sin(startAngle) * distance;
+  // planet.position.x = distance;
+
+  // const planetRimMat = getFresnelMat({ rimHex: 0xffffff, facingHex: 0x000000 });
+  // const planetRimMesh = new THREE.Mesh(geo, planetRimMat);
+  // planetRimMesh.scale.setScalar(1.01);
+  // planet.add(planetRimMesh);
+
+  children.forEach((child) => {
+    child.position.x = Math.cos(startAngle) * distance;
+    child.position.z = Math.sin(startAngle) * distance;
+    orbitGroup.add(child);
+  });
+
+  const rate = Math.random() - 1.0;
+  orbitGroup.userData.update = (t) => {
+    orbitGroup.rotation.y = t * rate;
+    planet.rotation.y -= 0.005;
+    children.forEach((child) => {
+      child.userData.update?.(t);
+    });
+  };
+  orbitGroup.add(planet);
+
+  return orbitGroup;
+}
+
+export default getPlanet;
diff --git a/src/makeStars.js b/src/makeStars.js
@@ -0,0 +1,20 @@
+import * as THREE from "three";
+
+function addStar(size = 500) {
+  const starGeometry = new THREE.BufferGeometry();
+  const startMaterial = new THREE.PointsMaterial({color: 0xffffff, size: 0.1});
+  const star = new THREE.Points(starGeometry, startMaterial);
+
+  const startVertices = [];
+  for (let i = 0; i < size; i++) {
+    const x = (Math.random() - 0.5) * 100;
+    const y = (Math.random() - 0.5) * 100;
+    const z = (Math.random() - 0.5) * 100;
+    startVertices.push(x, y, z);
+  }
+  starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(startVertices, 3))
+
+  return star;
+}
+
+export default addStar;
diff --git a/src/makeSun.js b/src/makeSun.js
@@ -0,0 +1,16 @@
+import * as THREE from "three";
+
+function getSun() {
+  const sunMat = new THREE.MeshStandardMaterial({
+    emissive: 0xFF7000,
+  });
+  const geo = new THREE.IcosahedronGeometry(1, 16);
+  const sun = new THREE.Mesh(geo, sunMat);
+
+  const sunLight = new THREE.PointLight(0xFFF2CC, 50);
+  sun.add(sunLight);
+
+  return sun;
+}
+
+export default getSun;
diff --git a/textures/00_earthmap1k.jpg b/textures/00_earthmap1k.jpg
diff --git a/textures/01_earthbump1k.jpg b/textures/01_earthbump1k.jpg
diff --git a/textures/02_earthspec1k.jpg b/textures/02_earthspec1k.jpg
diff --git a/textures/03_earthlights1k.jpg b/textures/03_earthlights1k.jpg
diff --git a/textures/04_earthcloudmap.jpg b/textures/04_earthcloudmap.jpg
diff --git a/textures/05_earthcloudmaptrans.jpg b/textures/05_earthcloudmaptrans.jpg
diff --git a/textures/earth.png b/textures/earth.png
diff --git a/textures/jupiter.png b/textures/jupiter.png
diff --git a/textures/mars.png b/textures/mars.png
diff --git a/textures/mercury.png b/textures/mercury.png
diff --git a/textures/moon.png b/textures/moon.png
diff --git a/textures/moonbump4k.jpg b/textures/moonbump4k.jpg
diff --git a/textures/moonmap4k.jpg b/textures/moonmap4k.jpg
diff --git a/textures/neptune.png b/textures/neptune.png
diff --git a/textures/saturn.png b/textures/saturn.png
diff --git a/textures/uranus.png b/textures/uranus.png
diff --git a/textures/venus.png b/textures/venus.png