2b:null 2c:["$","title",null,{"children":"Space | Allen Q | Observable"}] 31:T1a15,solarSystem = { const sun = { name: "Sun", type: "Star", radiusKm: 696340, distanceAU: 0, color: 0xffc857, composition: "Approximately 73% hydrogen and 25% helium by mass, with small amounts of heavier elements.", description: "The star at the center of the Solar System. It contains almost all of the system's mass." }; const planets = [ { name: "Mercury", type: "Terrestrial planet", radiusKm: 2439.7, distanceAU: 0.387, orbitalPeriodDays: 87.97, color: 0xa8a29e, phase: 0.30, composition: "Large iron-rich core surrounded by a silicate mantle and crust.", moons: [] }, { name: "Venus", type: "Terrestrial planet", radiusKm: 6051.8, distanceAU: 0.723, orbitalPeriodDays: 224.70, color: 0xd6a85f, phase: 1.25, composition: "Rocky silicate planet with an iron core and a very dense carbon-dioxide atmosphere.", moons: [] }, { name: "Earth", type: "Terrestrial planet", radiusKm: 6371.0, distanceAU: 1.000, orbitalPeriodDays: 365.26, color: 0x4d8fd8, phase: 2.10, composition: "Iron-rich core, silicate mantle and crust, liquid-water oceans, and a nitrogen-oxygen atmosphere.", moons: [ { name: "Moon", radiusKm: 1737.4, distanceKm: 384400, composition: "Rocky silicate body with a small metallic core." } ] }, { name: "Mars", type: "Terrestrial planet", radiusKm: 3389.5, distanceAU: 1.524, orbitalPeriodDays: 686.98, color: 0xc15d3b, phase: 2.85, composition: "Rocky silicate planet rich in iron-bearing minerals, with a thin carbon-dioxide atmosphere.", moons: [ { name: "Phobos", radiusKm: 11.1, distanceKm: 9376, composition: "Small irregular rocky body." }, { name: "Deimos", radiusKm: 6.2, distanceKm: 23463, composition: "Small irregular rocky body." } ] }, { name: "Jupiter", type: "Gas giant", radiusKm: 69911, distanceAU: 5.203, orbitalPeriodDays: 4332.59, color: 0xc9a47c, phase: 3.65, composition: "Primarily hydrogen and helium, with a dense interior containing heavier elements.", moons: [ { name: "Io", radiusKm: 1821.6, distanceKm: 421700, composition: "Rocky, sulfur-rich volcanic world." }, { name: "Europa", radiusKm: 1560.8, distanceKm: 671100, composition: "Rocky interior covered by a water-ice shell." }, { name: "Ganymede", radiusKm: 2634.1, distanceKm: 1070400, composition: "Rock and water ice with a metallic core." }, { name: "Callisto", radiusKm: 2410.3, distanceKm: 1882700, composition: "Mixture of rock and water ice." } ] }, { name: "Saturn", type: "Gas giant", radiusKm: 58232, distanceAU: 9.537, orbitalPeriodDays: 10759.2, color: 0xd8c58f, phase: 4.45, rings: true, composition: "Predominantly hydrogen and helium surrounding a denser interior.", moons: [ { name: "Mimas", radiusKm: 198.2, distanceKm: 185539, composition: "Primarily water ice with some rock." }, { name: "Enceladus", radiusKm: 252.1, distanceKm: 238037, composition: "Water-ice surface over a rocky interior and subsurface ocean." }, { name: "Tethys", radiusKm: 531.1, distanceKm: 294672, composition: "Predominantly water ice." }, { name: "Dione", radiusKm: 561.4, distanceKm: 377415, composition: "Water ice mixed with rocky material." }, { name: "Rhea", radiusKm: 763.8, distanceKm: 527108, composition: "Mostly water ice with rocky material." }, { name: "Titan", radiusKm: 2574.7, distanceKm: 1221870, composition: "Rock and water ice with a dense nitrogen-rich atmosphere." }, { name: "Iapetus", radiusKm: 734.5, distanceKm: 3560820, composition: "Water ice and rocky material." } ] }, { name: "Uranus", type: "Ice giant", radiusKm: 25362, distanceAU: 19.191, orbitalPeriodDays: 30688.5, color: 0x77cdd6, phase: 5.25, rings: true, composition: "Hydrogen-helium atmosphere above an interior rich in water, ammonia, methane and heavier materials.", moons: [ { name: "Miranda", radiusKm: 235.8, distanceKm: 129390, composition: "Water ice and rocky material." }, { name: "Ariel", radiusKm: 578.9, distanceKm: 190900, composition: "Water ice and rocky material." }, { name: "Umbriel", radiusKm: 584.7, distanceKm: 266000, composition: "Water ice and rocky material." }, { name: "Titania", radiusKm: 788.9, distanceKm: 436300, composition: "Approximately equal amounts of water ice and rock." }, { name: "Oberon", radiusKm: 761.4, distanceKm: 583500, composition: "Water ice and rocky material." } ] }, { name: "Neptune", type: "Ice giant", radiusKm: 24622, distanceAU: 30.07, orbitalPeriodDays: 60182, color: 0x4169d8, phase: 6.05, composition: "Hydrogen-helium atmosphere above an interior rich in water, ammonia, methane and heavier elements.", moons: [ { name: "Triton", radiusKm: 1353.4, distanceKm: 354759, composition: "Icy body rich in nitrogen, water ice and rocky material." }, { name: "Nereid", radiusKm: 170, distanceKm: 5513400, composition: "Dark icy and rocky material." } ] } ]; return { sun, planets }; }32:Tc80c,cosmicNavigator = { // ============================================================ // DIMENSIONS // ============================================================ const W = Math.max( 320, width ); const H = Math.max( 560, Math.min( 760, W * 0.68 ) ); // Use exactly the same date for all // calculated minor-body positions. const simulationDate = new Date(); // ============================================================ // CONTAINER // ============================================================ const container = html`

Cosmic Navigator

Destination

Show orbits Show comets, asteroids & dwarf planets Show labels

Solar-system distances and body sizes are visually compressed. Physical values are shown in the information panel.

`; // ============================================================ // DOM REFERENCES // ============================================================ const canvasHost = container.querySelector( ".space-canvas" ); const labelsHost = container.querySelector( ".labels" ); const info = container.querySelector( ".info" ); const destination = container.querySelector( ".destination" ); const flyButton = container.querySelector( ".fly" ); const homeButton = container.querySelector( ".home" ); const orbitToggle = container.querySelector( ".toggle-orbits" ); const labelToggle = container.querySelector( ".toggle-labels" ); const minorToggle = container.querySelector( ".toggle-minor" ); // ============================================================ // RENDERER // ============================================================ const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2 ) ); renderer.setSize( W, H ); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; canvasHost.append( renderer.domElement ); // ============================================================ // SCENE // ============================================================ const scene = new THREE.Scene(); scene.background = new THREE.Color( 0x02050d ); // ============================================================ // CAMERA // ============================================================ const camera = new THREE.PerspectiveCamera( 50, W / H, 0.05, 5000 ); camera.position.set( 0, 185, 330 ); // ============================================================ // ORBIT CONTROLS // ============================================================ const controls = new OrbitControls( camera, renderer.domElement ); controls.enableDamping = true; controls.dampingFactor = 0.06; controls.enablePan = true; controls.minDistance = 2; controls.maxDistance = 1800; controls.target.set( 0, 0, 0 ); controls.update(); // ============================================================ // LIGHTING // ============================================================ const ambient = new THREE.AmbientLight( 0x334155, 1.2 ); scene.add( ambient ); const sunlight = new THREE.PointLight( 0xffffff, 150000, 0, 1.8 ); sunlight.position.set( 0, 0, 0 ); scene.add( sunlight ); // ============================================================ // VISUAL SCALE FUNCTIONS // ============================================================ // ------------------------------------------------------------ // AU -> compressed scene distance // ------------------------------------------------------------ function orbitRadius( au ) { return ( 18 + 55 * Math.log1p( au * 1.3 ) ); } // ------------------------------------------------------------ // Planet radius -> visible scene radius // ------------------------------------------------------------ function visualPlanetRadius( radiusKm ) { return ( 0.65 + Math.pow( radiusKm / 6371, 0.38 ) * 1.15 ); } // ------------------------------------------------------------ // Moon radius -> visible scene radius // ------------------------------------------------------------ function visualMoonRadius( radiusKm ) { return ( 0.20 + 0.62 * Math.sqrt( radiusKm / 2634 ) ); } // ------------------------------------------------------------ // Moon orbital distance -> local visible distance // ------------------------------------------------------------ function visualMoonOrbit( km ) { return ( 3.5 + 4.8 * Math.log10( 1 + km / 100000 ) ); } // ------------------------------------------------------------ // Minor body visual radius // ------------------------------------------------------------ function minorVisualRadius( body ) { if ( body.kind === "dwarfPlanet" ) { return ( 0.75 + Math.pow( body.radiusKm / 1000, 0.35 ) ); } if ( body.kind === "comet" ) { return 0.62; } return ( 0.48 + Math.min( 0.55, Math.pow( body.radiusKm / 500, 0.32 ) ) ); } // ============================================================ // ORBIT MATERIAL // ============================================================ const orbitMaterial = new THREE.LineBasicMaterial({ color: 0x334155, transparent: true, opacity: 0.58 }); // ============================================================ // OBJECT REGISTRIES // ============================================================ const objects = new Map(); const clickable = []; const labels = []; const orbitLines = []; const moonGroups = new Map(); const minorBodyGroups = []; const minorOrbitLines = []; // ============================================================ // LABEL CREATOR // ============================================================ function makeLabel( name, object, kind = "planet" ) { const el = document.createElement( "div" ); el.textContent = name; el.style.position = "absolute"; el.style.transform = "translate(-50%, -50%)"; el.style.whiteSpace = "nowrap"; // ---------------------------------------------------------- // SIZE // ---------------------------------------------------------- if ( kind === "moon" ) { el.style.fontSize = "10px"; } else if ( kind === "comet" ) { el.style.fontSize = "11px"; } else { el.style.fontSize = "11px"; } // ---------------------------------------------------------- // COLOR // ---------------------------------------------------------- if ( kind === "comet" ) { el.style.color = "#7dd3fc"; } else if ( kind === "dwarfPlanet" ) { el.style.color = "#c4b5fd"; } else if ( kind === "asteroid" ) { el.style.color = "#d1d5db"; } else if ( kind === "moon" ) { el.style.color = "#cbd5e1"; } else { el.style.color = "#ffffff"; } el.style.textShadow = "0 1px 4px #000"; labelsHost.append( el ); labels.push({ el, object }); } // ============================================================ // OBJECT REGISTRATION // ============================================================ function registerObject( name, mesh, data, kind, parentPlanet = null ) { const record = { name, mesh, data, kind, parentPlanet }; objects.set( name, record ); mesh.userData.record = record; clickable.push( mesh ); return record; } // ============================================================ // SUN // ============================================================ const sunGeometry = new THREE.SphereGeometry( 8, 48, 32 ); const sunMaterial = new THREE.MeshBasicMaterial({ color: solarSystem.sun.color }); const sunMesh = new THREE.Mesh( sunGeometry, sunMaterial ); scene.add( sunMesh ); registerObject( "Sun", sunMesh, solarSystem.sun, "sun" ); makeLabel( "Sun", sunMesh, "sun" ); // ============================================================ // SUN GLOW // ============================================================ const glowGeometry = new THREE.SphereGeometry( 10.5, 32, 24 ); const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xffc857, transparent: true, opacity: 0.10, side: THREE.BackSide }); const glow = new THREE.Mesh( glowGeometry, glowMaterial ); scene.add( glow ); // ============================================================ // PLANETS // ============================================================ for ( const planet of solarSystem.planets ) { const distance = orbitRadius( planet.distanceAU ); // ========================================================== // PLANETARY ORBIT // ========================================================== const orbitPoints = []; for ( let i = 0; i < 180; i++ ) { const a = i / 180 * Math.PI * 2; orbitPoints.push( new THREE.Vector3( Math.cos(a) * distance, 0, Math.sin(a) * distance ) ); } const orbitGeometry = new THREE.BufferGeometry() .setFromPoints( orbitPoints ); const orbit = new THREE.LineLoop( orbitGeometry, orbitMaterial ); orbit.userData.minorBody = false; scene.add( orbit ); orbitLines.push( orbit ); // ========================================================== // PLANET GROUP / POSITION // ========================================================== const group = new THREE.Group(); group.position.set( Math.cos( planet.phase ) * distance, 0, Math.sin( planet.phase ) * distance ); scene.add( group ); // ========================================================== // PLANET BODY // ========================================================== const r = visualPlanetRadius( planet.radiusKm ); const geometry = new THREE.SphereGeometry( r, 32, 24 ); const material = new THREE.MeshStandardMaterial({ color: planet.color, roughness: 0.84, metalness: 0 }); const mesh = new THREE.Mesh( geometry, material ); group.add( mesh ); registerObject( planet.name, mesh, planet, "planet" ); makeLabel( planet.name, mesh, "planet" ); // ========================================================== // PLANETARY RINGS // ========================================================== if ( planet.rings ) { const ringGeometry = new THREE.RingGeometry( r * 1.45, r * 2.35, 64 ); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xb9aa85, side: THREE.DoubleSide, transparent: true, opacity: 0.55 }); const rings = new THREE.Mesh( ringGeometry, ringMaterial ); rings.rotation.x = Math.PI / 2; mesh.add( rings ); } // ========================================================== // MOON GROUP // ========================================================== const moonGroup = new THREE.Group(); group.add( moonGroup ); moonGroup.visible = false; moonGroups.set( planet.name, moonGroup ); // ========================================================== // MOONS // ========================================================== planet.moons.forEach( ( moon, index ) => { const moonDistance = visualMoonOrbit( moon.distanceKm ); // ------------------------------------------------------- // MOON ORBIT // ------------------------------------------------------- const moonOrbitPoints = []; for ( let i = 0; i < 100; i++ ) { const a = i / 100 * Math.PI * 2; moonOrbitPoints.push( new THREE.Vector3( Math.cos(a) * moonDistance, 0, Math.sin(a) * moonDistance ) ); } const mg = new THREE.BufferGeometry() .setFromPoints( moonOrbitPoints ); const mm = new THREE.LineBasicMaterial({ color: 0x475569, transparent: true, opacity: 0.45 }); moonGroup.add( new THREE.LineLoop( mg, mm ) ); // ------------------------------------------------------- // MOON BODY // ------------------------------------------------------- const moonMesh = new THREE.Mesh( new THREE.SphereGeometry( visualMoonRadius( moon.radiusKm ), 18, 14 ), new THREE.MeshStandardMaterial({ color: 0xb8b8b8, roughness: 0.9 }) ); const moonAngle = index * 2.17 + planet.phase; moonMesh.position.set( Math.cos( moonAngle ) * moonDistance, 0, Math.sin( moonAngle ) * moonDistance ); moonGroup.add( moonMesh ); registerObject( moon.name, moonMesh, moon, "moon", planet.name ); makeLabel( moon.name, moonMesh, "moon" ); } ); } // ============================================================ // MINOR BODIES // // Comets // Dwarf planets // Asteroids // ============================================================ for ( const body of minorBodies ) { // ========================================================== // 3D ORBIT // ========================================================== const bodyOrbitPoints = keplerTools.orbitPoints( body, orbitRadius, 480 ); const bodyOrbitGeometry = new THREE.BufferGeometry() .setFromPoints( bodyOrbitPoints ); let orbitColor; if ( body.kind === "comet" ) { orbitColor = 0x60a5fa; } else if ( body.kind === "dwarfPlanet" ) { orbitColor = 0xa78bfa; } else { orbitColor = 0x94a3b8; } const bodyOrbitMaterial = new THREE.LineBasicMaterial({ color: orbitColor, transparent: true, opacity: body.kind === "comet" ? 0.46 : 0.32 }); const bodyOrbit = new THREE.LineLoop( bodyOrbitGeometry, bodyOrbitMaterial ); bodyOrbit.userData.minorBody = true; scene.add( bodyOrbit ); orbitLines.push( bodyOrbit ); minorOrbitLines.push( bodyOrbit ); // ========================================================== // CURRENT MODELED POSITION // ========================================================== const state = keplerTools.scenePosition( body, orbitRadius, simulationDate ); const group = new THREE.Group(); group.position.copy( state.position ); scene.add( group ); minorBodyGroups.push( group ); // ========================================================== // BODY SHAPE // ========================================================== const radius = minorVisualRadius( body ); let geometry; if ( body.kind === "dwarfPlanet" ) { geometry = new THREE.SphereGeometry( radius, 28, 20 ); } else { geometry = new THREE.DodecahedronGeometry( radius, 1 ); } const material = new THREE.MeshStandardMaterial({ color: body.color, roughness: body.kind === "comet" ? 1 : 0.88, metalness: 0 }); const mesh = new THREE.Mesh( geometry, material ); group.add( mesh ); // ========================================================== // COMPLETE DATA OBJECT // ========================================================== const objectData = { ...body, modeledDistanceAU: state.rAU, modeledDate: simulationDate .toISOString() .slice( 0, 10 ) }; registerObject( body.name, mesh, objectData, body.kind ); makeLabel( body.commonName, mesh, body.kind ); // ========================================================== // COMET ACTIVITY // ========================================================== if ( body.kind === "comet" ) { // Approximate visualization model. // // Activity rises rapidly when the comet // enters the inner Solar System. const activity = Math.max( 0, Math.min( 1, ( 4.5 - state.rAU ) / 3.5 ) ); if ( activity > 0.02 ) { // ------------------------------------------------------- // COMA // ------------------------------------------------------- const coma = new THREE.Mesh( new THREE.SphereGeometry( radius * ( 2.5 + 3 * activity ), 24, 18 ), new THREE.MeshBasicMaterial({ color: 0xcffafe, transparent: true, opacity: 0.10 + activity * 0.12, side: THREE.BackSide }) ); group.add( coma ); // ------------------------------------------------------- // COMET TAIL // // Solar wind pushes the tail approximately // away from the Sun. // ------------------------------------------------------- const outward = state.position .clone() .normalize(); const tailLength = 4 + 12 * activity; const tailGeometry = new THREE.CylinderGeometry( 0.55 * activity, 0.035, tailLength, 18, 1, true ); const tailMaterial = new THREE.MeshBasicMaterial({ color: 0xbfefff, transparent: true, opacity: 0.12 + activity * 0.18, side: THREE.DoubleSide }); const tail = new THREE.Mesh( tailGeometry, tailMaterial ); tail.position.copy( outward .clone() .multiplyScalar( tailLength / 2 ) ); tail.quaternion .setFromUnitVectors( new THREE.Vector3( 0, 1, 0 ), outward ); group.add( tail ); } } } // ============================================================ // DESTINATION MENU // ============================================================ // ------------------------------------------------------------ // PLANETS // ------------------------------------------------------------ const planetOptions = solarSystem.planets .map( planet => `` ) .join(""); // ------------------------------------------------------------ // MOONS // ------------------------------------------------------------ const moonOptions = solarSystem.planets .flatMap( planet => planet.moons.map( moon => `` ) ) .join(""); // ------------------------------------------------------------ // DWARF PLANETS // ------------------------------------------------------------ const dwarfOptions = minorBodies .filter( d => d.kind === "dwarfPlanet" ) .map( d => `` ) .join(""); // ------------------------------------------------------------ // ASTEROIDS // ------------------------------------------------------------ const asteroidOptions = minorBodies .filter( d => d.kind === "asteroid" ) .map( d => `` ) .join(""); // ------------------------------------------------------------ // COMETS // ------------------------------------------------------------ const cometOptions = minorBodies .filter( d => d.kind === "comet" ) .map( d => `` ) .join(""); destination.innerHTML = ` ${planetOptions} ${moonOptions} ${dwarfOptions} ${asteroidOptions} ${cometOptions} `; // ============================================================ // NUMBER FORMATTER // ============================================================ function formatNumber( value ) { return new Intl.NumberFormat( "en-US", { maximumFractionDigits: 3 } ).format( value ); } // ============================================================ // INFORMATION PANEL // ============================================================ function showInfo( record ) { const { data, kind } = record; // ========================================================== // SUN // ========================================================== if ( kind === "sun" ) { info.innerHTML = `

Sun

Star

Radius
${formatNumber( data.radiusKm )} km

Composition
${data.composition}

${data.description} `; return; } // ========================================================== // PLANET // ========================================================== if ( kind === "planet" ) { info.innerHTML = `

${data.name}

${data.type}

Mean radius
${formatNumber( data.radiusKm )} km

Mean distance from Sun
${data.distanceAU} AU
${formatNumber( Math.round( data.distanceAU * 149597870.7 ) )} km

Orbital period
${formatNumber( data.orbitalPeriodDays )} Earth days

Composition
${data.composition}

Major moons shown
${ data.moons.length ? data.moons .map( m => m.name ) .join(", ") : "None" } `; return; } // ========================================================== // MOON // ========================================================== if ( kind === "moon" ) { info.innerHTML = `

${data.name}

Natural satellite of ${record.parentPlanet}

Mean radius
${formatNumber( data.radiusKm )} km

Mean orbital distance
${formatNumber( data.distanceKm )} km

Composition
${data.composition} `; return; } // ========================================================== // COMET / ASTEROID / DWARF PLANET // ========================================================== if ( kind === "comet" || kind === "asteroid" || kind === "dwarfPlanet" ) { const perihelion = data.aAU * ( 1 - data.eccentricity ); const aphelion = data.aAU * ( 1 + data.eccentricity ); const periodYears = data.periodDays / 365.25; let typeColor; if ( kind === "comet" ) { typeColor = "#7dd3fc"; } else if ( kind === "dwarfPlanet" ) { typeColor = "#c4b5fd"; } else { typeColor = "#d1d5db"; } info.innerHTML = `

${data.commonName}

${data.type}

Mean radius
${formatNumber( data.radiusKm )} km

Semi-major axis
${data.aAU.toFixed(3)} AU

Perihelion
${perihelion.toFixed(3)} AU

Aphelion
${aphelion.toFixed(3)} AU

Orbital eccentricity
${data.eccentricity.toFixed(4)}

Orbital inclination
${data.inclinationDeg.toFixed(2)}°

Orbital period
${periodYears.toFixed(2)} Earth years

Modeled heliocentric distance
${data.modeledDistanceAU.toFixed(2)} AU
Approximate position for ${data.modeledDate}. Two-body orbital propagation, not a JPL Horizons ephemeris.

Composition
${data.composition}

${data.description} `; return; } } // ============================================================ // INITIAL SELECTION // ============================================================ let selected = objects.get( "Sun" ); showInfo( selected ); // ============================================================ // MOON VISIBILITY // ============================================================ function updateMoonVisibility( record ) { // Hide all moon systems first. for ( const group of moonGroups.values() ) { group.visible = false; } // ---------------------------------------------------------- // PLANET SELECTED // ---------------------------------------------------------- if ( record.kind === "planet" ) { const moonGroup = moonGroups.get( record.name ); if ( moonGroup ) { moonGroup.visible = true; } } // ---------------------------------------------------------- // MOON SELECTED // ---------------------------------------------------------- if ( record.kind === "moon" ) { const moonGroup = moonGroups.get( record.parentPlanet ); if ( moonGroup ) { moonGroup.visible = true; } } } // ============================================================ // CAMERA FLIGHT // ============================================================ let flight = null; function flyTo( record ) { selected = record; destination.value = record.name; updateMoonVisibility( record ); showInfo( record ); const target = new THREE.Vector3(); record.mesh.getWorldPosition( target ); const startCamera = camera.position.clone(); const startTarget = controls.target.clone(); let distance; // ---------------------------------------------------------- // CAMERA DISTANCE BY OBJECT TYPE // ---------------------------------------------------------- if ( record.kind === "sun" ) { distance = 42; } else if ( record.kind === "planet" ) { distance = 16; } else if ( record.kind === "dwarfPlanet" ) { distance = 7; } else if ( record.kind === "asteroid" ) { distance = 4; } else if ( record.kind === "comet" ) { distance = 5; } else { distance = 6; } // ---------------------------------------------------------- // PRESERVE VIEWING DIRECTION // ---------------------------------------------------------- let direction = camera.position .clone() .sub( controls.target ) .normalize(); if ( direction.lengthSq() < 0.01 ) { direction .set( 1, 0.45, 1 ) .normalize(); } const endCamera = target .clone() .add( direction .multiplyScalar( distance ) ); flight = { started: performance.now(), duration: 1250, startCamera, startTarget, endCamera, endTarget: target }; } // ============================================================ // RETURN TO SOLAR-SYSTEM VIEW // ============================================================ function solarView() { for ( const group of moonGroups.values() ) { group.visible = false; } flight = { started: performance.now(), duration: 1250, startCamera: camera.position.clone(), startTarget: controls.target.clone(), endCamera: new THREE.Vector3( 0, 185, 330 ), endTarget: new THREE.Vector3( 0, 0, 0 ) }; selected = objects.get( "Sun" ); destination.value = "Sun"; showInfo( selected ); } // ============================================================ // UI EVENTS // ============================================================ // ------------------------------------------------------------ // FLY BUTTON // ------------------------------------------------------------ flyButton.addEventListener( "click", () => { const record = objects.get( destination.value ); if ( record ) { flyTo( record ); } } ); // ------------------------------------------------------------ // DESTINATION CHANGE // ------------------------------------------------------------ destination.addEventListener( "change", () => { const record = objects.get( destination.value ); if ( record ) { showInfo( record ); } } ); // ------------------------------------------------------------ // HOME BUTTON // ------------------------------------------------------------ homeButton.addEventListener( "click", solarView ); // ------------------------------------------------------------ // ORBIT VISIBILITY // ------------------------------------------------------------ orbitToggle.addEventListener( "change", () => { orbitLines.forEach( orbit => { if ( orbit.userData.minorBody ) { orbit.visible = orbitToggle.checked && minorToggle.checked; } else { orbit.visible = orbitToggle.checked; } } ); } ); // ------------------------------------------------------------ // MINOR-BODY VISIBILITY // ------------------------------------------------------------ minorToggle.addEventListener( "change", () => { const visible = minorToggle.checked; minorBodyGroups.forEach( group => { group.visible = visible; } ); minorOrbitLines.forEach( orbit => { orbit.visible = visible && orbitToggle.checked; } ); } ); // ------------------------------------------------------------ // LABEL VISIBILITY // ------------------------------------------------------------ labelToggle.addEventListener( "change", () => { labelsHost.style.display = labelToggle.checked ? "block" : "none"; } ); // ============================================================ // RAYCASTING // ============================================================ const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); renderer.domElement.addEventListener( "pointerdown", event => { const rect = renderer.domElement .getBoundingClientRect(); pointer.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1; pointer.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1; raycaster.setFromCamera( pointer, camera ); const hits = raycaster.intersectObjects( clickable, false ); // Ignore geometrically detectable objects // whose parent groups are hidden. const visibleHit = hits.find( hit => objectActuallyVisible( hit.object ) ); if ( visibleHit ) { const record = visibleHit .object .userData .record; if ( record ) { flyTo( record ); } } } ); // ============================================================ // LABEL PROJECTION // ============================================================ const tempPosition = new THREE.Vector3(); // ------------------------------------------------------------ // CHECK ANCESTOR VISIBILITY // ------------------------------------------------------------ function objectActuallyVisible( object ) { let current = object; while ( current ) { if ( current.visible === false ) { return false; } current = current.parent; } return true; } // ------------------------------------------------------------ // PROJECT 3D POSITIONS TO HTML // ------------------------------------------------------------ function updateLabels() { for ( const label of labels ) { if ( !objectActuallyVisible( label.object ) ) { label.el.style.display = "none"; continue; } label.object .getWorldPosition( tempPosition ); tempPosition.project( camera ); // Behind camera / outside clipping space if ( tempPosition.z < -1 || tempPosition.z > 1 ) { label.el.style.display = "none"; continue; } const x = ( tempPosition.x * 0.5 + 0.5 ) * W; const y = ( - tempPosition.y * 0.5 + 0.5 ) * H; // Hide labels outside the viewport. if ( x < -40 || x > W + 40 || y < -30 || y > H + 30 ) { label.el.style.display = "none"; continue; } label.el.style.display = "block"; label.el.style.left = `${x}px`; label.el.style.top = `${y - 13}px`; } } // ============================================================ // FLIGHT EASING // ============================================================ function ease( t ) { return ( t < 0.5 ? 4 * t * t * t : 1 - Math.pow( -2 * t + 2, 3 ) / 2 ); } // ============================================================ // ANIMATION LOOP // ============================================================ let frame; function animate( time ) { frame = requestAnimationFrame( animate ); // ========================================================== // CAMERA FLIGHT // ========================================================== if ( flight ) { const rawT = ( time - flight.started ) / flight.duration; const t = Math.min( 1, rawT ); const e = ease( t ); camera.position .lerpVectors( flight.startCamera, flight.endCamera, e ); controls.target .lerpVectors( flight.startTarget, flight.endTarget, e ); if ( t >= 1 ) { flight = null; } } // ========================================================== // SUBTLE BODY ROTATION // ========================================================== sunMesh.rotation.y += 0.001; for ( const record of objects.values() ) { if ( record.kind === "planet" ) { record.mesh.rotation.y += 0.002; } if ( record.kind === "dwarfPlanet" ) { record.mesh.rotation.y += 0.0015; } if ( record.kind === "asteroid" ) { record.mesh.rotation.x += 0.0012; record.mesh.rotation.y += 0.0018; } if ( record.kind === "comet" ) { record.mesh.rotation.x += 0.0008; record.mesh.rotation.y += 0.0013; } } controls.update(); updateLabels(); renderer.render( scene, camera ); } // ============================================================ // START // ============================================================ animate( performance.now() ); // ============================================================ // CLEANUP FOR OBSERVABLE // ============================================================ invalidation.then( () => { cancelAnimationFrame( frame ); controls.dispose(); renderer.dispose(); labelsHost.replaceChildren(); } ); return container; }33:T1369,minorBodies = [ // ============================================================ // COMETS // ============================================================ { name: "1P/Halley", commonName: "Halley's Comet", kind: "comet", type: "Periodic comet", radiusKm: 5.5, color: 0x9bdcf2, // Orbital elements aAU: 17.834145, eccentricity: 0.96714291, inclinationDeg: 162.26269, nodeDeg: 58.42008, argPeriDeg: 111.33249, meanAnomalyDeg: 0, epochDate: "1986-02-09T00:00:00Z", periodDays: 27508.61, composition: "A dark nucleus containing volatile ices, dust, rocky material, and organic compounds.", description: "The most famous periodic comet. It last passed through the inner Solar System in 1986 and is expected to return in 2061." }, { name: "103P/Hartley 2", commonName: "Hartley 2", kind: "comet", type: "Jupiter-family comet", radiusKm: 0.8, color: 0xa7f3d0, aAU: 3.471, eccentricity: 0.6949, inclinationDeg: 13.62, nodeDeg: 219.75, argPeriDeg: 181.25, meanAnomalyDeg: 59.85, epochDate: "2011-11-25T00:00:00Z", periodDays: 2360, composition: "A small icy nucleus containing frozen volatiles, dust, and rocky material.", description: "A small active comet visited by NASA's EPOXI mission in 2010." }, // ============================================================ // DWARF PLANETS // ============================================================ { name: "Ceres", commonName: "Ceres", kind: "dwarfPlanet", type: "Dwarf planet", radiusKm: 469.7, color: 0x9ca3af, aAU: 2.7653485, eccentricity: 0.07913825, inclinationDeg: 10.58682, nodeDeg: 80.39320, argPeriDeg: 72.58981, meanAnomalyDeg: 113.4104434, epochDate: "2010-07-23T00:00:00Z", periodDays: 1682, composition: "A rocky and dusty crust above an interior containing substantial water ice and hydrated minerals.", description: "The largest object in the main asteroid belt and the only dwarf planet in the inner Solar System." }, { name: "Pluto", commonName: "Pluto", kind: "dwarfPlanet", type: "Dwarf planet / Kuiper Belt object", radiusKm: 1188.3, color: 0xc7b299, aAU: 39.48168677, eccentricity: 0.24880766, inclinationDeg: 17.14175, nodeDeg: 110.30347, argPeriDeg: 113.76329, meanAnomalyDeg: 14.86205, epochDate: "2000-01-01T12:00:00Z", periodDays: 90613.3, composition: "A rocky interior surrounded by water ice, with surface ices including nitrogen, methane, and carbon monoxide.", description: "A complex dwarf planet in the Kuiper Belt with five known moons, including its large companion Charon." }, { name: "Eris", commonName: "Eris", kind: "dwarfPlanet", type: "Dwarf planet / scattered-disc object", radiusKm: 1163, color: 0xdbeafe, aAU: 67.9347765, eccentricity: 0.4382363, inclinationDeg: 43.92596, nodeDeg: 36.00471, argPeriDeg: 150.79205, meanAnomalyDeg: 211.78075, epochDate: "2026-06-09T00:00:00Z", periodDays: 204517, composition: "An icy and rocky dwarf planet with volatile surface ices including methane.", description: "One of the largest known dwarf planets. Its discovery helped trigger the debate that led to Pluto's reclassification." }, // ============================================================ // ASTEROIDS // ============================================================ { name: "4 Vesta", commonName: "Vesta", kind: "asteroid", type: "Main-belt asteroid", radiusKm: 262.7, color: 0xb0a79d, aAU: 2.3615413, eccentricity: 0.0901676, inclinationDeg: 7.14406, nodeDeg: 103.70232, argPeriDeg: 151.53711, meanAnomalyDeg: 26.80969, epochDate: "2025-11-21T00:00:00Z", periodDays: 1325.65, composition: "A differentiated rocky body with crust, mantle, and metallic core.", description: "The second most massive object in the asteroid belt. NASA's Dawn spacecraft orbited Vesta before continuing to Ceres." }, { name: "101955 Bennu", commonName: "Bennu", kind: "asteroid", type: "Near-Earth asteroid", radiusKm: 0.246, color: 0x786f68, aAU: 1.126391026, eccentricity: 0.203745112, inclinationDeg: 6.0349391, nodeDeg: 2.0608668, argPeriDeg: 66.230699, meanAnomalyDeg: 101.70, epochDate: "2011-01-01T00:00:00Z", periodDays: 436.6487, composition: "A primitive carbon-rich rubble-pile asteroid containing hydrated minerals, organic compounds, and ancient Solar System material.", description: "The near-Earth asteroid sampled by NASA's OSIRIS-REx spacecraft." } ]34:T16d7,keplerTools = { const DEG = Math.PI / 180; // ============================================================ // NORMALIZE ANGLE // ============================================================ function normalizeAngle( angle ) { const twoPi = Math.PI * 2; return ( ( angle % twoPi ) + twoPi ) % twoPi; } // ============================================================ // MEAN ANOMALY AT A GIVEN DATE // ============================================================ function meanAnomalyAt( body, date = new Date() ) { const epoch = new Date( body.epochDate ); const elapsedDays = ( date.getTime() - epoch.getTime() ) / 86400000; const meanMotion = 2 * Math.PI / body.periodDays; return normalizeAngle( body.meanAnomalyDeg * DEG + meanMotion * elapsedDays ); } // ============================================================ // SOLVE KEPLER'S EQUATION // // M = E - e sin(E) // ============================================================ function solveEccentricAnomaly( M, e ) { let E = e < 0.8 ? M : Math.PI; for ( let i = 0; i < 20; i++ ) { const delta = ( E - e * Math.sin(E) - M ) / ( 1 - e * Math.cos(E) ); E -= delta; if ( Math.abs(delta) < 1e-10 ) { break; } } return E; } // ============================================================ // ORBITAL STATE // ============================================================ function orbitalState( body, meanAnomaly ) { const e = body.eccentricity; const E = solveEccentricAnomaly( meanAnomaly, e ); const trueAnomaly = 2 * Math.atan2( Math.sqrt( 1 + e ) * Math.sin( E / 2 ), Math.sqrt( 1 - e ) * Math.cos( E / 2 ) ); const rAU = body.aAU * ( 1 - e * Math.cos(E) ); return { E, trueAnomaly, rAU }; } // ============================================================ // POSITION FROM TRUE ANOMALY // ============================================================ function directionAt( body, trueAnomaly ) { const i = body.inclinationDeg * DEG; const node = body.nodeDeg * DEG; const peri = body.argPeriDeg * DEG; const u = peri + trueAnomaly; const cosNode = Math.cos(node); const sinNode = Math.sin(node); const cosU = Math.cos(u); const sinU = Math.sin(u); const cosI = Math.cos(i); const sinI = Math.sin(i); // Standard heliocentric ecliptic coordinates const X = cosNode * cosU - sinNode * sinU * cosI; const Y = sinNode * cosU + cosNode * sinU * cosI; const Z = sinU * sinI; // Three.js scene uses X-Z as its ecliptic plane. // Therefore: // // astronomical X -> Three X // astronomical Y -> Three Z // astronomical Z -> Three Y return new THREE.Vector3( X, Z, Y ).normalize(); } // ============================================================ // CURRENT APPROXIMATE SCENE POSITION // ============================================================ function scenePosition( body, distanceScale, date = new Date() ) { const M = meanAnomalyAt( body, date ); const state = orbitalState( body, M ); const direction = directionAt( body, state.trueAnomaly ); const visualDistance = distanceScale( state.rAU ); return { position: direction .clone() .multiplyScalar( visualDistance ), rAU: state.rAU, trueAnomaly: state.trueAnomaly, meanAnomaly: M }; } // ============================================================ // COMPLETE ORBIT PATH // ============================================================ function orbitPoints( body, distanceScale, steps = 420 ) { const points = []; const e = body.eccentricity; for ( let n = 0; n <= steps; n++ ) { const trueAnomaly = n / steps * Math.PI * 2; const rAU = body.aAU * ( 1 - e * e ) / ( 1 + e * Math.cos( trueAnomaly ) ); const direction = directionAt( body, trueAnomaly ); points.push( direction .clone() .multiplyScalar( distanceScale( rAU ) ) ); } return points; } return { meanAnomalyAt, solveEccentricAnomaly, orbitalState, directionAt, scenePosition, orbitPoints }; }35:[] 2f:{"id":"d0f435bdda76706d","slug":null,"title":"Space","thumbnail":"fea009ee24c4fea6dbd13347d3f485824e1ebb551133e32a16a379d2d5fd6eca","access_level":"public","create_time":"$D2026-08-30T02:36:28.797Z","update_time":"$D2026-08-30T02:59:18.738Z","view_time":null,"first_public_time":"$D2026-08-30T02:36:28.797Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024"},"version":29,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null}],"members":[{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Space","cells":[{"id":0,"value":"# Space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"THREE = await import(\n \"https://esm.sh/three@0.185.1\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"OrbitControls = (\n await import(\n \"https://esm.sh/three@0.185.1/examples/jsm/controls/OrbitControls.js\"\n )\n).OrbitControls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"