Clyune Component GallerySolar System Orbits · How it works & code
Shader sun with corona, procedural planets and rings, 30 moons; zoom to focus, and switch to the helical-orbit mode where the sun moves forward.
Runtime logic
Visiting `/threejs/solar-system`, DemoHost lazy-loads `demos/solar-system.js` (registry `mod: 'solar-system'`) and calls `mountSolarSystem(host, { variant: 'solar-system' })`. The module creates its own three.js renderer, scene, camera and OrbitControls, and attaches the info panel with `createInfoPanel`. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; WebGL (three.js): WebGL through three.js WebGLRenderer; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21, three 0.170.0
Dependencies
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
Imported APIs
THREE — three.js namespace; OrbitControls — three.js orbit camera controls: drag to rotate, wheel/pinch to zoom; readLiveControls — Reads live control values (CSS-variable fallback); colorToRgb — Colour → RGB components; maxDpr — Caps device pixel ratio per device; preferLiteFx — Lighter effects on low-end/mobile devices; tuneOrbitControls — Tunes OrbitControls (damping, touch); createInfoPanel — Side/bottom info panel: live readout + formula/notes/params/steps; alignDocParams — Aligns the documented parameters with the actual controls; fmt — Number formatting (fixed decimals); F — Formula block HTML; dockControls — Docks the control panel next to the canvas; getLang — Current UI language (zh/en); THREE.ShaderMaterial — Custom GLSL material; THREE.Color — Colour object; THREE.Vector3 — 3D vector; THREE.AdditiveBlending — Additive blending (glow); THREE.DoubleSide — Render both faces; THREE.LineLoop — Closed polyline; THREE.BufferGeometry — Custom vertex geometry; THREE.BufferAttribute — Typed vertex attribute (positions/colours); THREE.DynamicDrawUsage — Usage hint for frequently updated buffers; THREE.LineBasicMaterial — Basic line material; THREE.Line — Polyline
Source code
frontend/src/demos/solar-system.js: solar-system.js (L1-L1146)
Code walkthrough
L9-14: `EN_NAME` (constant/table): Proper English names (the generic dictionary would read Mercury/Venus/Mars as Water/Gold/Fire). L15-15: `EN` (constant/table). L16-16: `nm` (constant/table). L18-24: `PARAMS_SPEC` (constant/table). L25-25: `EARTH_N` (constant/table); math via `Math.pow`. L26-44: `SS_DOC` (constant/table). L47-47: `DEG` (constant/table): ------------------------------------------------------------------ data. L48-86: `PLANETS` (constant/table). L89-94: `hash3` (function): ------------------------------------------------------- CPU noise (tex). L95-107: `noise3` (function); math via `Math.floor`. L108-115: `fbm` (function). L116-119: `mixc` (function); math via `Math.max`, `Math.min`. L120-120: `sstep` (function); math via `Math.max`, `Math.min`. L121-121: `angDiff` (function). L123-195: `SHADERS` (constant/table); math via `Math.sin`, `Math.abs`, `Math.min`. L197-197: `canvasCache` (constant/table).
Principles
r(θ) = a(1 − e²) / (1 + e·cosθ) dθ/dt = n · (1 + e·cosθ)² / (1 − e²)^1.5 The third law of Kepler: T² ∝ a³ (n = 3.5·a^−1.5) Every planet Ellipse 轨道绕太阳转，太阳在椭圆的一个焦点上。偏心率 e The larger the ellipse, the flatter e≈0.21 Most obviously. 行星离太阳近时跑得快、远时跑得慢（开普勒第二定律：相同时间扫过相同面积），所以角速度公式里带着 (1+e·cosθ)²。 The farther away from the sun, the longer the cycle, the more squared the cycle is compared to the half-long axis, so it's in the panel T²/a³ It's almost the same for every planet. Cut“Helical”模式，太阳本身也在银河中前进，行星轨迹被拉成螺旋线。