24:null 25:["$","title",null,{"children":"3D Solar System Model Using Three.js | Christophe Yamahata | Observable"}] 2a:T4e1,planets = { const data = [ { name: "Mercury", a: 0.387, e: 0.205, i: 7, n: 6.43, o: 48.331, size: 0.38, }, { name: "Venus", a: 0.723, e: 0.007, i: 3.4, n: 1.5, o: 76.68, size: 0.95, }, { name: "Earth", a: 1, e: 0.017, i: 0, n: 1, o: -11.26, size: 1, }, { name: "Mars", a: 1.524, e: 0.0935, i: 1.85, n: 0.53, o: 49.58, size: 0.53, }, { name: "Jupiter", a: 5.2, e: 0.0487, i: 1.3, n: 0.083, o: 100.46, size: 3, //11.21 }, { name: "Saturn", a: 9.5, e: 0.0565, i: 2.5, n: 0.034, o: 113.665, size: 2.5, //9.45 }, { name: "Uranus", a: 19.2, e: 0.0461, i: 0.8, n: 0.011, o: 74, size: 1.5, //4 }, { name: "Neptune", a: 30.05, e: 0.0100, i: 1.8, n: 0.00552, o: 131.783, size: 1.5, //3.88 }, { name: "Pluto", a: 39.48, e: 0.2488, i: 17.2, n: 0.0035, o: 110.299, size: 0.8, //0.18 }, ] return data; }2b:T553,// Function to create a circular grid function createCircularGrid(radius, segments, radialLines) { const gridGroup = new THREE.Group(); const circleMaterial = new THREE.LineBasicMaterial({ color: Grid_color, transparent: true, opacity: Grid_opacity }); // Create concentric circles for (let i = 1; i <= segments; i++) { const circleGeometry = new THREE.BufferGeometry(); const vertices = []; const step = (2 * Math.PI) / 64; for (let theta = 0; theta <= 2 * Math.PI; theta += step) { vertices.push((i * radius) / segments * Math.cos(theta), (i * radius) / segments * Math.sin(theta), 0); } circleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); const circle = new THREE.LineLoop(circleGeometry, circleMaterial); gridGroup.add(circle); } // Create radial lines for (let i = 0; i < radialLines; i++) { const angle = (i / radialLines) * 2 * Math.PI; const lineGeometry = new THREE.BufferGeometry(); const vertices = [0, 0, 0, Math.cos(angle) * radius, Math.sin(angle) * radius, 0]; lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); const line = new THREE.Line(lineGeometry, circleMaterial); gridGroup.add(line); } return gridGroup; }2c:T152e,// Create scene scene = { let scene = new THREE.Scene(); let renderer = new THREE.WebGLRenderer(); // Define scene background scene.background = new THREE.Color(BKG_color); // Ambient light const ambient = new THREE.AmbientLight(0xffffff); scene.add(ambient); // Circular grid if(Display_grid) { // Add a circular grid to the scene const grid = createCircularGrid(500, 100, 72); // (radius, number of concentric circles, number of radial lines) scene.add(grid); grid.rotation.x = Math.PI/2; grid.position.y = -0.1; scene.add(grid); } // Sun let sun = new THREE.Mesh( new THREE.SphereGeometry(4*earth_size, 32, 16), new THREE.MeshLambertMaterial({ color: "yellow" }) ); scene.add(sun); // Planets const planetsAndOrbits = []; planets.forEach(planet => { // Create the planet mesh let planetMesh = new THREE.Mesh( new THREE.SphereGeometry(planet.size*earth_size, 32, 16), new THREE.MeshLambertMaterial({ color: planet.name == "Earth"? Earth_color: Planets_color }) ); planetMesh.position.x = planet.a * 10; // Scale the distance scene.add(planetMesh); // Create the planet's orbit let ellipse = new THREE.EllipseCurve(0, 0, planet.a * 10, planet.a * 10 * (1 - planet.e)); let orbit = new THREE.Line( new THREE.BufferGeometry().setFromPoints(ellipse.getSpacedPoints(100)), new THREE.LineBasicMaterial({ color: planet.name == "Earth"? Earth_orbit_color : Planets_orbits_color, transparent: true, opacity: orbit_opacity }) ); orbit.rotation.x = -Math.PI * 0.5 + Math.PI * planet.i/180; orbit.rotation.z = Math.PI * planet.o/180; scene.add(orbit); planetsAndOrbits.push({ planetMesh, ellipse, orbit, speed: planet.n }); }); // Comet // The parameters have been adjusted manually const orbitalPeriod = 0.8; const eccentricity = 0.5; const a_comet = 40; const b_comet = -10; const offset_x_comet = -35; const offset_y_comet = -12.8; const offset_z_comet = 0; const inclination = 160; const comet = new THREE.Mesh( new THREE.IcosahedronGeometry(0.2, 0), new THREE.MeshLambertMaterial({ color: Comet_color }) ); comet.scale.set(2, 1.5, 1); scene.add(comet); // Elliptical path const ellipseComet = new THREE.EllipseCurve( 0, 0, // ax, aY a_comet, b_comet, // xRadius, yRadius ); const orbitComet = new THREE.Line( new THREE.BufferGeometry().setFromPoints(ellipseComet.getSpacedPoints(5000)), new THREE.LineBasicMaterial({ color: Comet_orbit_color, transparent: true, opacity: orbit_opacity }) ); orbitComet.position.x = offset_x_comet // Correct position orbitComet.position.y = offset_y_comet; // Correct position orbitComet.position.z = offset_z_comet; // Correct position orbitComet.rotation.x = -Math.PI * 0.5; // Correct orientation orbitComet.rotation.y = Math.PI * inclination/180; scene.add(orbitComet); // Comet trail const trailLength = 50; const trailGeometry = new THREE.BufferGeometry(); const trailPositions = new Float32Array(trailLength * 3); trailGeometry.setAttribute('position', new THREE.BufferAttribute(trailPositions, 3)); const cometTrail = new THREE.Line(trailGeometry, new THREE.LineBasicMaterial({ color: 0x00ff00, transparent: true, opacity: Display_tail? 1: 0, })); scene.add(cometTrail); let clock = new THREE.Clock(); let v = new THREE.Vector3(); renderer.setAnimationLoop(() => { let t = (clock.getElapsedTime() * 0.05); planetsAndOrbits.forEach(({ planetMesh, ellipse, orbit, speed }) => { let v = new THREE.Vector3(); ellipse.getPoint((t * speed) % 1, v); planetMesh.position.copy(v); planetMesh.position.applyMatrix4(orbit.matrixWorld); }); // Comet // Calculate mean anomaly const meanAnomaly = (2 * Math.PI / orbitalPeriod) * (t % orbitalPeriod); // Calculate eccentric anomaly const eccentricAnomaly = calculateEccentricAnomaly(meanAnomaly, eccentricity); // Calculate true anomaly const trueAnomaly = calculateTrueAnomaly(eccentricAnomaly, eccentricity); // Calculate position on ellipse const x = ellipseComet.yRadius * Math.sin(trueAnomaly); const y = ellipseComet.xRadius * Math.cos(trueAnomaly); // Set comet position const position = new THREE.Vector3(x, y, 0); position.applyAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2); // Rotate by 90° along the z-axis position.applyMatrix4(orbitComet.matrixWorld); // Apply the orbit's world matrix comet.position.copy(position); // Update trail trailPositions[0] = 0; trailPositions[1] = 0; trailPositions[2] = 0; trailPositions[3] = comet.position.x; trailPositions[4] = comet.position.y; trailPositions[5] = comet.position.z; for (let i = trailLength - 2; i > 0; i--) { trailPositions[i * 3] = trailPositions[(i - 1) * 3]; trailPositions[i * 3 + 1] = trailPositions[(i - 1) * 3 + 1]; trailPositions[i * 3 + 2] = trailPositions[(i - 1) * 3 + 2]; } trailPositions[trailLength*3-3] = 0 trailPositions[trailLength*3-2] = 0; trailPositions[trailLength*3-1] = 0; trailGeometry.attributes.position.needsUpdate = true; }) return scene; }2d:[] 28:{"id":"213c6c09c8cbe49f","slug":"3d-solar-system-model-using-three-js","title":"3D Solar System Model Using Three.js","thumbnail":"437b2687b7505d3a9a750bec8f1bf91293e3e9b6b5b79fda8933e27307ab6add","access_level":"public","create_time":"$D2024-06-04T09:06:31.718Z","update_time":"$D2024-06-05T13:53:57.127Z","view_time":null,"first_public_time":"$D2024-06-05T13:58:02.438Z","fork":{"id":"ca982cc2875f0f82","slug":"embedding-3d-models-using-three-js","title":"Embedding 3D models using three.js","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":3032,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6f8011976c15eeed","slug":"astronomy","title":"Astronomy","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"3D Solar System Model Using Three.js","cells":[{"id":0,"value":"# 3D Solar System Model Using *Three.js*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2712,"value":"

\n This very simplified model of the solar system, although not to scale, highlights the pronounced elliptical orbit of comets like Halley's Comet (Halley-type comets).\n

\nThe 3D animation is designed to illustrate Kepler's Second Law of Planetary Motion, also known as the Law of Equal Areas. According to this law, the line joining the orbiting body and the Sun sweeps out equal areas during equal intervals of time. Consequently, the comet moves fastest as it approaches perihelion (closest point to the Sun) and slowest near aphelion (farthest point from the Sun).\n

\nThis model was created using the JavaScript library three.js, which is well-suited for embedding 3D animations.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2119,"value":"{\n // See also: https://observablehq.com/@mbostock/fullscreen-canvas\n return htl.html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"viewof BKG_color = Inputs.color({label: \"Background color\", value: \"#2b3036\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2065,"value":"viewof orbit_opacity = Inputs.range([0,1], {step: 0.1, value: 0.5, label: \"Orbits opacity\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"viewof Grid_color = Inputs.color({label: \"Grid color\", value: \"#9e2e2e\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2092,"value":"viewof Grid_opacity = Inputs.range([0.2,1], {step: 0.05, value: 0.3, label: \"Grid opacity\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"viewof Display_grid = Inputs.toggle({label: \"Display the grid\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2780,"value":"viewof Display_tail = Inputs.toggle({label: htl.html`Display a trail (Law
of Equal Areas)`, value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1717,"value":"### three.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"THREE = {\n // import threejs\n const three = await require(\"three@0.139.2\");\n window.THREE = three;\n\n // import plugins\n await require(\"three@0.139.2/examples/js/controls/OrbitControls.js\").catch((e) => { console.warn(e) });\n\n\n return three;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1801,"value":"### Scene","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2794,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2269,"value":"// Function to calculate the eccentric anomaly\nfunction calculateEccentricAnomaly(meanAnomaly, eccentricity) {\n let E = meanAnomaly;\n for (let i = 0; i < 5; i++) { // Iterate to improve approximation\n E = meanAnomaly + eccentricity * Math.sin(E);\n }\n return E;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2228,"value":"// Function to calculate true anomaly from eccentric anomaly\nfunction calculateTrueAnomaly(eccentricAnomaly, eccentricity) {\n return 2 * Math.atan2(\n Math.sqrt(1 + eccentricity) * Math.sin(eccentricAnomaly / 2),\n Math.sqrt(1 - eccentricity) * Math.cos(eccentricAnomaly / 2)\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2490,"value":"// Camera settings\ncamera = {\n const fov = 30;\n const aspect = width / height;\n const near = 10;\n const far = 1500; // Far clipping plane\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(-60,20,-50) ;\n \n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"// Create renderer\nrenderer = {\n \n const renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: true,\n });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n\n // initial controls\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.set(0, -10, 0); // Adjust the target position for panning\n\n // Set the maximum zoom levels\n controls.minDistance = 50;\n controls.maxDistance = 1000;\n \n // Manually trigger an update of OrbitControls\n controls.update();\n \n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2583,"value":"{\n while (true) {\n renderer.render(scene, camera);\n yield null;\n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2591,"value":"### Scene settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"height = width*0.65","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"viewof earth_size = Inputs.range([0.05,0.5], {step: 0.05, value: 0.3, label: \"Size of Earth\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"viewof Comet_color = Inputs.color({label: \"Comet color\", value: \"#1fc5d1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1923,"value":"viewof Comet_orbit_color = Inputs.color({label: \"Comet orbit\", value: \"#5500ff\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"viewof Earth_color = Inputs.color({label: \"Earth color\", value: \"#2a6398\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2124,"value":"viewof Earth_orbit_color = Inputs.color({label: \"Earth orbit\", value: \"#7ea9dd\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1989,"value":"viewof Planets_color = Inputs.color({label: \"Planets color\", value: \"#cf3070\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1918,"value":"viewof Planets_orbits_color = Inputs.color({label: \"Planets Orbits\", value: \"#b8b8b8\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 29:"$28:body"