云澜组件库 Clyune Component Gallery太阳系轨道 · 原理与代码
着色器太阳+日冕、程序化行星与光环、30 颗卫星；可缩放聚焦，并切换太阳前进的螺旋轨迹模式。
运行逻辑
访问 `/threejs/solar-system` 时，DemoHost 按 registry 的 `mod: 'solar-system'` 懒加载 `demos/solar-system.js`，调用 `mountSolarSystem(host, { variant: 'solar-system' })`。 模块自行创建 three.js 渲染器、场景、相机和 OrbitControls，并用 `createInfoPanel` 挂上信息面板。 每个 `requestAnimationFrame`：读取控件值，按速度缩放模拟时钟（dt 上限 50 ms），执行帧回调绘制；返回的读数写入信息面板。 改变参数：颜色/速度/大小等即时生效，需要重建的参数触发重新挂载；离开页面时取消 rAF、移除监听并释放资源。
运行环境
Canvas 2D: 2D 画布绘图; WebGL (three.js): three.js 通过 WebGLRenderer 使用 WebGL; requestAnimationFrame: 与屏幕刷新同步的动画循环; ResizeObserver: 画布随容器尺寸自适应; Pointer Events: 鼠标/触摸/触控笔统一事件; devicePixelRatio: HiDPI 清晰渲染（上限 2×） · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21, three 0.170.0
引入的组件与依赖
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
引入的组件函数
THREE — three.js 命名空间; OrbitControls — three.js 轨道相机控制：拖动旋转、滚轮/双指缩放; readLiveControls — 读取当前控件值（CSS 变量回退）; colorToRgb — 颜色 → RGB 分量; maxDpr — 按设备限制像素比; preferLiteFx — 低端/移动设备时降低特效; tuneOrbitControls — 调校 OrbitControls（阻尼、触控）; createInfoPanel — 右侧/底部信息面板：实时读数 + 公式/说明/参数/步骤; alignDocParams — 让「参数」说明与实际控件一一对应; fmt — 数字格式化（固定小数位）; F — 公式块 HTML; dockControls — 把控制面板停靠到画布旁; getLang — 当前界面语言（zh/en）; THREE.ShaderMaterial — 自定义 GLSL 材质; THREE.Color — 颜色对象; THREE.Vector3 — 三维向量; THREE.AdditiveBlending — 加色混合（发光叠加）; THREE.DoubleSide — 双面渲染; THREE.LineLoop — 闭合折线; THREE.BufferGeometry — 自定义顶点几何体; THREE.BufferAttribute — 顶点属性数组（位置/颜色）; THREE.DynamicDrawUsage — 频繁更新的缓冲用法; THREE.LineBasicMaterial — 线条材质; THREE.Line — 折线
本 demo 代码
frontend/src/demos/solar-system.js: solar-system.js (L1-L1146)
代码解释
L9-14: `EN_NAME`（常量/表）：Proper English names (the generic dictionary would read 水/金/火 as Water/Gold/Fire).。 L15-15: `EN`（常量/表）。 L16-16: `nm`（常量/表）。 L18-24: `PARAMS_SPEC`（常量/表）。 L25-25: `EARTH_N`（常量/表）；数学计算用到 `Math.pow`。 L26-44: `SS_DOC`（常量/表）。 L47-47: `DEG`（常量/表）：------------------------------------------------------------------ data。 L48-86: `PLANETS`（常量/表）。 L89-94: `hash3`（函数）：------------------------------------------------------- CPU noise (tex)。 L95-107: `noise3`（函数）；数学计算用到 `Math.floor`。 L108-115: `fbm`（函数）。 L116-119: `mixc`（函数）；数学计算用到 `Math.max`, `Math.min`。 L120-120: `sstep`（函数）；数学计算用到 `Math.max`, `Math.min`。 L121-121: `angDiff`（函数）。 L123-195: `SHADERS`（常量/表）；数学计算用到 `Math.sin`, `Math.abs`, `Math.min`。 L197-197: `canvasCache`（常量/表）。
原理
r(θ) = a(1 − e²) / (1 + e·cosθ) dθ/dt = n · (1 + e·cosθ)² / (1 − e²)^1.5 开普勒第三定律：T² ∝ a³（n = 3.5·a^−1.5） 每颗行星沿 椭圆 轨道绕太阳转，太阳在椭圆的一个焦点上。偏心率 e 越大椭圆越扁（水星 e≈0.21 最明显）。 行星离太阳近时跑得快、远时跑得慢（开普勒第二定律：相同时间扫过相同面积），所以角速度公式里带着 (1+e·cosθ)²。 离太阳越远，公转周期越长：周期的平方与半长轴的立方成正比，所以面板里的 T²/a³ 对每颗行星几乎都一样。 切到“螺旋前进”模式，太阳本身也在银河中前进，行星轨迹被拉成螺旋线。