The user is asking for a "real-scale Solar System 3D" (真实比例的太阳系3d). They want a 3D rendering of the Solar System at actual scale. This is a classic impossible task — real scale means the Sun is enormous, and the planets are tiny dots billions of km away. The challenge is to make it visually compelling while still faithful to "true scale." Main considerations: - Single HTML file, Three.js from CDN - 真实比例 = actual proportions. So planet sizes are proportional to the Sun, distances are proportional to each other. But at true scale everything becomes invisible — a common approach: keep true proportions but allow zoom, add a "scale visualization" toggle, show actual km values on labels, and use logarithmic zoom or exponential zoom so the user can travel from the Sun all the way to the Kuiper Belt. - Since the request is in Chinese, I'll reply in Chinese. What makes it a crafted, polished page: - Loading/intro overlay with a title like "真实比例太阳系" - HUD showing current camera distance, selected planet info panel (real data: diameter, distance from Sun, orbital period, day length, temperature, trivia) - Control panel: time speed (days/sec), distance/size scale toggle (true vs. compressed — but the user said "real scale" so the default should be true proportions; maybe offer a "size ×" boost for visibility while keeping it off by default… actually, a good approach: keep everything at true scale, use logarithmic/exponential zoom, add a "planet size magnification" slider clearly labeled as an aid, default 1× but allow ×100 to ×10,000. Hmm, the user emphasized "real scale" — the honest answer is: at 1:1 the planets are sub-pixel. Present true scale by default, explain in the intro, and offer a clearly labeled magnification aid. That's the honest and educational approach.) Actually let me think about what's best for the user experience. "生成真实比例的太阳系3d" — they want a 3D Solar System at actual scale. Core features: 1. True scale: 1 unit = some km. E.g. 1 AU = 1,000 units? Then the Sun radius 696,000 km ≈ 0.00465 AU ≈ 4.65 units. Earth 6,371 km ≈ 0.0000637 AU ≈ 0.064 units — invisible at Neptune's distance (30,000 units). This is exactly the point: show how empty space is. Better: 1 unit = 1,000,000 km (1 Gm). Then: - Sun radius: 0.696 units — small but visible. - 1 AU = 149.6 units. - Jupiter at 5.2 AU = 778 units, radius 71.5 units. - Neptune at 30 AU = 4,485 units, radius 24.7 units. - Pluto at 39.5 AU = 5,913 units. With logarithmic depth buffer and exponential camera controls, this is manageable. THREE.LogarithmicDepthBuffer() helps. Camera far plane can be huge (e.g. 10,000 units = 67 AU). No problem. 2. Planets orbit at Keplerian speeds (period ∝ a^1.5). Time control: 1 second = N days, adjustable (0 to 365 days/sec, plus pause). 3. Visuals: - Sun: glowing sphere with animated surface (shader or sprite), corona sprite, PointLight. - Procedurally generated planet textures via canvas (banding for gas giants, noise for rocky). This is more beautiful than plain colors and has no external dependencies. - Earth: continents — I can generate a plausible pattern. Or use a simple canvas with blue-green blobs. Let's make a decent procedural texture. - Saturn's rings: RingGeometry with procedural ring texture (radial bands, Cassini gap). - Orbit lines: thin ellipses (circles would be fine, but actual orbits are slightly elliptical — using eccentricity adds a nice "real" touch: use real a, e, inclination). I can use actual orbital elements: a (AU), e, i (degrees), plus current mean longitude… For simplicity and accuracy, use real elements (a, e, i, Ω, ω, M0 at J2000) and compute positions with Kepler's equation solved iteratively. This is actually "真实" — real orbital elements. Nice touch. Time = simulation date starting from today, adjustable. Let me recall the orbital elements (J2000, approximate): - Mercury: a=0.38710, e=0.20563, i=7.005°, Ω=48.331°, ω=29.124°, M0=174.796°, period 87.969 days - Venus: a=0.72333, e=0.00677, i=3.394°, Ω=76.680°, ω=54.925°, M0=50.416°, period 224.701 days - Earth: a=1.00000, e=0.01671, i=0.0°, Ω=0 (undefined, use -11.26 for the longitude of the ascending node), ω=114.208° (longitude of perihelion), M0=358.617°, period 365.256 days - Mars: a=1.52368, e=0.09340, i=1.850°, Ω=49.558°, ω=286.502°, M0=19.412°, period 686.980 days - Jupiter: a=5.20260, e=0.04849, i=1.303°, Ω=100.464°, ω=273.867°, M0=20.020°, period 4332.59 days - Saturn: a=9.55491, e=0.05551, i=2.489°, Ω=113.666°, ω=339.392°, M0=316.904°, period 10759.22 days - Uranus: a=19.21845, e=0.04630, i=0.773°, Ω=74.006°, ω=96.999° (actually 170.954 is ω? let me check) — Uranus: Ω=74.006°, ω̃=170.954°, so ω = ω̃ - Ω = 96.948°, M0=142.239°, period 30688.5 days - Neptune: a=30.11039, e=0.00899, i=1.770°, Ω=131.784°, ω=273.187° (ω̃=449.665-360=89.665? Neptune's ω̃=449.665° → 89.665°, ω = 89.665-131.784 = -42.119 → 317.881°). M0=260.247° (actually 304.880 is L0… M0 = L0 - ω̃ = 304.880 - 89.665 = 215.215°? hmm. Let me be careful. Actually, to reduce risk of getting the elements slightly wrong (positions don't need to be astronomically perfect to the arcsecond, but "real" is better), I'll use the well-known J2000 elements set (from NASA JPL's approximate Keplerian elements table): From JPL's "Keplerian Elements for Approximate Positions of the Major Planets" (1900-2050): - Mercury: a 0.38709927, e 0.20563593, I 7.00497902, L 252.25032350, long.peri 77.45779628, long.node 48.33076593 - Venus: a 0.72333566, e 0.00677672, I 3.39467605, L 181.97909950, long.peri 131.60246718, long.node 76.67984255 - Earth: a 1.00000261, e 0.01671123, I -0.00001531, L 100.46457166, long.peri 102.93768193, long.node 0.0 - Mars: a 1.52371034, e 0.09339410, I 1.84969142, L -4.55343205, long.peri -23.94362959, long.node 49.55953891 - Jupiter: a 5.20288700, e 0.04838624, I 1.30439695, L 34.39644051, long.peri 14.72847983, long.node 100.47390909 - Saturn: a 9.53667594, e 0.05386179, I 2.48599187, L 49.95424423, long.peri 92.59887831, long.node 113.66242448 - Uranus: a 19.18916464, e 0.04725744, I 0.77263783, L 313.23810451, long.peri 170.95427630, long.node 74.01692503 - Neptune: a 30.06992276, e 0.00859048, I 1.77004347, L -55.12002969, long.peri 44.96476227, long.node 131.78422574 Here L = mean longitude, long.peri = longitude of perihelion (ϖ). Mean anomaly M = L - ϖ. Ω = long.node, ω = ϖ - Ω. This table is well-established; I remember it fairly accurately. Let's use it. Epoch is J2000 (2000-01-01 12:00 TT). Days from J2000: computed from the simulation date. M = M0 + n·d, n = 360/period. Periods (days): Mercury 87.969, Venus 224.701, Earth 365.256, Mars 686.980, Jupiter 4332.589, Saturn 10759.22, Uranus 30685.4, Neptune 60189. Also, rate of change of elements per century — could add but adds risk; approximation is enough (accurate to within a few degrees for ±200 years). I'll skip linear terms for simplicity; positions will still be reasonable. Kepler solve: E - e·sinE = M (in radians). Iterate 8 times with Newton's method. Position in orbital plane: x' = a(cosE - e), y' = a·√(1-e²)·sinE. Then rotate: by ω around z-axis, by i around x-axis, by Ω around z-axis (in ecliptic coordinates with z as north). In three.js, the world has y as up; I'll map ecliptic z→y. Ecliptic plane = xz plane in three.js. Orbit path lines: sample E over 0..2π, same transform, draw as a LineLoop with low opacity. 4. Scale and camera: this is the crux. True scale means when you're at the Sun, Earth is a 0.064-unit dot 149.6 units away — 0.02°… Actually angular size from the Sun: 0.032/149.6 rad ≈ 0.012° ≈ 0.7 arcmin. On a 1080p screen with a 60° fov, 0.012° = 0.02% of height ≈ 0.2px. So from the Sun, Earth is sub-pixel — realistic! To see the planets, you have to travel to them. This is the experience: "you" fly through the actual Solar System. Camera controls: - Free fly with WASD + mouse? Or orbit controls with a "warp" feature? Best UX: click a planet to fly the camera there (follow mode). Also a "star map" minimap? A scale-bar readout ("current view distance: X km / X 亿km") is powerful for conveying scale. - Zoom: exponential dolly (zoom speed proportional to distance) so the user can traverse 50,000 units with mouse wheel. OrbitControls with custom damping? OrbitControls dolly is linear per wheel notch — bad for this range. I'll implement custom exponential zoom: each wheel event multiplies distance by a factor of 0.85/1.18. Plus WASD flight and click-to-fly-to-planet with smooth tween. Camera plan: implement a custom camera rig: - Spherical coordinates around a "focus target" (Sun or planet). - Wheel: exponential change in radius. - Drag: rotate (theta/phi). - Click planet (raycast against an invisible large hit sphere since planets are tiny): tween focus target to planet, set radius to a good value (e.g. 8× planet radius), then follow the planet. - WASD/arrow keys: move focus target in world space (free travel) — maybe Q/E for up/down. Shift = boost. This gives a "you're flying through space" feel. - Minimap: 2D canvas overlay showing the whole system at schematic scale (log or sqrt? — a linear minimap at 60 AU wide is enough: Neptune 4500 units, minimap 200px → no problem). Minimap shows planet dots (fixed sizes, labeled), a camera position marker, and clickable to set focus. This solves the navigation problem elegantly. 5. Info panel: when a body is focused, show a Chinese data card: diameter, mass, distance from Sun (AU + 亿km), orbital period, day length, temperature, trivia. Plus real-time "current camera distance from the target." 6. HUD elements: - Top left: title "真实比例·太阳系", simulation date (date display, advances with time control), - Top right: buttons: starfield toggle? orbit lines toggle, labels toggle, time speed slider (log slider: pause, 1h/s, 1d/s, 1w/s, 1mo/s, 1yr/s, 10yr/s) - Bottom: scale ruler showing the current camera distance in km and 亿km (100M km) (e.g. "视野跨度: 1.2 亿 km (0.8 AU)") — a dynamic scale bar like in Google Earth. Compute the on-screen distance: pixels per unit at the focus depth, choose a nice round value (1e5/3e5/1e6 km steps), draw a bar labeled with km. This is a strong "real scale" feature. - A planet list (left rail) with dots in their colors, click to fly. 7. Intro overlay: "真实比例 1:1 — 太阳直径 139 万公里,木星直径是地球的 11 倍,海王星距离太阳 45 亿 km。在这个尺度上,行星是肉眼几乎不可见的光点——这正是太阳系的真实面貌。" Buttons: 开始探索 (start). Maybe a short "scale shock" comparison: if the Sun were 1 meter, Earth would be 4.5 mm, 68 meters away. That's a great educational hook. Include in the intro. 8. Labels: sprites or CSS2D? Use CSS2DRenderer? Extra import. Instead, use a canvas-sprite label attached above each planet, always facing the camera, scale with distance (constant screen size? A true-scale label sprite scales with distance and disappears). Better approach: HTML overlay labels positioned each frame by projecting the 3D position — full control, crisp text, pointer events for clicks. I'll do this: a div label per planet, updated each frame (projected, hidden if behind camera or too far/too close). Hide labels when the planet's screen distance is under some threshold (when you're really there) — actually keep them, they're useful. Show name + distance from the camera. 9. Starfield: ~4000 points on a large sphere, subtle; maybe a milky-way band — add a second denser band of points along a great circle, plus a few colored stars. Distant nebula glow? Keep it performant. 10. Sun rendering: shader material — animated noise (fBm) on the sphere for the granulation feel, rim emissive. Plus a corona: additive sprite with radial gradient (canvas-generated), slightly animated (pulsing scale). PointLight with high intensity, decay 0 (three.js physical lights: set decay=0 or useLegacyLights… In recent three.js (r155+), the lighting model changed. To be safe, pin a version: three@0.128.0? Or use r128 via cdnjs and THREE.legacyLights… let me pin to 0.128.0 (unpkg / cdnjs) — stable and widely cached, simple lighting with MeshStandardMaterial/Phong. Pin to https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js — very common. No OrbitControls needed (custom controls). r128 is fine for everything I need. In r128: PointLight(color, intensity, distance=0, decay=2 default?) — decay default 2? In r128, PointLight decay default is 2 but physicallyCorrectLights is false by default, so decay is… when physicallyCorrectLights is false, light intensity is roughly independent of distance (distance>0 with attenuation when decay is used? Actually, when decay=2 and physically correct is off, does attenuation happen when distance>0? Hmm. In legacy mode, if distance==0 there's no attenuation regardless of decay. So set distance=0 → no falloff. Renderer: antialias true, logarithmicDepthBuffer true (needed for near 0.001 far 20000 ratio >20,000:1 — 65,536 depth buffer precision issue; log depth solves it). Planets near the camera: min camera radius ~1.2× planet radius. Sun min radius ~5 units (don't let the user go inside the Sun; actually let them get close, up to radius*1.05, the shader sun is fine). Near plane 0.001, far 60000 (400 AU to include stars; stars are at radius ~45000… actually put the star sphere at radius 50000, far 120000). Log depth OK. 11. Planet textures via canvas: - Sun: shader-based (fBm noise), color from #ff8800 to #fff2cc, plus rim. - Mercury: gray-brown with craters (random dark circles + speckles). - Venus: creamy yellow with swirled cloud bands (horizontal noise bands). - Earth: ocean blue base, green/brown continents from fBm threshold, white polar caps, cloud layer? Maybe just bake clouds in as faint speckles; add a separate slightly larger sphere with a transparent alpha cloud texture rotating a bit faster — nice detail. Also Earth night lights? Overkill; skip. Add atmosphere rim: slightly larger backside sphere with basic material (fresnel)? Simpler: additive shell with a fresnel shader — a nice touch on Earth, Venus, gas giants, Uranus, Neptune. I can write one small fresnel shader and reuse with per-planet color. - Mars: rusty red-orange with dark regions, white polar caps. - Jupiter: band structure — horizontal stripes with turbulence; Great Red Spot (a big red-brown ellipse). - Saturn: soft pale-golden bands. - Uranus: pale cyan, nearly uniform with faint bands. - Neptune: deep blue with faint bands + dark spot. - Saturn's rings: RingGeometry with canvas texture: radial bands (translucent) — draw as a 1D gradient strip: create a 1024x64 canvas? For rings, UVs of RingGeometry: in r128 the RingGeometry UVs are planar (x,y based), not radial — the common trick is to modify UVs so u = radius-based. I can rebuild the UVs: for each vertex, u = (r - inner)/(outer - inner). In r128, RingGeometry(inner, outer, thetaSeg) — position attribute is accessible; compute per-vertex radius. Then a 512x1 texture? Use a 1024x4 canvas with band noise: color variation + alpha gaps (Cassini gap ~0.77 of range). Ring double-sided, transparent. Ring tilt: Saturn's axial tilt is 26.7° — tilt the whole planet group. Uranus is 97.8° — fun: rings almost vertical; Uranus rings are faint — maybe skip or very faint. Axial tilt: apply rotation.z = tilt to planet mesh (with a ring group). Rotation: planets rotate; day length: Mercury 58.6 days, Venus -243 days (retrograde), Earth 0.997 days, Mars 1.026 days, Jupiter 0.414 days, Saturn 0.444 days, Uranus -0.718 days, Neptune 0.671 days. Rotation speed = 2π / (rotationPeriod) per simulated day. 12. Moons? Real scale: Moon 3,474 km diameter, 384,400 km from Earth. Earth's orbit: 149.6 units; Moon 0.384 units from Earth — visible when focused on Earth! Adding the Moon is a great "wow, even the Moon is tiny" moment. Moon radius 0.001737 AU*? In our units (1 unit=1e6 km): Moon radius 1,737 km = 0.001737 units. At a camera radius of 0.1 unit (100,000 km) around Earth, the Moon dot is 0.0035/0.384 ≈ visually fine. Add Moon orbiting Earth (period 27.32 days, distance 0.3844 units). Maybe just Moon (real scale). Galilean moons of Jupiter? Io 0.422 units from Jupiter, radius 0.00182 units — could add; but scope: keep just the Moon for scope control, mention in label? Hmm, Moon is a strong detail. Include only Moon. 13. Asteroid belt: between Mars and Jupiter, 2.2–3.3 AU — a few thousand small points in a torus with random inclination — cheap (Points, one draw call), adds realism. Kuiper belt hint too? 30–50 AU, sparser, fainter. Both cheap Points. Let's do asteroid belt (3000 points) + Kuiper (1500 points, very faint). Rotate slowly? Points can't easily rotate individually cheaply — rotate the whole Points object slowly around Y — the asteroid belt rotates uniformly: acceptable (or skip rotation; belt rotation period ~4-8 years; slowly rotating the whole thing looks weird but subtle. Let me rotate at an intermediate rate, it's fine). 14. Pluto: include as a dwarf planet (optional, with label 矮行星), elements a=39.48, e=0.2488, i=17.16°. Fun. Include with a dashed orbit style. 15. Time: simulation clock. Start at J2000? Better to start at "today" so positions match reality now. Compute days since J2000 from Date.now(). Date shown in HUD: e.g. "2025年6月 X日". Time speed options via slider: 0 (pause), 0.25 days/s, 1, 7, 30.4, 365, 1825 days/s? A log slider from -1 (pause zone) … Simpler: preset buttons: ⏸ | 1h/s | 1d/s | 1w/s | 1mo/s | 1yr/s | 5yr/s. Plus "重置到今天". 16. Scale bar: compute pixels per world unit at distance d from camera to target: ppu = (screenHeight/2) / (d * tan(fov/2)). Choose a nice round km value so bar ≈ 80–160 px: candidate steps 1, 2, 5 × 10^k km, in units km = value/1e6. Draw a bar with ticks. Also show "1 AU = 1.5亿km" reference. This conveys real scale at every zoom level. 17. "Scale shock" mode? A button "缩放对比: 若太阳=1m"? Might be too much scope. Instead the intro card conveys it. 18. Performance: ~9 sphere meshes (32–48 segments), ring, points (3 clouds), sprites. Fine. 19. UI design language: - Palette: deep-space near-black (#05070d), HUD in desaturated blue-slate with amber accent (#ffb347 / #f5a623) + cyan secondary? Use: base #0b0f1a translucent panel (light blur OK — not full glassmorphism; subtle dark panel with 1px border). Accent: solar amber #ffb043; secondary: ice cyan #7fd4ff for data. - Typography: Chinese + display Latin: use Google Fonts? Single HTML file — a to Google Fonts is fine. For a space HUD: "Orbitron" (display, Latin numerals/titles) + "Noto Sans SC" (Chinese). Orbitron for numerals/labels gives a HUD feel. Body Chinese: Noto Sans SC. Font stack fallbacks OK offline (system fonts). Include preconnect + link. - HUD corner brackets aesthetic (small L-shaped corner ticks on panels) — crafted touch. - Micro-interactions: buttons with hover glow, planet list item highlight, label hover scale, click pulse. Loading screen with progress (textures are generated locally, so a quick fake "calibrating scale" animation then reveal). 20. Structure of code: - HTML: canvas container, HUD overlay (title block top-left, controls top-right, planet rail left, minimap bottom-right, scale bar bottom-center, info card right-center, labels layer, intro overlay, loading). - JS: - Data table (bodies): name (Chinese + English), color, radiusKm, elements, rotation, tilt, ring?, moons?, trivia (Chinese), temperature, etc. - Constants: K = 1e6 km per unit. AU = 149.5978707 units. - Texture factory: makeCanvas(w,h,fn); noise: value noise via hash, fBm; banding function. - Scene build: starfield, sun (shader), planets, orbits, belts, moon. - Kepler solver. - Camera rig + input (pointer, wheel, keys, raycast picking with generous pick spheres). - Label update. - Minimap (orthographic 2D canvas, linear scale, click to focus, camera marker, trails?). - Scale bar. - Time system + date display. - Info panel populate + "distance from camera to target" live. - Intro overlay dismiss. 21. Picking: create an invisible sphere (Mesh with material visible:false) with radius = max(planetRadius*4, distanceDependent?) — actually the simplest, most robust approach: raycast against a pick sphere sized planetRadius*6, min 0.05 units? Mercury radius 0.00244 units → pick radius 0.05 = 50,000 km — at camera 100 units away, that's 0.03° ≈ 2px. Hmm, at far zoom clicking a planet is hard. Solution: planet rail (list) as primary navigation (big click target) + minimap + double-click on empty space? Also label clicks (HTML, easy to hit). Labels always visible with a small dot marker? Labels with distance text — clickable. That's enough. Also make pick spheres radius = max(r*5, 0.3)? At 500 units away, 0.3 units = 0.034° ~ 2px. OK, add pick spheres with max(r*8, 0.5) — at 1000 units, 3px. Acceptable; the main nav is list/minimap/labels. Sun picking: pick sphere radius 5? Sun radius is 0.696. Use 3 units for easy recenter. 22. Camera follow: focusTarget is a body or null (free). Each frame, if focused body, target position = body position; camera position = target + spherical offset (with damping). Free move: keys move the target in camera space (speed ∝ radius*0.5 per second, shift ×8). Wheel zoom: radius *= pow(0.88, -deltaY/100)? Smooth: keep a targetRadius, exponentially damped approach (lerp factor 1-exp(-dt*8)). Initial view: from "today" — start outside the system: camera at (0, 2600, 4200)? So the whole inner system + up to Saturn is visible, looking at the Sun. Intro overlay covers; on start, a brief fly-in (tween from far 9000 to 3000 in 2.5 seconds) — cinematic. 23. Info card data (in Chinese): - 太阳: diameter 1.392 million km; surface 5,500°C; type G2V; contains 99.86% of the system's mass. - 水星 Mercury: diameter 4,879 km; day 58.6 Earth days; year 88 days; surface -173~427°C; no atmosphere; cratered surface like the Moon. - 金星 Venus: 12,104 km; day 243 Earth days (retrograde); year 225 days; surface 465°C; densest CO₂ atmosphere, runaway greenhouse effect; brightest natural object in the night sky. - 地球 Earth: 12,742 km; day 24h; year 365.25 days; the only planet with confirmed life; 71% ocean. - 火星 Mars: 6,779 km; day 24.6h; year 687 days; Olympus Mons, 22 km tall, largest volcano in the solar system; currently explored by multiple rovers. - 木星 Jupiter: 139,820 km; day 9.9h; year 11.86 years; 7× the mass of all other planets combined; Great Red Spot is a storm that's raged for over 300 years. - 土星 Saturn: 116,460 km; day 10.7h; year 29.4 years; rings are made of ice and rock, thickness only about 10 meters; density lower than water. - 天王星 Uranus: 50,724 km; day 17.2h (retrograde); year 84 years; axial tilt 97.8°, rolls along its orbit. - 海王星 Neptune: 49,244 km; day 16.1h; year 164.8 years; fastest winds in the solar system, over 2,000 km/h; first planet discovered via mathematics. - 冥王星 Pluto: 2,377 km; year 248 years; eccentric orbit 0.249, sometimes closer to the Sun than Neptune. - 月球 Moon: 3,474 km; 384,400 km from Earth; tides lock — one side always faces Earth. 24. Minimap: canvas 220x220, scale: 65 AU → 200px → 3.08 px/AU… Neptune 30AU=92px, Pluto 39.5=122px, OK. Draw orbits (faint circles at a×scale — true ellipses would be better but circles are fine for a minimap? Ellipses with e — cheap: sample 64 points from the same function? Reuse the precomputed orbit points (already computed for 3D lines): project xz → 2d. Do it, cheap.) Dots 2–3px, colored; Sun 4px amber; camera marker: triangle/diamond + current position; focus highlight ring. Click: nearest body within 12px → focus; otherwise set free target to that world position (nice: click on empty space to travel!). Hover: show name? Skip minimap hover (scope), add cursor pointer on body hover via simple hit test on mousemove — cheap, do it. 25. Labels: for each planet: div with dot + name + live distance from camera in 亿km. Style: small caps, letter-spaced, semi-transparent, hover→brighter. When body focused, its label becomes "current target". Also a sun label. Hide labels when the planet is very close (camera inside pick range?) or behind camera. Fade by screen size? Keep simple: always shown except when behind camera (dot product) or when the projected point is off-screen. Also show a distance to Sun in AU on the planet label? Just camera distance: e.g. "1.21 亿 km". When large: 2,000,000,000 km → "20.0 亿 km". Format: if ≥1e8 km then 亿km (1 decimal); else if ≥1e4 km then 万km; else km. 26. Time: simulation clock. Date format: YYYY年MM月DD日 (simulation). Time speed display "1 秒 = 1 天". Preset buttons: 暂停 / 1时 / 1日 / 1周 / 1月 / 1年 / 5年 (per second). Reset to now button (↺今天). 27. Loading: textures are generated quickly (canvas ops are ~ms). Show a loading screen with an animated orbital diagram (CSS) and "正在按 1:1,000,000,000 比例校准…" then fade. Actually the scale is 1 unit = 1,000,000 km → if 1 pixel is…? Not a fixed scale to px; it's a 3D scene with no fixed px scale. Say "比例尺: 1 单位 = 100 万公里"? The intro copy: "场景比例 1:1 — 所有天体大小与距离均按真实比例 (1 单位 = 1,000 万公里? No: 1e6 km = 100 万公里 = 100 M km)". 1 AU = 1.496e8 km = 149.6 units. Scale factor if 1 unit = 1 px? No. Let me express: "1:1.5 亿"? 1 AU = 1.496e8 km. If 1 unit=1e6 km, then the system is at 1:100 万 km per unit… Simplest honest copy: "所有尺寸与距离严格等比:太阳半径 0.70 单位,海王星轨道 4,500 单位,1 单位 = 1,000 万公里." Hmm 1e6 km = 100 万km. 1e6 km = 一百万公里. Yes "1 单位 = 100 万公里" is wrong: 1,000,000 km = 100 万公里 ✓ (1 万=10⁴, 10⁶ = 100 万). Correct: 1,000,000 km = 100 万公里. ✓ And 1 AU = 1.496 亿 km ✓. Intro copy: "真实比例 · 太阳系在 1:1 的真实尺度下—— 如果太阳缩小为 1 米,地球只有 4.5 毫米,远在 68 米之外。在这里,行星是星空中几近不可见的光点,这才是宇宙的本真面貌。 [进入太阳系 →]" Plus a small stats line: "1 AU = 1.496 亿 km · 场景单位 1 = 100 万公里". 28. Edge cases: mobile — pointer events unified; UI responsive: on small screens hide the rail? Add basic media queries (collapse panel, smaller minimap). Provide a hint "拖拽旋转 · 滚轮缩放 · WASD 移动 · 点击天体跟随". 29. Code size: big but fine. Let me write it carefully to avoid runtime errors. Now let me write the key algorithms: Kepler: ```js function keplerPosition(el, days){ // el: {a,e,i,O,w, M0, period} degrees const n = 360/el.period; let M = rad(el.M0 + n*days); M = M % (2*Math.PI); let E = M + el.e*Math.sin(M); for(let k=0;k<10;k++){ const f = E - el.e*Math.sin(E) - M; const fp = 1 - el.e*Math.cos(E); E -= f/fp; } const a = el.a; const x0 = a*(Math.cos(E)-el.e); const y0 = a*Math.sqrt(1-el.e*el.e)*Math.sin(E); // rotate const cO=Math.cos(rad(el.O)), sO=Math.sin(rad(el.O)); const ci=Math.cos(rad(el.i)), si=Math.sin(rad(el.i)); const cw=Math.cos(rad(el.w)), sw=Math.sin(rad(el.w)); // ecliptic coords (x,y in plane, z up) const x1 = cO*cw - sO*sw*ci... ``` Standard rotation: X = (cO·cw − sO·sw·ci)·x0 + (−cO·sw − sO·cw·ci)·y0 Y = (sO·cw + cO·sw·ci)·x0 + (−sO·sw + cO·cw·ci)·y0 Z = (sw·si)·x0 + (cw·si)·y0 Then map to three.js: x=X, y=Z, z=−Y (keep right-handed, ecliptic north up). Sign of y (three up) = Z. x and z: X→x, Y→z (direction doesn't matter visually). Use vec3(X, Z, -Y)? Let's just use (X, Z, Y) — fine. M0 from the table: M0 = L - ω̃ (longitude of perihelion). Let me precompute M0: - Mercury: L=252.25032, ϖ=77.45780 → M0=174.79252 ✓ matches known 174.79. - Venus: L=181.97910, ϖ=131.60247 → M0=50.37663 (known ~50.416, close; rounding from my memory of L. OK.) - Earth: L=100.46457, ϖ=102.93768 → M0=-2.47311→357.52689 (known 358.617 with different epoch convention; fine.) - Mars: L=-4.55343, ϖ=-23.94363 → M0=19.39020 ✓ (known 19.412) - Jupiter: L=34.39644, ϖ=14.72848 → M0=19.66796 (known 20.020 close) - Saturn: L=49.95424, ϖ=92.59888 → M0=-42.64464→317.35536 (known 317.020 close) - Uranus: L=313.23810, ϖ=170.95428 → M0=142.28382 ✓ (known 142.239) - Neptune: L=-55.12003, ϖ=44.96476 → M0=-100.08479→259.91521 (known 260.247 close) ω = ϖ − Ω: - Mercury: 77.45780−48.33077=29.12703 ✓ - Venus: 131.60247−76.67984=54.92263 ✓ - Earth: 102.93768−0=102.93768 (known ϖ=102.947, with Ω=-11.26; fine) - Mars: −23.94363−49.55954=−73.50317→286.49683 ✓ - Jupiter: 14.72848−100.47391=−85.74543→274.25457 (known 273.867 close) - Saturn: 92.59888−113.66242=−21.06354→338.93646 (known 339.392 close) - Uranus: 170.95428−74.01693=96.93735 ✓ - Neptune: 44.96476−131.78423=−86.81947→273.18053 (known 273.187 ✓) Good, I'll store a,e,i,O,ω,M0,period and compute directly. Pluto (approx J2000): a=39.482, e=0.2488, i=17.14, Ω=110.299, ϖ=224.07 → ω=113.78? Compute ω = 224.07−110.30=113.77. L0=238.93 → M0=238.93−224.07=14.86. period=90560 days (248 years). Good enough. Moon: circular orbit around Earth: a=0.3844 units (384,400 km), period 27.3217 days, i=5.14°. Simplify: position = earthPos + (cos θ, 0, -sin θ)*a rotated by inclination — simple: angle θ=2π*days/27.3217 + phase. Sun shader (r128 GLSL1): Vertex: pass normal and position. Fragment: 3D value noise fBm of (position*freq + time*small) → color ramp #ff5a00 → #ffd27a → #fff3c4; add limb darkening via dot(normal, viewDir)? For glow, use standard emissive: make the Sun unlit: MeshBasicMaterial can't do shader; use ShaderMaterial with vNormal, vViewDir; color *= (0.75+0.25*facing) etc. Plus a separate corona sprite (additive, canvas radial gradient) with scale = sunRadius*8, and 2 layers with different animation. PointLight(0xffe0b0, 1.4) at origin; also small ambient 0x223 (0.25). Value noise in GLSL: hash function sin-based; 3D value noise with trilinear; 4 octaves of fBm. Fine. Fresnel atmosphere shader: ``` uniform vec3 color; varying vec3 vN; varying vec3 vP; // view space intensity = pow(1.0 - abs(dot(normalize(vN), normalize(cameraPosition - vP)))? ``` Simpler: view-space normal and view direction: a = 1 - |dot(N, V)|; alpha = pow(a, 3) * 1.2; side: render sphere at r*1.06 with additive, side: BackSide for halo? Common trick: BackSide sphere slightly larger, alpha = pow(dot(N,V)+1, k)? Let's use FrontSide additive rim: alpha = pow(1 - |dot(N,V)|, 2.5). At glancing angles it glows as a rim. Enough for a thin glow. Planet material: MeshPhongMaterial with map, shininess 8, slight specular 0x111111. Gas giants shininess 4. Orbit lines: for each body, sample N=256 points of the full ellipse (E 0..2π) → LineLoop, opacity: inner planets 0.35, outer 0.22, color #5a7aa0? Use per-planet faint color (mixed with body color, 0.35 alpha). Pluto dashed: LineDashedMaterial requires computeLineDistances — do it, small extra. Belt points: Asteroid: for i<2600: a = 2.15 + rand*1.15 AU (some clustering in the Kirkwood gaps? Skip), y = gauss*0.05 AU, angle random; size attribute? PointsMaterial size 0.6? Points are in world units: at distance 300 units, 0.6 units ≈ 2px. OK sizeAttenuation true, color #8a8f99, opacity 0.8, transparent. Kuiper: a 32–48 AU, y gauss 0.6 AU, 1600 points, size 1.5, opacity 0.35, color #6f86a8. Also Oort hint? No. Sun: r=0.6963 units (radius). Sphere radius 0.70, 64 segments. Camera default: after intro, focus = Sun, radius=1800? Then Saturn 953 units is off-screen… fov 55°, at 1800 visible half-height = 1800*tan(27.5°)=940 → visible up to just past Saturn. Nice opening: inner planets + Jupiter clearly visible, Saturn at edge. Start radius 1500, elevation ~25°: phi from up: 1.15 rad. Camera min/max radius: 0.002 (for the Moon? Moon radius 0.0017 → allow 0.003) to 20000. Near 0.0005? log depth helps; near = 0.001, far = 250000 (stars at 120000?). Place star dome at radius 90000, far 200000. Log depth precision OK. Zoom factor per wheel notch: 1.35^steps. Movement keys: speed = radius * 1.2 /sec (shift ×6). Follow: when focused, camera target lerps to body position (target = body position directly, no lag). User WASD moves target in free mode → unfocus (focus=null). Clicking a planet in rail/minimap/label: focusBody(b): focus=b; desired radius = clamp(b.r*10, minForBody, ...) e.g. for the Sun: 25 (view the surface ~ r*3.6? Sun r 0.7, r*35=24 for a nice view). Define viewDist = b.r * (b.viewK || 12). Sun viewK 30 → 21. Earth: 6371km=0.006371*12=0.076 → camera 76,000 km from Earth center: Earth is 0.06371/0.076 rad ≈ 48° — too close! Earth angular size: 2*atan(0.00637/0.076)=9.6°… Actually 2*asin(0.00637/0.076) = 9.5° — fills 17% of 55° view height. OK, a bit close but fine; maybe viewK=20 → 0.127 → 5.8°. Use viewK: Sun 30, Jupiter 8 (0.0715? Jupiter r=69911 km=0.06991 units; *8=0.56 → 7.1° OK), small rocky 25, Pluto 15, Moon 10 (0.0017*10=0.017 → 2*asin(0.0017/0.017)=11.5°, hmm Moon is small so closer is fine: viewK 6 → 0.0104 → 19°? atan… 2*asin(0.00174/0.0104)=19.2° — nice for the Moon). Set per-body: mercury 18, venus 15, earth 18, mars 16, jupiter 8, saturn 9 (rings! Saturn ring outer 2.27 r → viewK 14 to include rings: 224,592 km… Saturn r=58,232 km=0.058232; ring outer 140,180 km=0.14018; viewK 20 → 1.16 units → ring fits comfortably at 7° ✓), uranus 12, neptune 12, pluto 12, moon 5. Tween: animate focus target from old to new body position over 1.2s with easeInOutCubic, radius also eased. Implement as a generic tween list. During follow, each frame targetPos = body world position (Moon's position computed relative to Earth). Raycast pick: raycaster with pickMesh list (each body has a pick sphere, invisible). On pointerup (if not a drag: track movement < 5px), raycast; if hit → focusBody. Also raycast the sun pick. Labels: for each body: div with a colored dot (name, camera distance). Update: project world position → screen; if behind (w<0) hide. Offset slightly above: project (pos + up*labelLift)? Simpler: project center, CSS translate(-50%,-140%). Also show a small crosshair for the focused body? Skip. Scale bar: distance d = camera to target (focus or camera position? use distance to scene point at target position (focus if any, else a fixed direction depth: use target = camera.position + dir * radius if free? Free mode has no target; define viewDist = radius anyway). ppu = (h/2)/(viewDist*tan(fov/2)). Choose a round km: candidates [1e3,2e3,5e3,1e4,2e4,5e4,1e5,2e5,5e5,1e6,2e6,5e6,1e7,2e7,5e7,1e8,...]; value v km, length px = v/1e6*ppu; pick the first with px in [70, 240]; draw a bar. Text: formatKm(v) + " 公里", if ≥1e9? 亿: v≥1e8 → (v/1e8).toFixed(v<1e9?2:1)+" 亿公里". Also a secondary: "≈ X.XX AU" (if ≥1 AU? always show: (v/1.496e8).toFixed(2)+" AU"). Minimap: 240px canvas (device pixels 2×). scale = 100 px / 42 AU → 42 AU = 168px fits Pluto at 39.5+e*? Max q = a(1+e)=39.48*1.249=49.3 AU! Pluto's aphelion 49.3 AU → need scale 168/50=3.36 px/AU → Neptune 101px. OK scale=3.3. Draw: orbits (precomputed 2D points from orbit sample xz), belts as a faint annulus (skip; maybe a subtle annulus stroke), sun, planets, moon hidden (too small), camera marker (white diamond at camera xz), camera view direction line (short)? Keep: marker + focus ring pulse. Click → if a body hit (within 10px) focus, else free move: set target to that world position (focus=null), tween target there, radius preserved… if very far, maybe adjust radius = min(radius, dist*3)? Simple: keep. Minimap labels? Tiny name next to dot for the 8 planets (8px font) — crowded but OK, only when zoomed? Draw names at 9px, alpha 0.8, offset from dot. Might be too busy; only draw name on hover + focus. Let's do: draw dots always; name label on hover or when focused. Planet rail (left): list with color dot, name Chinese, small name English, live distance from Sun (AU) — updates per frame? Updating text every frame for 10 items is fine (textContent is cheap). Click → focus. Hover → highlight. Also a sun at top. Top-right controls: time preset buttons + toggle row: 轨道 (orbits), 标签 (labels), 星带 (belts), 网格? no. Buttons: 回到太阳 (home ⌂). Also "今天" reset date to now. Top-left: title block: "SOLAR SYSTEM 1:1" small overline, "真实比例太阳系" big, line: simulation date + time rate. Bottom-left: key hints. Bottom-center: scale bar. Right: info card when focused (slide in). Bottom-right: minimap panel with "星图导航" label. Info card content: name CN big + EN small, type (恒星/类地行星/气态巨行星/冰巨行星/矮行星/卫星), stats grid: 直径, 距日距离 (current? use mean a), 公转周期, 自转周期, 表面温度, 已知卫星数, plus trivia paragraph, plus live "与您的距离: X" (live-updated), and a "停止跟随" button? Clicking elsewhere stops. Add a small button: [跟随中] click → stop (focus=null, retain position). Sun: 表面温度 5,500°C (core 15,000,000°C), 自转 25.4 天, 卫星 —, 直径 1,392,700 km, distance 0. Satellite count: Mercury 0, Venus 0, Earth 1, Mars 2, Jupiter 95, Saturn 146, Uranus 28, Neptune 16, Pluto 5. Temperatures: Mercury 167±173°C → "−173 ~ 427°C"; Venus 464°C; Earth 15°C; Mars −63°C; Jupiter −108°C; Saturn −139°C; Uranus −197°C; Neptune −201°C; Pluto −229°C; Moon —. 30. Colors (base + texture accent): - Sun #ffb347 - Mercury #9c8e84 - Venus #e6c98f - Earth #4f8fd8 (dot #5aa0ff) - Mars #d1683f - Jupiter #d8a56e - Saturn #e3c893 - Uranus #9fd8dc - Neptune #4a7bd8 - Pluto #b7a694 - Moon #c9c9cf 31. Texture generation details: makeTex(w,h, painter) → CanvasTexture. Use 512x256 for rocky, 1024x512 for gas giants (Jupiter/Saturn). Value noise JS: ```js function makeNoise(seed){ // returns noise2(x,y) with smooth interpolation, hash-based const perm = new Uint8Array(512); ... } ``` Simpler: use a hash-based value noise: ```js function hash(x,y){ const s=Math.sin(x*127.1+y*311.7)*43758.5453; return s-Math.floor(s); } function vnoise(x,y){ xi=floor, fract, smoothstep interp of 4-corner hash } function fbm(x,y,oct){ sum vnoise(2^k scaling) } ``` Seamless wrap in x (longitude): sample noise at (x/w * N) with period N → hash is not periodic… To avoid seams, blend: t = x/w; noise = mix(n(u), n(u - N), t) — standard trick: sample both ends: v = lerp( fbm(px - t*N? ) ) hmm, standard: value(x) where x is wrapped: v = (1-t)*fbm(u, v) + t*fbm(u - N, v). Implement fbmWrap(x, y, scale, oct): t = x (0..1); u = t*scale; return lerp(fbm(u, y), fbm(u-scale, y), t). This is periodic ✓. Mercury: base gray 0.55 + fbm*0.25; craters: draw ~140 circles with dark rims? Cheap: after base, loop random circles: radial gradient with dark center + light rim, alpha 0.15. Good. Venus: color ramp cream → tan by horizontal bands: t = y + 0.35*fbm(x*3, y*6) → mix(#e8d9b0, #c9a86a). Swirls. Earth: continent mask: c = fbm(x*4, y*4, 5) + 0.3*fbm(x*12,y*12,3); land = c > 0.52 → color: mix green #3d7a3a to brown #8a7a4a by second noise; shallow sea edge: if c in (0.5,0.52) mix #2a6db8→#3f8fd4; deep #123f78. Ice caps: lat = |y-0.5|*2 > 0.82 + 0.06*noise → white. Clouds: separate texture: alpha = smoothstep(fbm(x*5+100, y*7)) * 0.9, white. Cloud sphere radius r*1.02, transparent, depthWrite false. Mars: base mix(#a4482a, #c4714a, fbm), darker patches: if fbm(x*2+40, y*2)>0.6 multiply by 0.75; white polar caps at high latitudes. Jupiter: band: u = y + 0.10*fbm(x*8, y*3, 4)*? Classic: band color from palette by (y + turb*0.06), palette stripes: use a sine wave + noise-modulated: v = y*bandFreq + 0.15*fbm(x*6, y*2, 4); color = mix of 5 colors sampled by fract(v*?): better: define an array of stops for Jupiter palette: [#c8b39a? Actually Jupiter: cream #e3d2b5, rust #b07950? Hmm colors: [ 0.0 #a5714e? Let me define stripe stops: 0.00 #8c5a3c? too dark. Real Jupiter palette: #d8c8a8 (cream), #b8895e (tan), #8a5a44 (rust), #e8dcc8 (light), #a06a48. v = y + 0.08*fbm(x*6, y*1.5, 4) (turbulence displaces bands vertically) Pick by fract(v*7) via smooth bands: t2 = sin(v*PI*10 + small)*0.5+0.5? Use band = 0.5+0.5*sin(v * 34.0)?? With 1024x512: y 0..1, want ~9 bands: band(t)= 0.5+0.5*sin( (y + 0.06*fbm(x*5,y*2)) * 22 ). color = lerp(crustDark #9c6b4a, light #e6d7bc, band) then modulate with fbm*0.15 for streaks. Great Red Spot: at (x0=0.72, y0=0.62): dx = wrapdist(x-0.72)*aspect, dy=(y-0.62)*?; if d<1: blend #c25a3a with darker rim. Draw on the pixel loop (1024x512 = 524k px × fbm4… heavy in JS? Each px ~ 4 octaves × (vnoise = 4 hashes + sin) ≈ maybe 2-4s?? sin-based hash is slow. Reduce: precompute a noise grid at low resolution and sample with bilinear! Generate a 256x128 Float32 noise array once (with periodic x), sample with bilinear — fast. Let's do: makePeriodicNoise(w=256, h=128, octaves) → ImageData-like Float32 array; sample(x,y) with wrap. fbm becomes an octave sum of 3 precomputed grids. 1024x512 × 3 octaves × bilinear = 1.5M ops, fine (~50ms). Simplification: 1 helper class Noise2D(seed), .fbm(x,y,oct), periodic in x, non-periodic in y (poles OK). Implementation: for each octave k: grid size G=8*2^k? Compute the grid in a loop… Let me just implement: ```js function createNoise(seed){ const rand = mulberry32(seed); const grads = []; for(let k=0;k<5;k++){ const w = 8< to Google Fonts is fine. For a space HUD: "Orbitron" (display, Latin numerals/titles) + "Noto Sans SC" (Chinese). Orbitron for numerals/labels gives a HUD feel. Body Chinese: Noto Sans SC. Font stack fallbacks OK offline (system fonts). Include preconnect + link. - HUD corner brackets aesthetic (small L-shaped corner ticks on panels) — crafted touch. - Micro-interactions: buttons with hover glow, planet list item highlight, label hover scale, click pulse. Loading screen with progress (textures are generated locally, so a quick fake "calibrating scale" animation then reveal). 20. Structure of code: - HTML: canvas container, HUD overlay (title block top-left, controls top-right, planet rail left, minimap bottom-right, scale bar bottom-center, info card right-center, labels layer, intro overlay, loading). - JS: - Data table (bodies): name (Chinese + English), color, radiusKm, elements, rotation, tilt, ring?, moons?, trivia (Chinese), temperature, etc. - Constants: K = 1e6 km per unit. AU = 149.5978707 units. - Texture factory: makeCanvas(w,h,fn); noise: value noise via hash, fBm; banding function. - Scene build: starfield, sun (shader), planets, orbits, belts, moon. - Kepler solver. - Camera rig + input (pointer, wheel, keys, raycast picking with generous pick spheres). - Label update. - Minimap (orthographic 2D canvas, linear scale, click to focus, camera marker, trails?). - Scale bar. - Time system + date display. - Info panel populate + "distance from camera to target" live. - Intro overlay dismiss. 21. Picking: create an invisible sphere (Mesh with material visible:false) with radius = max(planetRadius*4, distanceDependent?) — actually the simplest, most robust approach: raycast against a pick sphere sized planetRadius*6, min 0.05 units? Mercury radius 0.00244 units → pick radius 0.05 = 50,000 km — at camera 100 units away, that's 0.03° ≈ 2px. Hmm, at far zoom clicking a planet is hard. Solution: planet rail (list) as primary navigation (big click target) + minimap + double-click on empty space? Also label clicks (HTML, easy to hit). Labels always visible with a small dot marker? Labels with distance text — clickable. That's enough. Also make pick spheres radius = max(r*5, 0.3)? At 500 units away, 0.3 units = 0.034° ~ 2px. OK, add pick spheres with max(r*8, 0.5) — at 1000 units, 3px. Acceptable; the main nav is list/minimap/labels. Sun picking: pick sphere radius 5? Sun radius is 0.696. Use 3 units for easy recenter. 22. Camera follow: focusTarget is a body or null (free). Each frame, if focused body, target position = body position; camera position = target + spherical offset (with damping). Free move: keys move the target in camera space (speed ∝ radius*0.5 per second, shift ×8). Wheel zoom: radius *= pow(0.88, -deltaY/100)? Smooth: keep a targetRadius, exponentially damped approach (lerp factor 1-exp(-dt*8)). Initial view: from "today" — start outside the system: camera at (0, 2600, 4200)? So the whole inner system + up to Saturn is visible, looking at the Sun. Intro overlay covers; on start, a brief fly-in (tween from far 9000 to 3000 in 2.5 seconds) — cinematic. 23. Info card data (in Chinese): - 太阳: diameter 1.392 million km; surface 5,500°C; type G2V; contains 99.86% of the system's mass. - 水星 Mercury: diameter 4,879 km; day 58.6 Earth days; year 88 days; surface -173~427°C; no atmosphere; cratered surface like the Moon. - 金星 Venus: 12,104 km; day 243 Earth days (retrograde); year 225 days; surface 465°C; densest CO₂ atmosphere, runaway greenhouse effect; brightest natural object in the night sky. - 地球 Earth: 12,742 km; day 24h; year 365.25 days; the only planet with confirmed life; 71% ocean. - 火星 Mars: 6,779 km; day 24.6h; year 687 days; Olympus Mons, 22 km tall, largest volcano in the solar system; currently explored by multiple rovers. - 木星 Jupiter: 139,820 km; day 9.9h; year 11.86 years; 7× the mass of all other planets combined; Great Red Spot is a storm that's raged for over 300 years. - 土星 Saturn: 116,460 km; day 10.7h; year 29.4 years; rings are made of ice and rock, thickness only about 10 meters; density lower than water. - 天王星 Uranus: 50,724 km; day 17.2h (retrograde); year 84 years; axial tilt 97.8°, rolls along its orbit. - 海王星 Neptune: 49,244 km; day 16.1h; year 164.8 years; fastest winds in the solar system, over 2,000 km/h; first planet discovered via mathematics. - 冥王星 Pluto: 2,377 km; year 248 years; eccentric orbit 0.249, sometimes closer to the Sun than Neptune. - 月球 Moon: 3,474 km; 384,400 km from Earth; tides lock — one side always faces Earth. 24. Minimap: canvas 220x220, scale: 65 AU → 200px → 3.08 px/AU… Neptune 30AU=92px, Pluto 39.5=122px, OK. Draw orbits (faint circles at a×scale — true ellipses would be better but circles are fine for a minimap? Ellipses with e — cheap: sample 64 points from the same function? Reuse the precomputed orbit points (already computed for 3D lines): project xz → 2d. Do it, cheap.) Dots 2–3px, colored; Sun 4px amber; camera marker: triangle/diamond at camera xz; focus highlight ring. Click: nearest body within 12px → focus; otherwise set free target to that world position (nice: click on empty space to travel!). Hover: show name? Skip minimap hover (scope), add cursor pointer on body hover via simple hit test on mousemove — cheap, do it. 25. Labels: for each planet: div with dot + name + live distance from camera in 亿km. Style: small caps, letter-spaced, semi-transparent, hover→brighter. When body focused, its label becomes "current target". Also a sun label. Hide labels when the planet is very close (camera inside pick range?) or behind camera. Fade by screen size? Keep simple: always shown except when behind camera (dot product) or when the projected point is off-screen. Also show a distance to Sun in AU on the planet label? Just camera distance: e.g. "1.21 亿 km". When large: 2,000,000,000 km → "20.0 亿 km". Format: if ≥1e8 km then 亿km (1 decimal); else if ≥1e4 km then 万km; else km. 26. Time: simulation clock. Date format: YYYY年MM月DD日 (simulation). Time speed display "1 秒 = 1 天". Preset buttons: 暂停 / 1时 / 1日 / 1周 / 1月 / 1年 / 5年 (per second). Reset to now button (↺今天). 27. Loading: textures are generated quickly (canvas ops are ~ms). Show a loading screen with an animated orbital diagram (CSS) and "正在按 1:1,000,000,000 比例校准…" then fade. Actually the scale is 1 unit = 1,000,000 km → if 1 pixel is…? Not a fixed scale to px; it's a 3D scene with no fixed px scale. Say "比例尺: 1 单位 = 100 万公里"? The intro copy: "场景比例 1:1 — 所有天体大小与距离均按真实比例 (1 单位 = 1,000 万公里? No: 1e6 km = 100 万公里 = 100 M km)". 1 AU = 1.496e8 km = 149.6 units. Scale factor if 1 unit = 1 px? No. Let me express: "1:1.5 亿"? 1 AU = 1.496e8 km. If 1 unit=1e6 km, then the system is at 1:100 万 km per unit… Simplest honest copy: "所有尺寸与距离严格等比:太阳半径 0.70 单位,海王星轨道 4,500 单位,1 单位 = 1,000 万公里." Hmm 1e6 km = 100 万km. 1e6 km = 一百万公里. Yes "1 单位 = 100 万公里" is wrong: 1,000,000 km = 100 万公里 ✓ (1 万=10⁴, 10⁶ = 100 万). Correct: 1,000,000 km = 100 万公里. ✓ And 1 AU = 1.496 亿 km ✓. Intro copy: "真实比例 · 太阳系在 1:1 的真实尺度下—— 如果太阳缩小为 1 米,地球只有 4.5 毫米,远在 68 米之外。在这里,行星是星空中几近不可见的光点,这才是宇宙的本真面貌。 [进入太阳系 →]" Plus a small stats line: "1 AU = 1.496 亿 km · 场景单位 1 = 100 万公里". 28. Edge cases: mobile — pointer events unified; UI responsive: on small screens hide the rail? Add basic media queries (collapse panel, smaller minimap). Provide a hint "拖拽旋转 · 滚轮缩放 · WASD 移动 · 点击天体跟随". 29. Code size: big but fine. Let me write it carefully to avoid runtime errors. Now let me write the key algorithms: Kepler: ```js function keplerPosition(el, days){ // el: {a,e,i,O,w, M0, period} degrees const n = 360/el.period; let M = rad(el.M0 + n*days); M = M % (2*Math.PI); let E = M + el.e*Math.sin(M); for(let k=0;k<10;k++){ const f = E - el.e*Math.sin(E) - M; const fp = 1 - el.e*Math.cos(E); E -= f/fp; } const a = el.a; const x0 = a*(Math.cos(E)-el.e); const y0 = a*Math.sqrt(1-el.e*el.e)*Math.sin(E); // rotate const cO=Math.cos(rad(el.O)), sO=Math.sin(rad(el.O)); const ci=Math.cos(rad(el.i)), si=Math.sin(rad(el.i)); const cw=Math.cos(rad(el.w)), sw=Math.sin(rad(el.w)); // ecliptic coords (x,y in plane, z up) const x1 = cO*cw - sO*sw*ci... ``` Standard rotation: X = (cO·cw − sO·sw·ci)·x0 + (−cO·sw − sO·cw·ci)·y0 Y = (sO·cw + cO·sw·ci)·x0 + (−sO·sw + cO·cw·ci)·y0 Z = (sw·si)·x0 + (cw·si)·y0 Then map to three.js: x=X, y=Z, z=−Y (keep right-handed, ecliptic north up). Sign of y (three up) = Z. x and z: X→x, Y→z (direction doesn't matter visually). Use vec3(X, Z, -Y)? Let's just use (X, Z, Y) — fine. M0 from the table: M0 = L - ω̃ (longitude of perihelion). Let me precompute M0: - Mercury: L=252.25032, ϖ=77.45780 → M0=174.79252 ✓ matches known 174.79. - Venus: L=181.97910, ϖ=131.60247 → M0=50.37663 (known ~50.416, close; rounding from my memory of L. OK.) - Earth: L=100.46457, ϖ=102.93768 → M0=-2.47311→357.52689 (known 358.617 with different epoch convention; fine.) - Mars: L=-4.55343, ϖ=-23.94363 → M0=19.39020 ✓ (known 19.412) - Jupiter: L=34.39644, ϖ=14.72848 → M0=19.66796 (known 20.020 close) - Saturn: L=49.95424, ϖ=92.59888 → M0=-42.64464→317.35536 (known 317.020 close) - Uranus: L=313.23810, ϖ=170.95428 → M0=142.28382 ✓ (known 142.239) - Neptune: L=-55.12003, ϖ=44.96476 → M0=-100.08479→259.91521 (known 260.247 close) ω = ϖ − Ω: - Mercury: 77.45780−48.33077=29.12703 ✓ - Venus: 131.60247−76.67984=54.92263 ✓ - Earth: 102.93768−0=102.93768 (known ϖ=102.947, with Ω=-11.26; fine) - Mars: −23.94363−49.55954=−73.50317→286.49683 ✓ - Jupiter: 14.72848−100.47391=−85.74543→274.25457 (known 273.867 close) - Saturn: 92.59888−113.66242=−21.06354→338.93646 (known 339.392 close) - Uranus: 170.95428−74.01693=96.93735 ✓ - Neptune: 44.96476−131.78423=−86.81947→273.18053 (known 273.187 ✓) Good, I'll store a,e,i,O,ω,M0,period and compute directly. Pluto (approx J2000): a=39.482, e=0.2488, i=17.14, Ω=110.299, ϖ=224.07 → ω=113.78? Compute ω = 224.07−110.30=113.77. L0=238.93 → M0=238.93−224.07=14.86. period=90560 days (248 years). Good enough. Moon: circular orbit around Earth: a=0.3844 units (384,400 km), period 27.3217 days, i=5.14°. Simplify: position = earthPos + (cos θ, 0, -sin θ)*a rotated by inclination — simple: angle θ=2π*days/27.3217 + phase. Sun shader (r128 GLSL1): Vertex: pass normal and position. Fragment: 3D value noise fBm of (position*freq + time*small) → color ramp #ff5a00 → #ffd27a → #fff3c4; add limb darkening via dot(normal, viewDir)? For glow, use standard emissive: make the Sun unlit: MeshBasicMaterial can't do shader; use ShaderMaterial with vNormal, vViewDir; color *= (0.75+0.25*facing) etc. Plus a separate corona sprite (additive, canvas radial gradient) with scale = sunRadius*8, and 2 layers with different animation. PointLight(0xffe0b0, 1.4) at origin; also small ambient 0x223 (0.25). Value noise in GLSL: hash function sin-based; 3D value noise with trilinear; 4 octaves of fBm. Fine. Fresnel atmosphere shader: ``` uniform vec3 color; varying vec3 vN; varying vec3 vP; // view space intensity = pow(1.0 - abs(dot(normalize(vN), normalize(cameraPosition - vP)))? ``` Simpler: view-space normal and view direction: a = 1 - |dot(N, V)|; alpha = pow(a, 3) * 1.2; side: render sphere at r*1.06 with additive, side: BackSide for halo? Common trick: BackSide sphere slightly larger, alpha = pow(dot(N,V)+1, k)? Let's use FrontSide additive rim: alpha = pow(1 - |dot(N,V)|, 2.5). At glancing angles it glows as a rim. Enough for a thin glow. Planet material: MeshPhongMaterial with map, shininess 8, slight specular 0x111111. Gas giants shininess 4. Orbit lines: for each body, sample N=256 points of the full ellipse (E 0..2π) → LineLoop, opacity: inner planets 0.35, outer 0.22, color #5a7aa0? Use per-planet faint color (mixed with body color, 0.35 alpha). Pluto dashed: LineDashedMaterial requires computeLineDistances — do it, small extra. Belt points: Asteroid: for i<2600: a = 2.15 + rand*1.15 AU (some clustering in the Kirkwood gaps? Skip), y = gauss*0.05 AU, angle random; size attribute? PointsMaterial size 0.6? Points are in world units: at distance 300 units, 0.6 units ≈ 2px. OK sizeAttenuation true, color #8a8f99, opacity 0.8, transparent. Kuiper: a 32–48 AU, y gauss 0.6 AU, 1600 points, size 1.5, opacity 0.35, color #6f86a8. Also Oort hint? No. Sun: r=0.6963 units (radius). Sphere radius 0.70, 64 segments. Camera default: after intro, focus = Sun, radius=1800? Then Saturn 953 units is off-screen… fov 55°, at 1800 visible half-height = 1800*tan(27.5°)=940 → visible up to just past Saturn. Nice opening: inner planets + Jupiter clearly visible, Saturn at edge. Start radius 1500, elevation ~25°: phi from up: 1.15 rad. Camera min/max radius: 0.002 (for the Moon? Moon radius 0.0017 → allow 0.003) to 20000. Near 0.0005? log depth helps; near = 0.001, far = 250000 (stars at 120000?). Place star dome at radius 90000, far 200000. Log depth precision OK. Zoom factor per wheel notch: 1.35^steps. Movement keys: speed = radius * 1.2 /sec (shift ×6). Follow: when focused, camera target lerps to body position (target = body position directly, no lag). User WASD moves target in free mode → unfocus (focus=null). Clicking a planet in rail/minimap/label: focusBody(b): focus=b; desired radius = clamp(b.r*10, minForBody, ...) e.g. for the Sun: 25 (view the surface ~ r*3.6? Sun r 0.7, r*35=24 for a nice view). Define viewDist = b.r * (b.viewK || 12). Sun viewK 30 → 21. Earth: 6371km=0.006371*12=0.076 → camera 76,000 km from Earth center: Earth is 0.06371/0.076 rad ≈ 48° — too close! Earth angular size: 2*atan(0.00637/0.076)=9.6°… Actually 2*asin(0.00637/0.076) = 9.5° — fills 17% of 55° view height. OK, a bit close but fine; maybe viewK=20 → 0.127 → 5.8°. Use viewK: Sun 30, Jupiter 8 (0.0715? Jupiter r=69911 km=0.06991 units; *8=0.56 → 7.1° OK), small rocky 25, Pluto 15, Moon 10 (0.0017*10=0.017 → 2*asin(0.0017/0.017)=11.5°, hmm Moon is small so closer is fine: viewK 6 → 0.0104 → 19°? atan… 2*asin(0.00174/0.0104)=19.2° — nice for the Moon). Set per-body: mercury 18, venus 15, earth 18, mars 16, jupiter 8, saturn 9 (rings! Saturn ring outer 2.27 r → viewK 14 to include rings: 224,592 km… Saturn r=58,232 km=0.058232; ring outer 140,180 km=0.14018; viewK 20 → 1.16 units → ring fits comfortably at 7° ✓), uranus 12, neptune 12, pluto 12, moon 5. Tween: animate focus target from old to new body position over 1.2s with easeInOutCubic, radius also eased. Implement as a generic tween list. During follow, each frame targetPos = body world position (Moon's position computed relative to Earth). Raycast pick: raycaster with pickMesh list (each body has a pick sphere, invisible). On pointerup (if not a drag: track movement < 5px), raycast; if hit → focusBody. Also raycast the sun pick. Labels: for each body: div with a colored dot (name, camera distance). Update: project world position → screen; if behind (w<0) hide. Offset slightly above: project (pos + up*labelLift)? Simpler: project center, CSS translate(-50%,-140%). Also show a small crosshair for the focused body? Skip. Scale bar: distance d = camera to target (focus or camera position? use distance to scene point at target position (focus if any, else a fixed direction depth: use target = camera.position + dir * radius if free? Free mode has no target; define viewDist = radius anyway). ppu = (h/2)/(viewDist*tan(fov/2)). Choose a round km: candidates [1e3,2e3,5e3,1e4,2e4,5e4,1e5,2e5,5e5,1e6,2e6,5e6,1e7,2e7,5e7,1e8,...]; value v km, length px = v/1e6*ppu; pick the first with px in [70, 240]; draw a bar. Text: formatKm(v) + " 公里", if ≥1e9? 亿: v≥1e8 → (v/1e8).toFixed(v<1e9?2:1)+" 亿公里". Also a secondary: "≈ X.XX AU" (if ≥1 AU? always show: (v/1.496e8).toFixed(2)+" AU"). Minimap: 240px canvas (device pixels 2×). scale = 100 px / 42 AU → 42 AU = 168px fits Pluto at 39.5+e*? Max q = a(1+e)=39.48*1.249=49.3 AU! Pluto's aphelion 49.3 AU → need scale 168/50=3.36 px/AU → Neptune 101px. OK scale=3.3. Draw: orbits (precomputed 2D points from orbit sample xz), belts as a faint annulus (skip; maybe a subtle annulus stroke), sun, planets, moon hidden (too small), camera marker (white diamond at camera xz), camera view direction line (short)? Keep: marker + focus ring pulse. Click → if a body hit (within 10px) focus, else free move: set target to that world position (focus=null), tween target there, radius preserved… if very far, maybe adjust radius = min(radius, dist*3)? Simple: keep. Minimap labels? Tiny name next to dot for the 8 planets (8px font) — crowded but OK, only when zoomed? Draw names at 9px, alpha 0.8, offset from dot. Might be too busy; only draw name on hover + focus. Let's do: draw dots always; name label on hover or when focused. Planet rail (left): list with color dot, name Chinese, small name English, live distance from Sun (AU) — updates per frame? Updating text every frame for 10 items is fine (textContent is cheap). Click → focus. Hover → highlight. Also a sun at top. Top-right controls: time preset buttons + toggle row: 轨道 (orbits), 标签 (labels), 星带 (belts), 网格? no. Buttons: 回到太阳 (home ⌂). Also "今天" reset date to now. Top-left: title block: "SOLAR SYSTEM 1:1" small overline, "真实比例太阳系" big, line: simulation date + time rate. Bottom-left: key hints. Bottom-center: scale bar. Right: info card when focused (slide in). Bottom-right: minimap panel with "星图导航" label. Info card content: name CN big + EN small, type (恒星/类地行星/气态巨行星/冰巨行星/矮行星/卫星), stats grid: 直径, 距日距离 (current? use mean a), 公转周期, 自转周期, 表面温度, 已知卫星数, plus trivia paragraph, plus live "与您的距离: X" (live-updated), and a "停止跟随" button? Clicking elsewhere stops. Add a small button: [跟随中] click → stop (focus=null, retain position). Sun: 表面温度 5,500°C (core 15,000,000°C), 自转 25.4 天, 卫星 —, 直径 1,392,700 km, distance 0. Satellite count: Mercury 0, Venus 0, Earth 1, Mars 2, Jupiter 95, Saturn 146, Uranus 28, Neptune 16, Pluto 5. Temperatures: Mercury 167±173°C → "−173 ~ 427°C"; Venus 464°C; Earth 15°C; Mars −63°C; Jupiter −108°C; Saturn −139°C; Uranus −197°C; Neptune −201°C; Pluto −229°C; Moon —. 30. Colors (base + texture accent): - Sun #ffb347 - Mercury #9c8e84 - Venus #e6c98f - Earth #4f8fd8 (dot #5aa0ff) - Mars #d1683f - Jupiter #d8a56e - Saturn #e3c893 - Uranus #9fd8dc - Neptune #4a7bd8 - Pluto #b7a694 - Moon #c9c9cf 31. Texture generation details: makeTex(w,h, painter) → CanvasTexture. Use 512x256 for rocky, 1024x512 for gas giants (Jupiter/Saturn). Value noise JS: ```js function makeNoise(seed){ // returns noise2(x,y) with smooth interpolation, hash-based const perm = new Uint8Array(512); ... } ``` Simpler: use a hash-based value noise: ```js function hash(x,y){ const s=Math.sin(x*127.1+y*311.7)*43758.5453; return s-Math.floor(s); } function vnoise(x,y){ xi=floor, fract, smoothstep interp of 4-corner hash } function fbm(x,y,oct){ sum vnoise(2^k scaling) } ``` Seamless wrap in x (longitude): sample noise at (x/w * N) with period N → hash is not periodic… To avoid seams, blend: t = x/w; noise = mix(n(u), n(u - N), t) — standard trick: sample both ends: v = lerp( fbm(px - t*N? ) ) hmm, standard: value(x) where x is wrapped: v = (1-t)*fbm(u, v) + t*fbm(u - N, v). Implement fbmWrap(x, y, scale, oct): t = x (0..1); u = t*scale; return lerp(fbm(u, y), fbm(u-scale, y), t). This is periodic ✓. Mercury: base gray 0.55 + fbm*0.25; craters: draw ~140 circles with dark rims? Cheap: after base, loop random circles: radial gradient with dark center + light rim, alpha 0.15. Good. Venus: color ramp cream → tan by horizontal bands: t = y + 0.35*fbm(x*3, y*6) → mix(#e8d9b0, #c9a86a). Swirls. Earth: continent mask: c = fbm(x*4, y*4, 5) + 0.3*fbm(x*12,y*12,3); land = c > 0.52 → color: mix green #3d7a3a to brown #8a7a4a by second noise; shallow sea edge: if c in (0.5,0.52) mix #2a6db8→#3f8fd4; deep #123f78. Ice caps: lat = |y-0.5|*2 > 0.82 + 0.06*noise → white. Clouds: separate texture: alpha = smoothstep(fbm(x*5+100, y*7)) * 0.9, white. Cloud sphere radius r*1.02, transparent, depthWrite false. Mars: base mix(#a4482a, #c4714a, fbm), darker patches: if fbm(x*2+40, y*2)>0.6 multiply by 0.75; white polar caps at high latitudes. Jupiter: band: u = y + 0.10*fbm(x*8, y*3, 4)*? Classic: band color from palette by (y + turb*0.06), palette stripes: use a sine wave + noise-modulated: v = y*bandFreq + 0.15*fbm(x*6, y*2, 4); color = mix of 5 colors sampled by fract(v*?): better: define an array of stops for Jupiter palette: [#c8b39a? Actually Jupiter: cream #e3d2b5, rust #b07950? Hmm colors: [ 0.0 #a5714e? too dark. Real Jupiter palette: #d8c8a8 (cream), #b8895e (tan), #8a5a44 (rust), #e8dcc8 (light), #a06a48. v = y + 0.08*fbm(x*6, y*1.5, 4) (turbulence displaces bands vertically) Pick by fract(v*7) via smooth bands: t2 = sin(v*PI*10 + small)*0.5+0.5? Use band = 0.5+0.5*sin(v * 34.0)?? With 1024x512: y 0..1, want ~9 bands: band(t)= 0.5+0.5*sin( (y + 0.06*fbm(x*5,y*2)) * 22 ). color = lerp(crustDark #9c6b4a, light #e6d7bc, band) then modulate with fbm*0.15 for streaks. Great Red Spot: at (x0=0.72, y0=0.62): dx = wrapdist(x-0.72)*aspect, dy=(y-0.62)*?; if d<1: blend #c25a3a with darker rim. Draw on the pixel loop (1024x512 = 524k px × fbm4… heavy in JS? Each px ~ 4 octaves × (vnoise = 4 hashes + sin) ≈ maybe 2-4s?? sin-based hash is slow. Reduce: precompute a noise grid at low resolution and sample with bilinear! Generate a 256x128 Float32 noise array once (with periodic x), sample with bilinear — fast. Let's do: makePeriodicNoise(w=256, h=128, octaves) → ImageData-like Float32 array; sample(x,y) with wrap. fbm becomes an octave sum of 3 precomputed grids. 1024x512 × 3 octaves × bilinear = 1.5M ops, fine (~50ms). Simplification: 1 helper class Noise2D(seed), .fbm(x,y,oct), periodic in x, non-periodic in y (poles OK). Implementation: for each octave k: grid size G=8*2^k? Compute the grid in a loop… Let me just implement: ```js function createNoise(seed){ const rand = mulberry32(seed); const grads = []; for(let k=0;k<5;k++){ const w = 8<0? Legacy: attenuation = pow(clamp(-d/distance+1), decay) if distance>0 else 1. So distance=0 → no attenuation. Set (0xffdcb0, 2.4, 0). Ambient: 0x334455, 0.5? Planet night side is nearly black — slightly better: ambient 0x1c2733, 1.0? In legacy, ambient intensity 1 * color is dim. Use AmbientLight(0x223044, 0.7)? Hmm ambient color 0x223044 is dim; intensity 1. Use AmbientLight(0x2a3448, 0.9). Also add subtle hemispheric? No. 33. r128 with log depth buffer: THREE.LogarithmicDepthBuffer via renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer:true}) ✓ works in r128. Near 0.0008, far 300000. 34. Starfield: - Random 3500 points on a sphere at r 80000..140000 (radius 100000 with jitter? Points at different radii look fine), size 2–3 (sizeAttenuation false for crispness, size in px: 1.6). Use two Points objects: small (size 1.5, opacity 0.8, 4500) and bright (size 2.6, opacity 1, 600, slight blue/amber tints via vertexColors). Milky Way band: 2500 points clustered near a great circle (random on sphere, then y' = y*0.12 compress toward band, rotate band 60°), warm gray color, size 1.2, opacity 0.5. Also a big faint glow sprite on the galactic center? Skip. PointsMaterial sizeAttenuation:false is fine with log depth. Star dome at 100k; far 300k ✓. 35. UI CSS: - :root colors: --bg #04060c; --panel rgba(10,16,28,.72); --line rgba(120,160,220,.18); --txt #cfe0f4; --dim #7f93ad; --amber #ffb454; --cyan #7fd8ff. - Fonts: 'Orbitron' for .num/display Latin, 'Noto Sans SC' for body. Link: families Orbitron:wght@500;700;900 & Noto+Sans+SC:wght@300;400;500;700. - Panels: border 1px solid var(--line); background var(--panel); backdrop-filter blur(8px) (subtle, not a full glass aesthetic); corner ticks via ::before/::after with amber 2px borders (top-left and bottom-right ticks) — a crafted detail. - Buttons: transparent, 1px border, hover: border amber, text amber, translateY(-1px); active preset: amber background 12% + amber text. - Rail items: hover background rgba amber .08, dot glow. - Label: font 11px letter-spacing .12em; dot 5px; distance 10px Orbitron dim; hover scale 1.08; cursor pointer. - Info card: width 300px; slide-in transform translateX(16px)→0, opacity; border-left 2px solid body color (set via JS style). - Title: overline "SOLAR SYSTEM · TRUE SCALE 1:1" Orbitron 10px letter-space amber; h1 "真实比例太阳系" 22px 700; below: date line. - Loading: full screen #04060c, centered: CSS orbital animation (ring + rotating dot), text "正在校准 1:1 比例…" with progress %; JS advances as textures are built (yield via setTimeout between planets). - Intro: left-anchored block? Center-left: big display "SOLAR SYSTEM" Orbitron 64px stroke? Let's do: left-aligned panel, max-width 520px, vertically centered, with a "真实尺度宣言": lines with staggered fade (CSS animation delay). Button: "进入太阳系" amber solid + "了解真实比例?" no. Keep: one button + a hint "拖拽旋转 / 滚轮缩放 / WASD 自由飞行". Actually make the intro distinctive: a "比例警报" style: 3 stat rows animating in (太阳→地球 4.5mm @68m etc). Good. 36. Responsive: media (max-width: 820px): hide the rail (or move to a top row? Simple: hide rail, keep minimap smaller 170px, info card becomes a bottom sheet, hide some hints). Provide basic adjustments. 37. Performance: 10 texture generations (up to 512–1024 wide). Use requestIdleCallback? Just sequential with await new Promise(r=>setTimeout(r)) between each to keep UI updated; show loading progress. Total ~200–600ms, fine. 38. Now, format function: ```js function fmtKm(km){ if(km>=1e11) return (km/1e11).toFixed(1)+' 万亿 km'? ``` Simplify in Chinese units: 万 = 1e4, 亿 = 1e8. - km >= 1e8: (km/1e8) → e.g. 1.496 亿 km; if km/1e8 >= 100? toFixed(1) → e.g. 247 亿 km; use adaptive decimals: v>=100 → 0 decimals? Do: v>=10 → 1 decimal; else 2 decimals. - else if >= 1e4: (km/1e4) 万 km 1 decimal. - else Math.round km + ' km'. AU format: (km/1.496e8) toFixed(2) AU. Date: from J2000 epoch ms = Date.UTC(2000,0,1,12). simMs = epoch + simDays*86400000; use Date object; format YYYY.MM.DD. simDays initial = (now - epoch)/86400000. Speed presets: [{label:'⏸ 暂停',v:0},{ '1 时/s', 1/24 }, {'1 天/s',1},{'1 周/s',7},{'1 月/s',30.437},{'1 年/s',365.25},{'5 年/s',1826.25}]. 39. Info "与您的距离" live: camDist = camera.position.distanceTo(bodyWorldPos) units → *1e6 km → fmtKm. Rail "距日" live: dist from sun (position.length()) * AU? position is in units, 1 unit = 1e6/149.598 AU… 1 AU = 149.5978707 units → distAU = len/149.598. toFixed(2). 40. Moon orbit line: a small circle around Earth — only visible when close; draw as small LineLoop radius 0.3844 tilted 5°; low opacity; maybe toggle with orbits. It moves with Earth (a child of the earth group? Earth group origin is at sun? Structure: each planet has group at world position (set each frame from kepler). Moon: child of Earth group, position computed. Moon's orbit circle is also a child of Earth group. ✓ But Earth group rotates? Don't rotate the group; the tilt is on the inner spin group. OK: planet.group (position), planet.spin (tilt + rotation: mesh, ring, atmosphere, cloud), planet.pick (child of group, big sphere). Moon: group child? Moon is a body in the body list for info/focus, its own group (moonGroup) is a child of the Earth group; position is local offset. worldPos via getWorldPosition. ✓ Focus on Moon: follow works via getWorldPosition each frame. Moon orbit circle: child of Earth group at local origin? Earth group position = Earth world position; moon local = (cosA*0.3844, sin(i5)*?, -sinA*0.3844). Moon orbit line: circle in local xz plane, tilted z 5.14° — child of Earth group ✓. Moon spin: tidally locked → rotation.y = A (same angle), so the same face points at Earth. Set rotation.y = A + PI. 41. Body list order & UI: sun, mercury, venus, earth, moon, mars, jupiter, saturn, uranus, neptune, pluto. Moon entry in rail (indent 卫星). 42. Camera initial: focus Sun; theta 2.6, phi 1.12, radius start 9000 → tween to 1500 over 2.2s on start. During intro, render behind (overlay is translucent? overlay is 94% opaque; fine, scene warms up behind). 43. Pointer events: pointerdown/move/up on renderer.domElement; track drag rotate (left) — right drag or middle = pan? Keep: left drag rotate, right drag / two-finger pan → pan target (free offset). Mobile: single-finger rotate, pinch zoom (handle 2 pointers: compute distance change → radius scale). Implement minimal pinch: track pointers map; if 2 active, pinch zoom + pan by centroid delta. OK. Wheel: e.preventDefault (passive:false), radius target *= pow(1.0016, deltaY)? deltaY ~ 100 per notch → factor 1.172. Use radiusT *= Math.pow(1.15, deltaY/100)? Smoothly: accumulate. Keys: W/S forward/back (target ± dir), A/D strafe, Q/E or R/F vertical. Shift ×6. While moving, if focused → detach (focus=null) but keep the body at the new target? Detach: just stop following (target stays at body position, camera offset unchanged) — feels natural. Space: toggle pause (time) — nice. H: toggle HUD? Skip. 44. Picking: raycaster from pointer NDC; intersect pick meshes (invisible but raycastable — set material.visible=false? If mesh.visible=false, raycaster skips. Use material opacity 0, transparent, depthWrite false, colorWrite false? Safer: material.visible = false — but does raycast work regardless of material.visible? THREE Raycaster checks object.visible (object flag), not material.visible. Set mesh.visible=true, material with colorWrite:false, depthWrite:false, transparent:true, opacity:0 → invisible but drawn (negligible cost). Even simpler: mesh.visible = true; mat = new MeshBasicMaterial(); mat.visible = false? Material.visible=false skips render ✓ and raycast uses geometry ✓. Yes: material.visible=false works (renderer skips, raycaster unaffected). Use that. 45. Label layer: absolute inset-0 pointer-events none; children pointer-events auto. 46. Number formatting in Orbitron for numeric readouts. 47. Also add subtle vignette (radial-gradient overlay) + faint film grain? Vignette only (CSS). 48. "网格" ecliptic grid toggle? A faint polar grid (rings at 5 AU intervals + spokes) helps scale sense… Orbit lines already give scale. Skip. Let me write the JS carefully. Data structure: ```js const KM = 1e6; // km per unit const AU = 149.5978707; // units const DEG = Math.PI/180; const BODIES = [ { id:'sun', cn:'太阳', en:'SUN', type:'恒星', rKm:695700, color:0xffb454, dot:'#ffb454', viewK:30, fact:'太阳占太阳系总质量的 99.86%。若缩小为 1 米,地球仅 4.5 毫米,远在 68 米外。', stats:{ 直径:'1,392,700 km', 距日:'—', 公转:'—', 自转:'25.4 天 (赤道)', 温度:'表面 5,500 °C', 卫星:'8 颗行星' } }, planets: { id, cn, en, type, rKm, color(dot hex), a, e, i, O, w, M0, periodDays, day (自转 period days, - = retro), tilt(deg), tex fn key, viewK, atmo color, fact, stats } ] ``` Planets data (a in AU, converted to units later; or store a directly in units? Store in AU, multiply AU at position compute — fine). mercury: rKm 2439.7, a .38709927, e .20563593, i 7.00497902, O 48.33076593, ϖ 77.45779628, L 252.25032350, T 87.9691, day 58.646, tilt .03, color '#a89f96' venus: 6051.8, .72333566, .00677672, 3.39467605, 76.67984255, 131.60246718, 181.97909950, 224.701, day -243.025, tilt 177.4 (retrograde via negative day; tilt 177 looks weird for spin axis; use tilt 3 and negative spin), color '#e8c78c' earth: 6371, 1.00000261, .01671123, -.00001531, 0, 102.93768193, 100.46457166, 365.256, day .99727, tilt 23.44, '#5aa0ff' moon: rKm 1737.4, orbit around Earth a 0.3844 units (store moonDist=384400 km → /KM = 0.3844), period 27.321661, color '#cfd2d8' mars: 3389.5, 1.52371034, .09339410, 1.84969142, 49.55953891, -23.94362959, -4.55343205, 686.98, day 1.02596, tilt 25.19, '#e0714a' jupiter: 69911, 5.202887, .04838624, 1.30439695, 100.47390909, 14.72847983, 34.39644051, 4332.589, day .41354, tilt 3.13, '#d8a877' saturn: 58232, 9.53667594, .05386179, 2.48599187, 113.66242448, 92.59887831, 49.95424423, 10759.22, day .44401, tilt 26.73, ring, '#e6c896' uranus: 25362, 19.18916464, .04725744, .77263783, 74.01692503, 170.95427630, 313.23810451, 30688.5, day -.71833, tilt 97.77, '#9fdbe0' neptune: 24622, 30.06992276, .00859048, 1.77004347, 131.78422574, 44.96476227, -55.12002969, 60182, day .67125, tilt 28.32, '#5b8def' pluto: 1188.3, 39.482, .2488, 17.14, 110.299, 224.066, 238.929, 90560, day -6.387, tilt 122.5, '#c2a98c', dwarf Compute M0 = L - varpi (mod 360), w = varpi - O (mod 360) — compute in code: store L and varpi, compute M0 and w programmatically to reduce typos. Stats per planet for the card: - mercury: 直径 4,879 km; 距日 0.39 AU (5,790 万 km); 公转 88 天; 自转 58.6 天; 温度 -173~427°C; 卫星 0. fact: '表面布满陨石坑,昼夜温差超过 600°C,是温差最大的行星。' - venus: 12,104; 0.72 AU (1.08 亿 km); 224.7 天; 243 天 (逆行); 464°C; 0. '二氧化碳大气引发失控温室效应——比水星更靠近太阳的水星反而更冷。' Venus is hotter than Mercury ✓ - earth: 12,742; 1 AU (1.496 亿); 365.25 天; 23.93 小时; 平均 15°C; 1. '唯一已知存在生命的行星。若太阳缩小为 1 米,地球只是 68 米外的 4.5 毫米小球。' - moon: 3,474; 距地 38.44 万 km; 公转 27.3 天; 自转 = 公转 (潮汐锁定); 温度 -173~127°C; —. '永远以同一面朝向地球,另一面直到 1959 年才被人类看到。' - mars: 6,779; 1.52 AU (2.28 亿); 687 天; 24.6 小时; -63°C; 2. '拥有太阳系最高的火山——22 公里高的奥林帕斯山,以及全长 4,000 公里的水手号峡谷。' - jupiter: 139,820; 5.20 AU (7.78 亿); 11.86 年; 9.9 小时; -108°C; 95. '质量是其他所有行星之和的 2.5 倍;大红斑是一场持续了数百年的风暴,能装下整个地球。' - saturn: 116,460; 9.54 AU (14.27 亿); 29.4 年; 10.7 小时; -139°C; 146. '密度比水还低——若有足够大的海洋,它會浮起来。光环由无数冰块组成,整体厚度却不足 1 公里。' - uranus: 50,724; 19.19 AU (28.71 亿); 84 年; 17.2 小时 (逆行); -197°C; 28. '自转轴倾角 97.8°,几乎"躺着"绕太阳滚;每个季节长达 21 年。' - neptune: 49,244; 30.07 AU (44.95 亿); 164.8 年; 16.1 小时; -201°C; 16. '太阳系风速之王,狂风时速超过 2,000 公里;它是第一颗通过数学计算而非观测发现的行星。' - pluto: 2,377; 39.48 AU (59.04 亿); 248 年; 6.4 天 (逆行); -229°C; 5. '轨道偏心率极高,近日点时比海王星更靠近太阳;2006 年被降格为矮行星。' Types: 类地行星 (rocky), 气态巨行星 (Jupiter), 冰巨行星 (Uranus/Neptune), 矮行星 (Pluto), 天然卫星 (Moon), 恒星 (Sun). 49. Texture painter per body id (switch). Each texture: - Canvas size: rocky 512x256; gas giants 1024x512; sun N/A (shader); moon 512x256. - Use ImageData loops with a noise instance per body (different seeds). Let me write texture functions: ```js function texFor(id, noise){ const w = (id==='jupiter'||id==='saturn')?1024:512, h=w/2; const cv=document.createElement('canvas'); cv.width=w; cv.height=h; const ctx=cv.getContext('2d'); const img=ctx.createImageData(w,h); const d=img.data; const N=noise; // .fbm(x,y,oct) for(let y=0;y .585: mountain #7a6f4e→? Let's do: sea depth: m<.52: col = mix(#0b2f63, #1d5fa8, (m/.52)*0.5+0.5*?) simpler: seaCol = lerp(#0d3267,#2f74b5, smooth(m/.52)); if m in [.52,.545] coast #3f9bd8 brighter? land: t2=N.f(u,v,2,3); base = lerp(#2e6b33,#7c7a45, t2); if |lat| high → desert band near 0.35v? Add: des = Math.exp(-((v-0.32)**2)/0.004)+... skip complexity: add desert: mix with #b09a5e where t2> .62. polar: |v-.5|>.42 + .02*(c2-.5) → white #e8f0f5 (blend). Cloud texture separately: a = smoothstep(.55,.75, N.f(u,v,4,1 offset seed2) + .15*N.f(u,v,2,3)) → white, alpha a*255*0.9. mars: m=N.f(u,v,4,1); base=lerp(#8f3f22,#c97a4b,m); dark = N.f(u,v,2,3); if dark>.58 base*=.72; polar |v-.5|>.43 → #e8e0d8. jupiter: t = v + 0.055*(N.f(u,v,3,1)-.5) + 0.02*(N.f(u,v,2,4)-.5); band = 0.5+0.5*Math.sin(t*Math.PI*11 + 0.6*N.f(u,v,2,2)); streak = N.f(u*? use N.f(u,v,2,3); c = lerp(#a5714b, #ecdfc4, band); c *= 0.92+0.16*streak; GRS: du = wrapped distance (u-0.7); dv = v-0.63; ex=du*2 (aspect); d = sqrt(ex²*2.2 + dv²*9)? Param: if d<1: blend #c4553b by (1-d), rim darker. Let's compute: dx=wrapDist(u,0.7)*8; dy=(v-0.63)*14; dd = dx*dx+dy*dy; if dd<1: s=Math.pow(1-dd, 0.75)? blend toward #c2543a. saturn: t = v + 0.03*(N.f(u,v,3,1)-.5); band = .5+.5*sin(t*Math.PI*9); c = lerp(#b9985f, #f1e4bd, band) * (0.94+0.1*streak); softer. uranus: t = v + 0.015*(N.f(u,v,2,2)-.5); c = lerp(#8fc7cf, #c2ecee, .5+.5*Math.sin(t*Math.PI*5)*0.3+ .2); nearly flat: c = base #a8dde2 with 4% variation. neptune: t = v + 0.04*(N.f(u,v,3,1)-.5); band=.5+.5*sin(t*PI*8); c=lerp(#2c4ea8,#4d7fdd,band); clouds: cl = smoothstep(.62,.8, N.f(u,v,2,4)) → mix white*cl*0.5; dark spot at (0.35,0.42): dd<1 blend #1c337f. moon: m=N.f(u,v,4,1); t=.5+.3*m; maria: mm = N.f(u,v,2,1)? Dark patches: if N.f(u,v,3,0)>.62 → *0.7; base gray #8e8e93 → #b9b9bd; craters overlay like Mercury. putImageData, craters, return new THREE.CanvasTexture; set wrapS Repeat, anisotropy 4. 50. Sun shader code: ```js const sunMat = new THREE.ShaderMaterial({ uniforms:{ uTime:{value:0} }, vertexShader:`varying vec3 vN; varying vec3 vP; varying vec3 vW; void main(){ vN = normalize(normalMatrix*normal); vec4 mv = modelViewMatrix*vec4(position,1.); vP = mv.xyz; vW = position; gl_Position = projectionMatrix*mv; }`, fragmentShader:`uniform float uTime; varying vec3 vN; varying vec3 vP; varying vec3 vW; float hash(vec3 p){ return fract(sin(dot(p, vec3(127.1,311.7,74.7)))*43758.5453123); } float noise(vec3 p){ vec3 i=floor(p), f=fract(p); f=f*f*(3.-2.*f); return mix(mix(mix(hash(i),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y), mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z); } float fbm(vec3 p){ float s=0.,a=.5; for(int i=0;i<5;i++){ s+=a*noise(p); p*=2.03; a*=.55; } return s; } void main(){ vec3 p = normalize(vW); float n = fbm(p*3.5 + vec3(0.,uTime*.02,uTime*.013)); n += .5*fbm(p*8. - vec3(uTime*.05,0.,0.)); n = clamp(n,0.,1.); vec3 c1 = vec3(1.,.42,.08), c2 = vec3(1.,.72,.25), c3 = vec3(1.,.93,.75); vec3 col = mix(c1,c2,smoothstep(.15,.6,n)); col = mix(col,c3,smoothstep(.62,.95,n)); vec3 V = normalize(-vP); float fr = dot(normalize(vN), V); col *= .55 + .6*pow(fr,.5); // limb darkening col *= 1.15; gl_FragColor = vec4(col,1.); }` }); ``` Sun sphere r=0.696 (695700 km). Corona sprite. Fresnel atmosphere: ```js function atmoMat(color, power=3.0, str=1.0){ return new THREE.ShaderMaterial({ uniforms:{ uC:{value:new THREE.Color(color)} }, transparent:true, blending:THREE.AdditiveBlending, depthWrite:false, side:THREE.FrontSide? ``` Rim: alpha = pow(1-|dot(N,V)|, power)*str; render FrontSide additive on a sphere at 1.05r. Also Earth: slight blue rim. Gas giants weaker. 51. Orbit line color: body color 0.5 mixed with #4a6a90? Use body color with opacity .5 inner, .3 outer. LineBasicMaterial({color: bodyColor, transparent:true, opacity:.35}) — LineBasicMaterial linewidth is ignored, fine. Orbit points: 512 samples via E. 52. Minimap orbit polyline: precompute from orbit points (x, z) scaled. 53. Scale bar element: div with .bar (width px), text on top. 54. Animation loop: ``` dt = clamp(clock.getDelta(), 0, .05) simDays += speed*dt update bodies: for each planet: pos = keplerPos(el, simDays - daysAtJ2000) ``` Note: elements are J2000 epoch → days = simDays - D2000 where simDays is counted from J2000. Let simDays start = (Date.now() - EPOCH)/86400000, and use d=simDays directly (EPOCH = Date.UTC(2000,0,1,12)). Moon: A = 2π*(simDays/27.321661 + 0.3); local (cos, tilt, -sin). Spin: mesh.rotation.y = 2π*simDays/day + phase (negatives fine). Cloud rotation slightly faster. Update camera, labels, minimap (throttled to 10 fps? fine every frame), scale bar every frame (cheap), info distance every frame. 55. Intro flow: - On load: build everything async; loading screen shows % (steps). Then show intro (scene already visible behind at 94% dark). Start button: fade out intro, kick off camera fly-in radiusT 8000→1500 over 2.4s (custom tween via radiusTarget and time — or implement simple tween: store camAnim {t0, dur, from, to}, apply with ease; disable user radius tween conflict — fine, set flag). Also auto-rotate initially? Slow theta drift when idle (idle > 6s) — subtle life. Add: if no interaction for 8s, theta += dt*0.02. 56. Buttons & toggle state object. Toggle orbit: orbitLines group visible. Labels: hide label container. Belt: visible. 57. Minimap camera marker: camera world x,z (ignore y) → screen; if outside canvas (free flight far), clamp with an edge arrow? Just clamp to border + dim. Fine. 58. Prevent context menu on canvas (right-drag pan). Pan: right-drag or two-finger: move target along camera right/up (free mode only? in follow mode pan → detach and pan). Implementation: on right drag: target -= (right*dx + up*dy) * (radius*0.0015). Detach follow on start. Actually simplify: pan = WASD anyway; two-finger pinch zoom + skip pan? Mobile users can use WASD? No keyboard on mobile. Provide: right/middle drag pan (desktop) + two-finger pan (mobile). Implement pointer-based pinch: on 2 pointers: centroid move → pan; distance change → zoom. 59. Text: make sure Chinese UI. Edge: log depth + PointsMaterial sizeAttenuation false is fine. Ring UV fix code: ```js const g = new THREE.RingGeometry(inner, outer, 160, 1); const pos = g.attributes.position; const uv = g.attributes.uv; for(let i=0;i body.r*30 (hide when close). 70. Sun label "太阳 SUN". 71. Title block date: "模拟日期 2025.06.18 · 1s = 1天". Time presets as small segmented buttons; plus toggle group: 轨道/标签/星带 + ⌂ 太阳 + ↺ 今天. Layout: - .tl (top-left): title panel. - .tr (top-right): time + toggles. - .rail (middle-left): body list. - .info (middle-right): card. - .br (bottom-right): minimap. - .bc (bottom-center): scale bar. - .bl (bottom-left): hints. On mobile: hide .rail, .bl; smaller .info at bottom sheet; tr wraps. 72. Let me write it all now. I'll organize the code and add comments. Also add a guard: THREE failed to load → show error. Potential pitfalls: - r128 RingGeometry attribute access ✓. - ShaderMaterial + log depth: need to include logdepthbuf chunk? In r128, ShaderMaterial doesn't auto-apply log depth; but the sun is a mid-sized object; the sun is the only shader material — z precision with default depth vs log depth buffer: when log depth is enabled, built-in materials output a logarithmic depth; ShaderMaterial doesn't → depth mismatch with the sun vs. others (sun may z-fight/clip against corona? Corona is a sprite (built-in) with a shader that doesn't write depth (depthWrite false, but it reads depth) — sun writes normal depth, other objects write log depth → mismatch → planet behind the Sun is judged at the wrong depth → planets could incorrectly occlude the Sun, or vice versa. Fix: include log depth in the sun shader: ``` #include ... gl_FragColor... #include ``` In r128, ShaderMaterial supports chunks via preprocessor, need `#include `? logdepthbuf_pars_fragment defines `#if defined(USE_LOGDEPTHBUF)`… but the USE_LOGDEPTHBUF define is set by the renderer per material? Renderer sets defines based on material: for ShaderMaterial, USE_LOGDEPTHBUF define is set by the renderer via material onBeforeCompile? WebGLPrograms sets parameters.logarithmicDepthBuffer → program has USE_LOGDEPTHBUF defined for all materials if renderer is log ✓ (in WebGLPrograms: parameters.logarithmicDepthBuffer = ( material.logarithmicDepthBuffer !== false && ...)? Actually: `parameters.logarithmicDepthBuffer = (material.logarithmicDepthBuffer === true && extensions.logDepthBuffer)`? Hmm r128: WebGLPrograms.js: `logarithmicDepthBuffer: ( material.logarithmicDepthBuffer === true && extensions.logDepthBuffer )`? I recall material has a `logarithmicDepthBuffer` property (default false) that gates per material? Let me check memory: in three.js, WebGLPrograms.getParameters: ``` logarithmicDepthBuffer: ( _this.logarithmicDepthBuffer && extensions.logDepthBuffer ) ``` Wait, I believe the renderer-level flag drives all programs when log depth is on; the `logdepthbuf` chunk is auto-injected to built-ins; for ShaderMaterial, the user must manually include the chunks. And USE_LOGDEPTHBUF is defined for all programs when renderer is log. Hmm, but there's a material property… In r128 source, WebGLPrograms.js: ``` logarithmicDepthBuffer: ( _this.logarithmicDepthBuffer && extensions.logDepthBuffer ), ``` I'm fairly sure it's renderer-driven (all programs get the define). So for my shader: add: vertex: ``` #include #include void main(){ ... gl_Position=...; #include } ``` Fragment: ``` #include #include void main(){ ... gl_FragColor = vec4(...); #include } ``` That will make it correct. ✓ (The include requires the chunk name to be available — ShaderMaterial processes #include for ShaderMaterial ✓.) Atmosphere shader also writes depth? depthWrite false, additive — depth test still reads; if it doesn't write depth but tests with log depth while its own fragment depth is written in normal precision → depth test mismatch could cause pop-in. gl_FragDepth in the atmosphere fragment is normal vs. scene log → when testing a planet behind the atmosphere fragment… Atmosphere fragment tests its own depth (computed by hardware = normal) against the log depth buffer contents → wrong comparison → atmosphere may be invisible or always visible. So atmosphere also needs log depth include (pars + fragment). Add to both shaders. (logdepthbuf_vertex sets vFragDepth; the chunk handles it.) Safer alternative: avoid log depth and use a modest near/far: near 0.002, far 300000 → ratio 1.5e8 — too big. Log depth is needed. OK include the chunks in both shader materials. Actually, do we need near 0.0008? For Moon at 0.0104 radius, near 0.002 → ratio at far 200000: 1e8. With log depth fine. - Sprite + log depth: SpriteMaterial is built-in → auto ✓. - PointsMaterial is built-in ✓. - RingBasic: fine. Another pitfall: `#include ` in my fragment already defines? Fine. - Raycaster with scaled pick spheres ✓. - CanvasTexture + log depth: unrelated ✓. - In r128, `THREE.sRGBEncoding`? renderer.outputEncoding default LinearEncoding — colors are somewhat dull; set renderer.outputEncoding = THREE.sRGBEncoding and create textures with encoding sRGB (map textures: tex.encoding = THREE.sRGBEncoding) for better colors. r128 supports outputEncoding ✓. Set it. - PointsMaterial vertexColors: use colors attribute — set vertexColors: true. 73. Minimap draw: ctx 2d, dpr scaling. Precompute orbits2D arrays. Camera marker: also draw a small line from camera to target? Skip. 74. Number check: Saturn ring inner radius 74,500 km? D ring inner ~66,900; C ring 74,658; B outer 117,576; A outer 136,775? F ring 140,180. Use inner 0.0701? Use 0.0746–0.1403. Jupiter radius 69,911 km → 0.069911 units ✓ (r/1e6). Sun 695,700 → 0.6957. 75. Sun view distance: r*30 = 20.9 units → about 20,900 km from Sun center? Wait, units: 0.6957*30 = 20.9 units = 20,900,000 km?? No: 1 unit = 1e6 km → 20.9 units = 2.09 千万 km = 20,900,000 km. Sun angular size: 2*asin(0.696/20.9) = 3.8° — nice. Earth viewK 18 → 0.1147 units = 114,700 km; angle 2*asin(6371/114700)? radius ratio: 0.006371/0.1147 → 2*asin(0.0555)=6.4° ✓. Moon viewK 5 → 0.00869 units = 8,690 km; angle 2*asin(1737/8690)=22.8° — big but Moon is a small target; OK maybe 8 → 0.0139 = 13,900 km → 14.4°. Use 8. 76. Initial focus: Sun, radiusT 1500, phi 1.15 (27° from up… phi is polar angle from +Y: 1.15 rad = 66° from up → 24° elevation ✓), theta 0.9. Fly-in: radiusT 1500, radius 9000 → damping will animate it naturally (radius lerps to radiusT with smoothing) — just start at 9000, set target to 1500, damping factor 1-exp(-dt*1.2) slow → smooth 3-second glide ✓. Set a smaller damping constant (1.5) for zoom so initial glide is cinematic; wheel zoom also uses same smoothing — nice smooth zoom. theta also drifts from 3.5 → 0.9? Just start at theta 5.2 and let user control. Keep simple. 77. Idle auto-rotate: track lastInteract; if now-last>10s: theta += dt*0.015. 78. Time: also show a speed label in the date line: "1 秒 ≈ 1 天". 79. Info card live: camDist + "目标: 地球" + button [取消跟随]. 80. Loading steps: build textures sequentially with progress: sun (skip, shader) — steps: stars, mercury, venus, earth (+clouds), moon, mars, jupiter, saturn (+rings), uranus, neptune, pluto → 10 steps + scene. 81. Also add a gentle ambient "sun glow" hemisphere light for the night side? Just AmbientLight. 82. Verify: Venus spin negative (retrograde) ✓ via day sign. Uranus tilt 97.77° — spin group rotated z 97.77° → axis nearly in the orbital plane ✓. 83. Label occlusion: skip raycast occlusion (cost); just project. 84. Write the final HTML. Also viewport meta, title "真实比例 · 太阳系 | SOLAR SYSTEM 1:1". Let me draft the CSS: ```css *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;overflow:hidden;background:#04060c} body{font-family:'Noto Sans SC',system-ui,sans-serif;color:#cfe0f4;-webkit-font-smoothing:antialiased} .num{font-family:'Orbitron',monospace} #scene{position:fixed;inset:0} #scene canvas{display:block} #vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2,4,9,.55) 100%)} #labels{position:fixed;inset:0;pointer-events:none;overflow:hidden} .label{position:absolute;transform:translate(-50%,-130%);display:flex;align-items:center;gap:6px;pointer-events:auto;cursor:pointer;padding:3px 8px;transition:opacity .2s;white-space:nowrap} .label .dot{width:5px;height:5px;border-radius:50%;box-shadow:0 0 8px currentColor} .label .cn{font-size:12px;letter-spacing:.14em;color:#dce9fa;text-shadow:0 0 6px rgba(0,0,0,.8)} .label .km{font-family:Orbitron;font-size:9px;color:#8fa5c4;letter-spacing:.05em} .label:hover .cn{color:#fff} .label.active{...} .panel{position:fixed;background:rgba(8,13,24,.72);border:1px solid rgba(125,165,225,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .panel::before,.panel::after{content:'';position:absolute;width:9px;height:9px;opacity:.9} .panel::before{top:-1px;left:-1px;border-top:1px solid var(--amber);border-left:1px solid var(--amber)} .panel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--amber);border-right:1px solid var(--amber)} ``` tl: ``` #tl{top:16px;left:16px;padding:12px 16px;min-width:230px} #tl .ov{font-family:Orbitron;font-size:9px;letter-spacing:.32em;color:var(--amber)} #tl h1{font-size:19px;font-weight:700;letter-spacing:.18em;margin-top:5px} #tl .sub{margin-top:7px;font-size:11px;color:var(--dim);display:flex;gap:8px;align-items:baseline} #tl .date{font-family:Orbitron;font-size:11px;color:var(--cyan);letter-spacing:.08em} #tl .rate{font-size:10px;color:var(--dim)} ``` tr: ``` #tr{top:16px;right:16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:340px} .seg{display:flex;flex-wrap:wrap;gap:4px} .btn{font-family:inherit;font-size:11px;letter-spacing:.08em;color:#9fb4d2;background:rgba(125,165,225,.06);border:1px solid rgba(125,165,225,.2);padding:5px 9px;cursor:pointer;transition:all .18s} .btn:hover{color:#fff;border-color:rgba(255,180,84,.65);transform:translateY(-1px)} .btn.on{color:var(--amber);border-color:var(--amber);background:rgba(255,180,84,.1);box-shadow:0 0 12px rgba(255,180,84,.15) inset} .btn.icon{width:30px;text-align:center;padding:5px 0} .tglabel{font-size:9px;letter-spacing:.28em;color:#5d7191;font-family:Orbitron} ``` Rail: ``` #rail{left:16px;top:50%;transform:translateY(-50%);width:172px;padding:10px} #rail .ttl{font-size:9px;font-family:Orbitron;letter-spacing:.3em;color:#5d7191;padding:2px 4px 8px} .rrow{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;border:1px solid transparent;transition:all .15s} .rrow:hover{background:rgba(125,165,225,.07);border-color:rgba(125,165,225,.18)} .rrow.on{background:rgba(255,180,84,.09);border-color:rgba(255,180,84,.4)} .rrow .d{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor} .rrow .nm{font-size:12px;letter-spacing:.1em} .rrow .en{font-family:Orbitron;font-size:8px;color:#5d7191;letter-spacing:.14em;display:block} .rrow .au{margin-left:auto;font-family:Orbitron;font-size:9px;color:#7f96b8} .rrow.sub{margin-left:14px} ``` Info: ``` #info{right:16px;top:50%;transform:translate(0,-50%);width:296px;padding:16px 18px;transition:transform .45s cubic-bezier(.2,.9,.25,1), opacity .35s;opacity:0;pointer-events:none} #info.show{transform:translate(0,-50%);opacity:1;pointer-events:auto} Actually, initial hidden transform translateX(24px) — combine: hidden: transform:translate(30px,-50%); opacity 0. #info .type{font-size:9px;font-family:Orbitron;letter-spacing:.3em;color:var(--amber)} #info h2{font-size:24px;letter-spacing:.16em;margin:6px 0 2px} #info .en{font-family:Orbitron;font-size:10px;color:#5d7191;letter-spacing:.3em} #info .grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:14px 0;padding:12px 0;border-top:1px solid rgba(125,165,225,.14);border-bottom:1px solid rgba(125,165,225,.14)} #info .k{font-size:10px;color:#5d7191} #info .v{font-size:12px;color:#dbe8fa;text-align:right;font-family:Orbitron? Mixed Chinese → Noto; use font-size 12} #info .fact{font-size:11.5px;line-height:1.75;color:#9fb2cc} #info .dist{margin-top:12px;font-size:11px;color:var(--cyan);display:flex;justify-content:space-between} #info .dist .num{font-family:Orbitron} #info .stop{margin-top:10px;width:100%} ``` Minimap: ``` #mm{bottom:16px;right:16px;padding:10px} #mm .cap{display:flex;justify-content:space-between;font-size:9px;font-family:Orbitron;letter-spacing:.25em;color:#5d7191;margin-bottom:6px} #mmcv{display:block;cursor:crosshair} ``` Scale bar: ``` #scale{bottom:20px;left:50%;transform:translateX(-50%);padding:8px 16px 10px;text-align:center} #scale .txt{font-family:Orbitron;font-size:10px;color:#a9c1e2;letter-spacing:.08em} #scale .bar{height:6px;border-left:1px solid #a9c1e2;border-right:1px solid #a9c1e2;border-bottom:1px solid #a9c1e2;margin-top:5px} #scale .au{font-size:9px;color:#5d7191;font-family:Orbitron;margin-top:3px} ``` Hints: ``` #hints{bottom:20px;left:16px;font-size:10px;color:#5d7191;letter-spacing:.06em;line-height:1.9;max-width:220px} #hints b{color:#8fa5c4;font-weight:500} ``` Loading: ``` #load{position:fixed;inset:0;background:#04060c;z-index:50;display:flex;align-items:center;justify-content:center;transition:opacity .8s} #load .box{text-align:center;width:280px} .orbit-anim{width:110px;height:110px;margin:0 auto 26px;position:relative} .orbit-anim i{position:absolute;border:1px solid rgba(125,165,225,.25);border-radius:50%} .o1{inset:0}.o2{inset:18px}.o3{inset:36px} .orbit-anim .sun{position:absolute;inset:0;margin:auto;width:10px;height:10px;border-radius:50%;background:#ffb454;box-shadow:0 0 18px #ffb454} .orbit-anim .pl{position:absolute;inset:0;animation:spin 3s linear infinite} .o2 .pl? ``` Simpler: 3 rings + a rotating dot: `.orbit-anim .arm{position:absolute;inset:0;animation:rot 4s linear infinite}` with a child dot at top center. 2 arms with different radii/speeds (o1 arm 5s, o2 arm 3s, o3 arm 2.2s? reverse one direction). @keyframes rot{to{transform:rotate(360deg)}} Dot: 4px body color. Load text: "CALIBRATING SCALE" Orbitron 9px ls .4em amber; progress bar: 200px 2px background rgba line; fill amber width %. Percentage number Orbitron. Intro: ``` #intro{position:fixed;inset:0;z-index:40;display:flex;align-items:center;background:linear-gradient(100deg, rgba(3,5,10,.92) 0%, rgba(3,5,10,.78) 46%, rgba(3,5,10,.35) 100%);transition:opacity 1s} #intro .wrap{margin-left:8vw;max-width:560px} #intro .ov{font-family:Orbitron;font-size:10px;letter-spacing:.42em;color:var(--amber)} #intro h1{margin:18px 0 6px;font-size:clamp(34px,5vw,58px);font-weight:900;letter-spacing:.12em;line-height:1.1} #intro h1 .en{display:block;font-family:Orbitron;font-weight:700;font-size:clamp(15px,1.6vw,20px);letter-spacing:.58em;color:var(--cyan);margin-top:10px;font-weight:500} Hmm h1 is "真实比例" + English "SOLAR SYSTEM 1:1" block. #intro p.lead{font-size:14px;line-height:1.9;color:#9fb2cc;margin-top:18px;max-width:440px} #intro .stats{margin:26px 0 30px;display:flex;flex-direction:column;gap:12px} .stat{display:flex;gap:12px;align-items:baseline;font-size:12.5px;color:#c4d5ec;opacity:0;transform:translateY(10px);animation:rise .7s forwards} .stat b{font-family:Orbitron;color:var(--amber);font-size:15px;min-width:74px? Actually place a numeric left column: "4.5 mm" amber + text} @keyframes rise{to{opacity:1;transform:none}} .stat:nth-child(1){animation-delay:.15s}... #goBtn{font-family:'Noto Sans SC';font-size:14px;letter-spacing:.3em;padding:13px 34px;background:var(--amber);color:#1a1206;border:none;cursor:pointer;font-weight:700;transition:all .2s;box-shadow:0 0 0 rgba(255,180,84,0)} #goBtn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(255,180,84,.35);background:#ffc06e} #intro .hint{margin-top:16px;font-size:10.5px;color:#5d7191;letter-spacing:.1em} ``` The intro is a left-aligned HUD-style with a stats ledger — good, not a centered trio. Media query for <860px: ``` #rail,#hints{display:none} #info{right:12px;left:12px;top:auto;bottom:12px;width:auto;transform:translateY(20px)!important;max-height:40vh;overflow:auto} #info.show{transform:none!important} #mm{bottom:auto;top:auto;bottom:12px;right:12px} scale? Keep. #scale{bottom:auto;top:...? Place under tr? Simplest: hide #scale? Keep at bottom center; info covers. Move #scale to top:86px? Hmm. In mobile: #scale{bottom:12px} but info sheet is there → z conflict. Move #scale in mobile to top: calc(16px + 120px)? Simplest: #scale{display:none} on very small? Losing scale bar on mobile is OK? It's core. Move to top center: top:16px;left:50% — conflicts with tr (right) if narrow. Choose: keep scale at bottom center but raise it: bottom:150px? Sheet height is variable… Use: #scale{bottom:44vh}? Ugly. Decision: on mobile hide #scale (accept), keep minimap small top-right? tr is top-right; mm at bottom-right below? Info sheet is at bottom → mm hidden too? Getting fiddly. Mobile: hide #rail, #hints, #scale, #mm? Minimap is useful on mobile (navigation). Put mm at bottom-right, above info? Info sheet at bottom full-width; place mm above it: bottom: calc(40vh + 20px)? No. Simplify: mobile → info becomes a top-left card (below tl)? Hmm tl is there. Final mobile plan: hide rail, hints, scale. Info: top:auto bottom:12px, but max-height 34vh. mm: right:12px bottom:auto → top: auto… place at top: right:12px; top: 120px? tr height varies. Put mm to the left: #mm{right:12px; bottom:auto; top:auto; } Honestly, mobile support can be minimal: hide rail/hints/scale; info bottom sheet (may cover mm — put mm at bottom-left! left:12px bottom:12px, smaller 160px). Info sheet width calc(100% - 220px)? Overlap acceptable… Let's do: mobile: #mm{bottom:auto; top:auto; left:12px; bottom:12px} 168px; #info{left:auto; right:12px; width:250px; bottom:12px; top:auto; transform:translate(20px,0); max-height:52vh} — info right + minimap left can coexist. tl smaller. tr: allow wrap (max-width 60vw). Enough. 85. JS: build it all now. Let me draft the main functions. ```js const $ = s=>document.querySelector(s); function fmtKm(km){ if(km>=1e8){ const v=km/1e8; return (v>=100? v.toFixed(0): v>=10? v.toFixed(1): v.toFixed(2))+' 亿 km'; } if(km>=1e4){ return (km/1e4).toFixed(km>=1e6?0:1)+' 万 km'; } return Math.round(km)+' km'; } ``` Noise class as above. Kepler: ```js function bodyPos(el, d, out){ const n = 360/el.T; let M = (el.M0 + n*d) * DEG; M = M % (2*Math.PI); if(M<0)M+=2*Math.PI; let E = el.e<0.8 ? M + el.e*Math.sin(M) : Math.PI; for(let i=0;i<12;i++){ const f=E-el.e*Math.sin(E)-M; E -= f/(1-el.e*Math.cos(E)); if(Math.abs(f)<1e-7) break; } const a=el.a, cE=Math.cos(E), sE=Math.sin(E); const x0=a*(cE-el.e), y0=a*Math.sqrt(1-el.e*el.e)*sE; const cO=Math.cos(el.Od), sO=Math.sin(el.Od), ci=Math.cos(el.id), si=Math.sin(el.id), cw=Math.cos(el.wd), sw=Math.sin(el.wd); const X=(cO*cw-sO*sw*ci)*x0+(-cO*sw-sO*cw*ci)*y0; const Y=(sO*cw+cO*sw*ci)*x0+(-sO*sw+cO*cw*ci)*y0; const Z=(sw*si)*x0+(cw*si)*y0; out.set(X*AU, Z*AU, Y*AU); } ``` Precompute trig: on init, el.Od=cos(el.O*DEG) etc. Store cO,sO,… directly: el.cO=Math.cos(...) etc. Orbit path: for k 0..N: E=2πk/N → same x0,y0 → transform → store Vector3; LineLoop. Build: ```js const scene=new THREE.Scene(); const camera=new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.002, 300000); const renderer=new THREE.WebGLRenderer({antialias:true, logarithmicDepthBuffer:true, powerPreference:'high-performance'}); renderer.setSize(...); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.outputEncoding=THREE.sRGBEncoding; ``` Lights: ambient + point. Star build function. Sun: ```js const SUN_R=695700/KM; sun mesh + halo sprites. const haloTex=makeGlowTex(); // radial gradient sprite1 scale SUN_R*9, sprite2 SUN_R*16 opacity .35. ``` makeGlowTex: 256 canvas: gradient stops: 0: rgba(255,230,180,1), .25: rgba(255,170,70,.55), .6: rgba(255,120,30,.12), 1: 0. Planets: ```js function buildPlanet(b){ b.r = b.rKm/KM; const group=new THREE.Group(); scene.add(group); const spin=new THREE.Group(); spin.rotation.z = -b.tilt*DEG? Tilt direction arbitrary; spin.rotation.z = b.tilt*DEG; group.add(spin); const mat=new THREE.MeshPhongMaterial({map:b.tex, shininess: b.gas?6:10, specular:0x222222}); const seg = b.gas?48:36; const mesh=new THREE.Mesh(new THREE.SphereGeometry(b.r, seg, seg/2), mat); spin.add(mesh); if(b.atmo){ const am=new THREE.Mesh(new THREE.SphereGeometry(b.r*1.06, 40,20), atmoMat(b.atmo)); spin.add(am); } if(b.id==='earth'){ cloud mesh radius r*1.018, transparent } if(b.ring){ ring mesh } b.pick=new THREE.Mesh(new THREE.SphereGeometry(1,8,6), new THREE.MeshBasicMaterial({visible:false})); group.add(b.pick); pickables.push(b.pick); b.pick.userData.body=b; b.group=group; b.spin=spin; b.mesh=mesh; } ``` Wait, `new THREE.MeshBasicMaterial({visible:false})` — MeshBasicMaterial has .visible ✓. Ring: ```js const inner=74500/KM, outer=140270/KM; const rg=new THREE.RingGeometry(inner,outer,180,1); fix uv; const rm=new THREE.Mesh(rg, new THREE.MeshBasicMaterial({map:ringTex, side:THREE.DoubleSide, transparent:true, depthWrite:false, opacity:.96})); rm.rotation.x=-Math.PI/2; spin.add(rm); ``` RingBasic is not lit — the night side ring is equally bright — acceptable stylization. Moon: same structure, group as child of earth.group. Orbit: LineLoop added to orbitGroup; moon orbit a child of earth.group (local). Belt: ```js function belt(n, rMin, rMax, yS, size, color, op){ positions Float32Array; for i: a=rMin+Math.pow(rand,1.4)*(rMax-rMin)? For asteroid: uniform 2.1-3.3 AU with 2.5-2.8 gaps? Simple uniform is fine. ang=rand*2π; y=gauss*yS; pos=(a cos, y, a sin)*AU... PointsMaterial({size, sizeAttenuation:true? At scale 300 units, size .8 units ≈ visible; use sizeAttenuation true, size: 0.9 asteroid? A rock a few km: 0.000005 units — invisible anyway; artistic size is fine: 0.7. transparent, opacity op, color, depthWrite:false}) } ``` Kuiper size 2.2 opacity .3. gauss: (rand()+rand()+rand()-1.5). Update loop per planet: bodyPos(el, simDays, group.position); spin: mesh.rotation.y = (simDays/b.day)*2π*? day in days: rot = 2π*simDays/b.day; plus phase. Cloud rotation +0.06*rot? Clouds rotate faster: cloud.rotation.y = rot*1.15+1. Moon: local angle A=2π*simDays/27.3217+2.4; position local (cos A*0.3844? Units: 384400/KM=0.3844) with tilt 5.14°: y = sin(A)*sin(5.14°)*0.3844? Approx: local = (cosA*d, sinA*d*0.0897, -sinA*d). rotation.y = A+π. Camera rig: ```js const cam={theta:5.2, phi:1.15, radius:9000, rT:1500, target:new THREE.Vector3(0,0,0), focus:null, lastAct:performance.now()}; function applyCam(dt){ if(cam.focus){ cam.target.copy(cam.focus.getWorldPosition(tmp)); } cam.radius += (cam.rT-cam.radius)*(1-Math.exp(-dt*2.2)); clamp radius [0.002? min: focus? focus.r*1.15:0.002, 30000] const sp=Math.sin(cam.phi); camera.position.set( cam.target.x + cam.radius*sp*Math.sin(cam.theta), cam.target.y + cam.radius*Math.cos(cam.phi), cam.target.z + cam.radius*sp*Math.cos(cam.theta)); camera.lookAt(cam.target); } ``` phi clamp [0.02, π-0.02]. Input: - pointerdown: save id, x, y, button; if 2 pointers → pinch mode (save dist & centroid). - pointermove: if single down & left: theta -= dx*0.0042; phi -= dy*0.0042 (flip? drag up → look down: phi += ? Standard orbit: drag down → camera up. Use phi += dy*0.0042? Test mentally: drag down (dy>0) usually rotates scene to show more top? OrbitControls: drag down → polar increases? In OrbitControls, mouse down → rotateUp(2π * dy / height) with dy = up… rotateUp(angle) decreases? rotateUp rotates theta? Anyway: let's do: drag right → scene rotates left (camera orbits right): theta += dx*0.0042? In OrbitControls: rotateLeft(2π*dx/height) → sphericalDelta.theta -= angle → camera theta decreases → camera moves in + direction… Let's pick: theta -= dx*0.0042; phi -= dy*0.0042. This gives "grab space" feel (content follows cursor): drag right (dx>0) → theta decreases → camera x = sin(theta) decreases → camera moves left, and looking at target the world appears to move right ✓. drag down (dy>0) → phi decreases → camera higher → world moves down ✓ (feels like grabbing). - right button (button 2) or two-finger: pan: right vector = (cos theta, 0, -sin theta)? Camera forward = target - campos; right = normalize(cross(forward, up)). pan target += (-dx*right + dy*upScreen) * radius*0.0016. Compute from camera matrix: camera.matrix column 0 = right. Use: rightV.setFromMatrixColumn(camera.matrix,0); upV.setFromMatrixColumn(camera.matrix,1); target.addScaledVector(rightV, -dx*ppu_pan).addScaledVector(upV, dy*ppu_pan) where ppu_pan=radius*0.0016. Detach focus. - pointerup: if moved<6px & button 0 → pick. - wheel: rT *= Math.pow(1.0015, e.deltaY); clamp. (deltaY 100 → ×1.16) - pinch: rT *= prevDist/dist; also centroid delta → pan. Keys: keydown map; while held (key set), move per frame: dir forward = (target - campos).normalize(); speed=radius*1.4*dt*(shift?6:1); WASD: forward/back; A/D strafe via rightV; Q/E up/down (E up? Use R/F? Q down E up). Move target; focus=null (but keep target at body position if we were following? Just null). Space: toggle pause (speed=0 or restore previous). Esc: focus=null. Pick: ```js ray.setFromCamera(ndc, camera); const hits=ray.intersectObjects(pickables); if(hits.length) focusOn(hits[0].object.userData.body); ``` focusOn(b): ```js cam.focus=b; cam.rT=Math.max(b.viewDist, cam.radius*0.9?) — use b.viewDist directly, but if cam.radius < b.viewDist*0.2 keep? Just rT=b.viewDist; showInfo(b); updateRail(); ``` Also ensure not inside the planet: viewDist ≥ r*3 always holds ✓. stopFollow(): cam.focus=null; hide info (or keep? hide). Info show(b): fill fields; set card accent border color. Rail: build rows; each: data; update text per frame (AU distance) — 11 rows; fine. Label div: per body: `

地球1.50 亿 km

`; click → focus. Label update per frame: ```js v.copy(b world pos).project(camera); if(v.z>1||behind) hide; x=(v.x*.5+.5)*w, y=(-v.y*.5+.5)*h; element.style.transform = `translate(${x}px,${y}px) translate(-50%,-140%)`; distance text: camera.distanceTo(worldPos)*KM → fmtKm — update textContent every frame: 11 text updates fine. behind check: world - campos dot forward <0 → hide. Use projected v.z<1 && >-1? After project, behind point has z>1? Behind: transformed z positive → ndc z > 1? In three project, behind point has w negative → weird ndc. Robust: const fwd=tmp2.copy(world).sub(camera.position); if(fwd.dot(camDir)<0) hide. ``` Scale bar: ```js const viewDist = cam.radius; // distance to focal depth const ppu = (innerHeight/2)/(viewDist*Math.tan(27.5*DEG)); loop candidates v km from 1e3*10^k: steps [1,2,5]; pick first with px=v/KM*ppu in [60,220]. set width px (cap 260), text fmtKm(v), au = (v/1.496e8) → toFixed(v/1.496e8>=10?0:2)? show '≈ X AU' only when ≥0.001 AU? always: if <0.01 AU show '0.0x AU'. Use (v/149597870.7).toFixed(2). ``` Minimap: ```js const MM=232 (css px), ctx canvas MM*dpr. scale = 116/50 → 50 AU at half? Half size 116px → 50AU → scale=2.32 px/AU → Neptune 70px, Pluto 49.3 → 114px ✓ (near edge). draw: background subtle radial; orbits: per body polyline (x,z)*scale/AU? Points are stored in world units (AU*149.6) → px = x/AU*2.32. Belt annulus: stroke circle 2.7AU lineWidth ~ (3.3-2.1)*2.32 ≈ 2.8px alpha .06. Kuiper annulus 40-48 fainter. Sun: 3px amber glow. Bodies: 2px dot + color; moon skip. Focus ring: animated radius 4+sin pulse, amber. Camera: white 3px diamond at (x,z); if off-canvas clamp & draw an arrow? Just clamp with alpha .5. Hover: mousemove → nearest within 10px → tooltip title? Set a small text below the canvas: #mmname. Click: if nearest ≤9px → focusOn; else free: worldX = px/scale*AU... set focus=null, tween target: implement targetTween: save from, to, t — or simpler: set cam.target directly (jump) — jarring; small tween: targetAnim {from:copy, to, t:0, d:1.2} applied per frame with ease; cancel on new input. ``` Date: update per frame when speed>0 (or always): `new Date(EPOCH + simDays*86400000)` → format `${y}.${MM}.${dd}`. Focus halo sprite: circular ring texture; per frame: if focus: position=focus world; scale=focus.r*8*(1+.15sin t*4)? visible if camDist>focus.r*20 else hide; opacity .5. 86. Loading sequence with await: ```js async function boot(){ step('初始化引擎',8); await frame(); buildStars(); buildBelts(); buildSun(); step('水星',16); mercury tex... ... for each: b.tex = makeTex(id); await frame(); // frame = 1 RAF promise progress... final: hide load (opacity 0, remove after), show intro (after a slight delay), start loop immediately. } function frame(){ return new Promise(r=>requestAnimationFrame(r)); } ``` Textures: create noise per body: new Noise2D(seed). Let me write makeTex fully: ```js function makeTex(id, n, n2){ const big = (id==='jupiter'||id==='saturn'); const w=big?1024:512, h=big?512:256; const cv=document.createElement('canvas'); cv.width=w; cv.height=h; const cx=cv.getContext('2d'); const img=cx.createImageData(w,h); const d=img.data; const C=(r,g,b)=>[r,g,b]; function lerp(a,b,t){return a+(b-a)*t} function mix(c1,c2,t){return [lerp(c1[0],c2[0],t), lerp(c1[1],c2[1],t), lerp(c1[2],c2[2],t)]} for(let y=0;y0.86+0.05*(n.f(u,v,2,3)-.5)) c=C(232,238,244); else if(m>0.545){ const t=n.f(u,v,2,3); let cc=mix(C(47,104,58),C(122,118,74),t); if(t>0.66) cc=mix(cc,C(176,152,96),(t-.66)/.34); c=cc; } else { const s=Math.min(1,m/0.545); c=mix(C(9,38,84),C(44,108,168), s*s*0.7+0.3*s); } if(m>0.50&&m<0.545){ c=mix(c,C(120,190,210), (0.545-m)/0.045*0.5); } // shallow water tint } else if(id==='moon'){ let t=n.f(u,v,4,1); let cc=mix(C(112,112,118),C(190,190,196),t); const mm=n.f(u,v,3,0); if(mm>0.62) cc=cc.map(q=>q*0.72); c=cc; } else if(id==='mars'){ const t=n.f(u,v,4,1); let cc=mix(C(140,64,34),C(206,124,80),t); if(n.f(u,v,2,3)>0.58) cc=cc.map(q=>q*0.7); if(lat>0.9) cc=mix(cc,C(236,228,220),Math.min(1,(lat-0.9)/0.06)); c=cc; } else if(id==='jupiter'){ const t=v+0.05*(n.f(u,v,3,1)-.5)+0.018*(n.f(u,v,2,4)-.5); const s=.5+.5*Math.sin(t*Math.PI*11+0.5*n.f(u,v,2,2)); let cc=mix(C(150,102,70),C(236,222,192),s); const st=n.f(u,v,2,3); cc=cc.map(q=>q*(0.9+0.18*st)); const du=Math.min(Math.abs(u-0.72), 1-Math.abs(u-0.72))*9; const dv=(v-0.635)*15; const dd=du*du+dv*dv; if(dd<1){ const s2=Math.pow(1-dd,0.8); cc=mix(cc,C(198,84,52), s2*0.85); } c=cc; } else if(id==='saturn'){ const t=v+0.03*(n.f(u,v,3,1)-.5); const s=.5+.5*Math.sin(t*Math.PI*9+0.4*n.f(u,v,2,2)); let cc=mix(C(168,134,86),C(240,228,190), s); const st=n.f(u,v,2,3); cc=cc.map(q=>q*(0.94+0.1*st)); c=cc; } else if(id==='uranus'){ const t=.5+.25*Math.sin((v+0.012*(n.f(u,v,2,2)-.5))*Math.PI*5); c=mix(C(140,196,204),C(206,238,240),t); } else if(id==='neptune'){ const t=v+0.04*(n.f(u,v,3,1)-.5); const s=.5+.5*Math.sin(t*Math.PI*8); let cc=mix(C(44,72,168),C(86,134,224),s); const cl=n.f(u,v,2,4); if(cl>0.62) cc=mix(cc,C(220,232,250), Math.min(1,(cl-0.62)*4)*0.5); const du=Math.min(Math.abs(u-0.35),1-Math.abs(u-0.35))*10; const dv=(v-0.42)*18; const dd=du*du+dv*dv; if(dd<1) cc=mix(cc,C(28,48,120), Math.pow(1-dd,.7)*.7); c=cc; } else if(id==='pluto'){ const t=n.f(u,v,4,1); let cc=mix(C(140,118,98),C(214,196,176),t); if(lat>0.88) cc=mix(cc,C(230,222,210),.6); c=cc; } const i=(y*w+x)*4; d[i]=c[0]; d[i+1]=c[1]; d[i+2]=c[2]; d[i+3]=255; } } cx.putImageData(img,0,0); if(id==='mercury'||id==='moon') crater(cx,w,h,n); const t=new THREE.CanvasTexture(cv); t.wrapS=THREE.RepeatWrapping; t.anisotropy=4; t.encoding=THREE.sRGBEncoding; return t; } function crater(cx,w,h,n){ for(let i=0;i<260;i++){ const x=Math.random()*w, y=h*.08+Math.random()*h*.84, r=1+Math.random()*Math.random()*7; cx.strokeStyle='rgba(0,0,0,'+(0.10+Math.random()*0.15)+')'; cx.lineWidth=1; cx.beginPath(); cx.arc(x,y,r,0,7); cx.stroke(); cx.fillStyle='rgba(255,255,255,0.05)'; cx.beginPath(); cx.arc(x-r*.25,y-r*.25,r*.6,0,7); cx.fill(); } } ``` Note: cc.map returns array of floats — fine (Uint8Clamped assignment auto-clamps? putImageData from our manual Float values → Uint8Clamped clamps ✓). Cloud texture: ```js function cloudTex(n){ w=512, h=256; loop: a = smoothstep(0.52,0.78, n.f(u,v,4,1)+0.12*n.f(u,v,2,3)); d: r=g=b=255, alpha=a*230. } ``` smoothstep function. Ring texture: ```js function ringTex(n){ const w=1024; canvas w x 2; ImageData; for x: u=x/(w-1); let a; const band=(u0,u1,fade)=> smoothstep(u0,u0+fade,u)*(1-smoothstep(u1-fade,u1,u)); const noise1=0.7+0.6*n.f(u, .5, 4, 1); let base=0; base += 0.30*band(0.0,0.24,0.03); // C base += 1.00*band(0.24,0.63,0.02); // B base += 0.10*band(0.63,0.665,0.008);// Cassini base += 0.62*band(0.665,0.93,0.02); // A base *= (0.55+0.45*band(0.93,1.0,0.07)); // fade out? actually band returns 1 inside… simpler: if u>0.93 base*= (1-u)/0.07; Encke gap: const eg=Math.exp(-Math.pow((u-0.885)/0.006,2)); base*=(1-eg*0.9); a=Math.min(1, base*noise1); color: r=216.. mix with n: r=206+30*n.f(u*3,.3,2,2)? d: [r,g,b, a*255] } ``` Verify B ring: u from 0.24 to 0.63 — Cassini at 117,580 km: u=(117580-74500)/(140270-74500)=43080/65770=0.655 ✓ near 0.63-0.665 ✓. Encke at 133,584: u=(133584-74500)/65770=0.9 ✓ (use 0.9). C ring inner: 74,500 is C's inner edge ✓. Glow texture: ```js function glowTex(){ c=256; g=ctx.createRadialGradient(128,128,0,128,128,128); stops: (0,'rgba(255,236,190,1)'),(0.2,'rgba(255,180,80,0.65)'),(0.45,'rgba(255,130,40,0.18)'),(1,'rgba(255,120,30,0)'); fill.} ``` Halo ring texture (focus marker): 128 canvas: stroke circle arc lineWidth 2 rgba(255,180,84,.9) + outer glow blur? 2 arcs (r 40 width 3 alpha .9, r 48 width 1 alpha .35). Sprite. Star colors: mostly white/blueish, some amber: color = random: pick from [ [0.85,0.9,1], [1,1,1], [1,0.85,0.6] ] with weighting. ```js function buildStars(){ const mk=(count, size, op, fn)=>{ const g=new THREE.BufferGeometry(); const p=new Float32Array(count*3); const c=new Float32Array(count*3); for(...){v3.setFromSphericalCoords? random dir: u=rand*2-1, th=rand*2π; r=85000+rand*30000; p=[r*sqrt(1-u²)cos, r*u, r*sqrt(1-u²)sin]; color fn} geometry set attrs position, color; mat=PointsMaterial({size, sizeAttenuation:false, vertexColors:true, transparent:true, opacity:op, depthWrite:false}); }; main: 4200, 1.6, .85; bright: 500, 2.6, .95 (size variance not supported; 2 groups fine); band: 2200, 1.2, .5, warm gray, clustered: generate dir, compress component along band normal: take random point on sphere, project: p.y' — build band via: random angle t, radius offset gauss*0.10: dir = (cos t, gauss*0.14, sin t) normalized * r. Then rotate the whole band object: bandObj.rotation.set(1.1, 0, 0.4). } ``` 87. Time presets: ```js const SPEEDS=[{l:'⏸',v:0},{l:'1时',v:1/24},{l:'1日',v:1},{l:'1周',v:7},{l:'1月',v:30.44},{l:'1年',v:365.25},{l:'5年',v:1826}]; Default index 3 (1周)? Default 1日 is a nice speed for inner planets; outer barely move. Default '1 周' shows Mercury visibly. Pick 1周. ``` Rate label: "1 秒 = 1 周". 88. "↺ 今天" button: simDays = (Date.now()-EPOCH)/86400000. 89. Rail live AU: for each planet row: (group.position.length()/AU).toFixed(2); Sun row shows '—' or '0'. Moon: 距地? Show (0.3844*...)? For moon, show '0.384 AU'? Or show AU distance to Sun — fine, roughly 1.00. 90. Info distance line: "与您的距离" value fmtKm(cam.distanceTo(worldPos)*KM). 91. Also handle window resize. 92. Double-check r128 APIs: - THREE.SphereGeometry ✓ (Geometry removed, SphereGeometry is BufferGeometry ✓) - THREE.RingGeometry ✓ - CanvasTexture ✓ - Points + BufferGeometry setAttribute ✓ - Sprite, SpriteMaterial(map, additive, depthWrite false, transparent) ✓ - material.visible property ✓ - renderer.outputEncoding = THREE.sRGBEncoding ✓ r128 ✓ - texture.encoding sRGB ✓ - Raycaster.intersectObjects ✓ - Vector3.setFromSphericalCoords? Exists in r128? THREE.Spherical + vector.setFromSphericalCoords(radius, phi, theta) — yes, exists. Anyway I'll compute manually. - LineDashedMaterial + computeLineDistances for Pluto orbit: line.computeLineDistances() ✓. - PointsMaterial with vertexColors: true + color attr ✓ (r128: vertexColors boolean ✓). 93. Log depth chunk in ShaderMaterial (r128): `#include ` in the fragment also defines? Fine. Note: `#include ` etc. — these chunks exist in r128 ✓. 94. Sun light: PointLight(0xffd9a8, 2.6, 0) — default decay 1 is irrelevant with distance 0. Add a faint secondary PointLight? No. Planet night sides: ambient 0x33415a? AmbientLight(0x3a4a66, 0.55)? Legacy: ambient = color * intensity → 0x3a4a66*0.55 is dim ✓. 95. Saturn shadow on rings? Skip. 96. Also add a slight emissive on planets? No. 97. Sun mesh should also be pickable: pick sphere scale 3.5? Dynamic: max(r*8, dist*0.014) same formula → at 1500: 21 — too big? 21u vs Sun r .7 — 30×; clicking near the Sun area is always sun — acceptable (Sun is the main object; other picks only win if ray hits a smaller one first). Hmm but 21u pick sphere at 1500 distance = 21/1500 rad = 0.8° ≈ 50px — clicking on a planet label near the Sun might hit the Sun first. Raycast returns sorted by distance: if the ray passes through the Sun sphere (large) and then the Mercury pick — Sun is nearer (Sun is closer to camera? not necessarily). Edge case is acceptable. Actually cap dynamic pick: max(r*8, dist*0.010) → at 1500: 15u (37px). Fine. 98. Initial theta: pick one where inner planets nicely fan out; arbitrary: theta=2.1, phi=1.12. 99. Auto-start time: simDays = days since J2000 (from real time) → positions match today's sky ✓ (approximate). 100. Info "距日" static string: store in stats. Let me now write the final code with attention to syntax. Length will be substantial (~1000+ lines). That's fine. Small things: - `document.title` set. - Prevent text selection on drag: canvas user-select none; also .label user-select none. - Wheel listener on window? On canvas. - Touch-action: none on canvas for pointer events mobile ✓. - `#labels` z-index above canvas, below panels. Z-index: canvas 0, vignette 1, labels 2, panels 5, intro 40, load 50. Let me now write the info card HTML skeleton: ```html ``` Grid fill: stats object entry pairs. Rail skeleton: `` Top right: ```html

TIME · 时间流速

``` Top-left: ```html

TRUE SCALE · 1 : 1

真实比例太阳系

1 单位 = 100 万公里 · 1 AU = 1.496 亿 km

``` Bottom-left hints: ```html

拖拽旋转 · 滚轮缩放
右键/双指 平移 · WASD 自由飞行
Shift 加速 · 空格暂停 · Esc 取消跟随
点击天体即可跟随

``` Bottom-center scale: ```html

``` Bottom-right mm: ```html

NAV MAP · 导航50 AU

``` Focus halo sprite in 3D. Info card grid items: label k + value v: ```js iGrid.innerHTML = Object.entries(b.stats).map(([k,v])=>`

${k}

${v}

`).join(''); ``` Grid CSS: each row: display:grid 2-column grid; k left, v right. Sun stats: {直径:'1,392,700 km', 质量占比:'99.86%', 表面温度:'5,500 °C', 核心温度:'1,500 万 °C', 自转:'25.4 天', 光谱型:'G2V'}. Planet stats keys: 直径 / 距日 / 公转 / 自转 / 温度 / 卫星. 101. Also update `#rate` from the speed: speed v: 0→'已暂停'; 1/24→'1 秒 = 1 小时'; 1→'1 秒 = 1 天'; 7→'1 秒 = 1 周'; 30.44→'1 秒 = 1 月'; 365.25→'1 秒 = 1 年'; 1826→'1 秒 = 5 年'. 102. Edge: simDays grows — no date issues up to huge values; fine. 103. Minimap free flight: if user flies far (target > 50 AU), camera marker clamped at the edge. 104. Let me write the pan detach: on pan start: if(cam.focus) {cam.focus=null; hideInfo(); updateRailOn();}. 105. updateRailOn(): mark the .on class on the focus row. 106. Also add subtle CSS pulse on the focused rail row's dot? Keep .on style. 107. Intro stat values: - ☀ "1 米" → "若太阳缩小为 1 米,地球只有 4.5 毫米,远在 68 米之外" - ● "11 倍" → "木星直径是地球的 11 倍——却只有太阳的 1/10" - ◆ "4 小时" → "阳光从太阳到海王星,需要走近 4 小时" Number first amber Orbitron, then text. Layout:

4.5 mm…

Recheck the numbers: Sun 1 m: ratio 1/1.3927e9 → Earth 12742 km → 12742/1.3927e9 m = 9.15e-6 m = 9.15 μm?? Wait! Sun diameter 1.3927e9 m (1,392,700 km). If Sun → 1 m, factor = 1/1.3927e9. Earth 12,742,000 m → 12.742e6/1.3927e9 = 9.15e-3 m = 9.15 mm. Hmm diameter 9.15 mm. Radius-based: Sun radius 696,340 km → 1 m; Earth radius 6371/696340 = 9.15e-3 m = 9.15 mm diameter? 6371 km/696340 km * 1 m = 9.15 mm radius → diameter 18.3 mm. So "if Sun diameter = 1 m, Earth diameter = 9.2 mm (roughly 4.5mm is wrong?)" Common figure: Sun 1 m → Earth 9 mm? Let me recompute: 12742/1392700 = 0.00915 → 1 m * 0.00915 = 9.15 mm. Yes diameter 9.15 mm ≈ "9 毫米" (like a marble). Distance: 1 AU/696340 km (radius)… Earth's center distance 1.496e8 km / 1.3927e9 km * 1 m = 0.1074 m * 2 = 0.2148? Careful: scaling factor is linear: 1 m per 1.3927e9 km (diameter scale). Earth's distance 1.496e8 km → 1.496e8/1.3927e9 m = 0.1074 m?? That's 10.7 cm — wrong. 1.496e8/1.3927e9 = 0.1074. Hmm this is if Sun diameter=1m, Earth is 10.7cm?? Can't be. Recompute: 1.3927e9 km is the diameter. Scale: 1 m ↔ 1.3927e9 km. Earth-Sun distance = 1.496e8 km → 1.496e8/1.3927e9 m = 0.107 m = 10.7 cm?!? That's obviously off from the famous "68 meters" claim. The famous claim: Sun = 1 meter ball → Earth 9 mm is 107 m away? Let me redo: the famous one is: "if the Sun were 1 meter, Earth would be 9 mm at 107 m"? Verify with ratios: distance/Sun diameter = 1.496e8/1.3927e9 = 0.1074. So if Sun diameter = 1 m, distance = 0.107 m = 10.7 cm. If Sun diameter = 107 m (35 ft), Earth is 11.5 m away. Common "68 m" claim: Sun = 1 m diameter? No — the common one is: Sun to 1 m → Earth is 9.3 mm? and 107 m away? I think I'm confusing. Let me compute cleanly: Scale factor s = 1 m / 1.3927e9 km = 7.18e-10 m/km. Earth diameter: 12742 km × s = 9.15e-6 m = 9.15 μm?? Wait 12742 × 7.18e-10 = 9.15e-6 m = 9.15 microns? 12742 km × 7.18e-10 m/km: 12742 × 7.18 = 91,488 → ×1e-10 m = 9.15e-6 m = 9.15 microns. Hmm! Where did mm come from? I messed up: 1.3927e9 km ↔ 1 m. Earth 12742 km is 12742/1.3927e9 = 9.15e-6 of 1 m = 9.15 μm. So Sun=1m → Earth = 9 micrometers (a grain of dust / width of a human hair!). Distance: 1.496e8/1.3927e9 = 0.1074 m = 10.7 cm. So the "4.5mm @ 68m" figure: which scale? If Earth = 4.5 mm: scale = 4.5mm/12742 km; Sun = 12742 → 4.5mm: factor 3.526e-7 m/km → Sun = 1.3927e9 km × 3.526e-7 = 491 m; distance = 1.496e8 × 3.526e-7 = 52.8 m. So "Sun ≈ 500 m, Earth 4.5mm, 53 m away". "68 m" version: if Earth's 1 mm grain at…? Whatever — my earlier memory was wrong. Use accurate: 若太阳缩小为 1 米直径 → 地球只有 9 微米(细如发丝),在 10.7 厘米外。 Or the classic "peanut & ballroom": scale where Earth = 9 mm grain? Let me pick a clear, correct one: - 若太阳缩小为 1 米直径:地球 = 9.2 微米(细如发丝),在 10.7 厘米外。 - 若地球是一粒 9 毫米的弹珠? Too contrived. Alternative well-known: "把太阳放进操场,地球是 15 米外的沙粒"? Let's do: - b: "9 微米" — 若太阳直径缩小为 1 米,地球只有 9 微米——细如发丝,悬在 10.7 厘米外。 - Jupiter: 11 倍 — 木星直径是地球的 11 倍,却只有太阳的 1/10;它的轨道在 7.8 亿 km 之外。 - Neptune: 4 小时 — 光从太阳到海王星需要走近 4 小时(4.3 小时? light time: 4.495e9 km / 3e5 km/s = 14,984 s = 4.16 h ≈ 4 小时 ✓ "4 小时" fine). - Also 99.86% mass. Lead text: "在这里,所有天体大小与距离从未被压缩——你看到的空旷,就是真实的太阳系。" Good, accurate. Also use the same in the Earth fact: "若太阳缩小为 1 米,地球只是 10.7 厘米外的 9 微米微尘。" 108. Loading step text Chinese + %. 109. Let me also check Saturn's orbital distance 9.54 AU = 14.27 亿 km ✓. Jupiter 5.2 AU = 7.78 亿 ✓. Uranus 19.19 AU = 28.71 亿 ✓. Neptune 30.07 AU = 44.95 亿 ✓. Pluto 39.48 AU = 59.04 亿 ✓ (semi-major). 110. OK, let's write everything. Also wrap boot in a try/catch to show errors on the loading screen. Let me also decide planet spin phase: to avoid same orientation, random per body at build (b.phase = Math.random()*6.28). Clouds: only earth. Atmosphere color: Earth 0x4a9df8 (strong), Venus 0xd8b06a (faint 0.5), gas giants: Jupiter 0xd8a877 faint 0.35, Saturn 0xe6c896 0.3, Uranus 0x9fe0e6 0.35, Neptune 0x5b8def 0.4. Parameter strength. Atmosphere sphere radius factor 1.05; planet surface vs. atmosphere — additive rim OK. 111. Focus halo: sprite scale = max(body.r*7, camDist*0.05)? Fixed r*7 with min 0.02? For Mercury r*7=0.017 — at 100u that's 0.01°=0.6px, too small. Use scale = clamp(body.r*7, 0.05, camDist*0.08)? Dynamic: s = Math.min(Math.max(body.r*7, camDist*0.02), camDist*0.12)? Simpler: s = camDist*0.02 (2% of distance → ~11px at 55° fov: angular 0.02 rad=1.15° ≈ 15px ✓ good) but hide when s < body.r*1.5? Hide when camDist < body.r*25 (you're "there", marker would cover the planet? 2%*25r=0.5r… hmm). Condition: hide if camDist < body.r*30 else scale camDist*0.02. For Sun focus: camDist 20.9, r 0.7 → 30r=21 → borderline hide/show flicker at 20.9. Use r*35: Sun 24.3 > 20.9 → hidden ✓; Earth viewK 18 < 35 → hidden when at default focus distance — but marker is for finding the target before arrival: during fly-in camDist is large → visible; after arrival hidden ✓ good. 112. While flying (target tween), info already shows; fine. 113. Another performance: per-frame label DOM writes: 11 labels × style.transform + km textContent every frame — OK. Minimap per frame draw: 10 polylines × 512 points = 5k lineTo per frame — could be heavy at 60fps (5k paths). Reduce: precompute the 2D orbit path to an offscreen canvas once! Draw static layer (orbits + belts) once on an offscreen canvas, blit per frame, then dynamic dots. ✓ Do that. 114. Belt rotation: skip (static). 115. Also add slight camera roll? No. 116. Also add "speed" to labels? No. Let me write the code now. Be careful with template literal `${}` inside shader strings — shaders have no ${} (none). Also `#include ` should be inside main after gl_Position set ✓. Atmosphere shader: ```js function atmoMat(hex, str){ return new THREE.ShaderMaterial({ uniforms:{ uC:{value:new THREE.Color(hex)}, uS:{value:str} }, transparent:true, depthWrite:false, blending:THREE.AdditiveBlending, vertexShader:` #include #include varying vec3 vN; varying vec3 vP; void main(){ vN = normalize(normalMatrix*normal); vec4 mv = modelViewMatrix*vec4(position,1.0); vP = mv.xyz; gl_Position = projectionMatrix*mv; #include }`, fragmentShader:` #include #include uniform vec3 uC; uniform float uS; varying vec3 vN; varying vec3 vP; void main(){ float f = 1.0 - abs(dot(normalize(vN), normalize(-vP))); float a = pow(f, 3.2)*uS; gl_FragColor = vec4(uC, a); #include }` }); } ``` Sun shader with time uniform as designed; also add subtle limb brightening corona edge? Fine. 117. Wheel zoom clamp: rT clamp [minR(), 25000]. minR = focus? Math.max(focus.r*1.12, 0.0025) : 0.0025. Camera radius clamp too. Moon min: 0.0017*1.12=0.0019 → allow 0.002 near plane? Set near 0.001. far 300000. 118. Also handle pointer capture: canvas.setPointerCapture on down. 119. Prevent page scroll: overflow hidden ✓; wheel preventDefault. 120. iOS: devicePixelRatio cap 2 ✓. Let me write HTML now in full. Also ``. Font link: ```html ``` Three r128 cdnjs: ```html ``` Let me carefully assemble the body data array with all fields including L, varpi. Define: ```js const PLANETS=[ {id:'mercury',cn:'水星',en:'MERCURY',type:'类地行星',rKm:2439.7,color:'#a89f96',a:0.38709927,e:0.20563593,i:7.00497902,O:48.33076593,vp:77.45779628,L:252.25032350,T:87.9691,day:58.646,tilt:0.03,viewK:18, stats:{直径:'4,879 km',距日:'0.39 AU · 5,790 万 km',公转:'88 天',自转:'58.6 天',温度:'−173 ~ 427 °C',卫星:'0'}, fact:'表面布满陨石坑,昼夜温差超过 600 °C——虽然离太阳最近,却比金星冷得多。'}, venus {rKm:6051.8,color:'#e8c78c',a:.72333566,e:.00677672,i:3.39467605,O:76.67984255,vp:131.60246718,L:181.97909950,T:224.701,day:-243.025,tilt:2.6,viewK:15, atmo:{c:0xd8b06a,s:.5}, stats:{直径:'12,104 km',距日:'0.72 AU · 1.08 亿 km',公转:'224.7 天',自转:'243 天(逆行)',温度:'464 °C',卫星:'0'}, fact:'浓厚的二氧化碳大气引发失控温室效应,是太阳系最热的行星;自转方向与其他行星相反。'}, earth {rKm:6371,color:'#5aa0ff',a:1.00000261,e:.01671123,i:.00001531,O:0,vp:102.93768193,L:100.46457166,T:365.256,day:.99727,tilt:23.44,viewK:18,atmo:{c:0x4a9df8,s:.9}, stats:{直径:'12,742 km',距日:'1.00 AU · 1.496 亿 km',公转:'365.25 天',自转:'23.93 小时',温度:'平均 15 °C',卫星:'1'}, fact:'若太阳缩小为 1 米直径,地球只有 9 微米——细如发丝,悬在 10.7 厘米之外。这就是真实的空间感。'}, mars {rKm:3389.5,color:'#e0714a',a:1.52371034,e:.09339410,i:1.84969142,O:49.55953891,vp:-23.94362959,L:-4.55343205,T:686.98,day:1.02596,tilt:25.19,viewK:16,atmo:{c:0xd88a5f,s:.25}, stats:{直径:'6,779 km',距日:'1.52 AU · 2.28 亿 km',公转:'687 天',自转:'24.6 小时',温度:'−63 °C',卫星:'2'}, fact:'拥有太阳系最高的火山(奥林帕斯山,22 km)与 4,000 km 长的水手号峡谷,目前有多台探测器在表面工作。'}, jupiter {rKm:69911,color:'#d8a877',a:5.202887,e:.04838624,i:1.30439695,O:100.47390909,vp:14.72847983,L:34.39644051,T:4332.589,day:.41354,tilt:3.13,viewK:8,gas:true,atmo:{c:0xd8a877,s:.35}, stats:{直径:'139,820 km',距日:'5.20 AU · 7.78 亿 km',公转:'11.86 年',自转:'9.9 小时',温度:'−108 °C',卫星:'95'}, fact:'质量是其他所有行星之和的 2.5 倍;大红斑是一场能装下整个地球的巨型风暴,已持续数百年。'}, saturn {rKm:58232,color:'#e6c896',a:9.53667594,e:.05386179,i:2.48599187,O:113.66242448,vp:92.59887831,L:49.95424423,T:10759.22,day:.44401,tilt:26.73,viewK:20,gas:true,ring:true,atmo:{c:0xe6c896,s:.3}, stats:{直径:'116,460 km',距日:'9.54 AU · 14.27 亿 km',公转:'29.4 年',自转:'10.7 小时',温度:'−139 °C',卫星:'146'}, fact:'光环由无数冰块与岩屑组成,延伸 28 万公里,厚度却常不足 1 公里;整体密度比水还低。'}, uranus {rKm:25362,color:'#9fdbe0',a:19.18916464,e:.04725744,i:.77263783,O:74.01692503,vp:170.95427630,L:313.23810451,T:30688.5,day:-.71833,tilt:97.77,viewK:12,gas:true,atmo:{c:0x9fe0e6,s:.35}, stats:{直径:'50,724 km',距日:'19.19 AU · 28.71 亿 km',公转:'84 年',自转:'17.2 小时(逆行)',温度:'−197 °C',卫星:'28'}, fact:'自转轴倾角 97.8°,几乎是"躺着"绕太阳滚动;每个季节长达 21 年。'}, neptune {rKm:24622,color:'#5b8def',a:30.06992276,e:.00859048,i:1.77004347,O:131.78422574,vp:44.96476227,L:-55.12002969,T:60182,day:.67125,tilt:28.32,viewK:12,gas:true,atmo:{c:0x5b8def,s:.4}, stats:{直径:'49,244 km',距日:'30.07 AU · 44.95 亿 km',公转:'164.8 年',自转:'16.1 小时',温度:'−201 °C',卫星:'16'}, fact:'太阳系风速之王,风速超过 2,000 km/h;也是第一颗通过数学预测而非直接观测发现的行星。'}, pluto {id:'pluto',cn:'冥王星',en:'PLUTO',type:'矮行星',rKm:1188.3,color:'#c2a98c',a:39.482,e:.2488,i:17.14,O:110.299,vp:224.066,L:238.929,T:90560,day:-6.387,tilt:122.5,viewK:12,dwarf:true, stats:{直径:'2,377 km',距日:'39.48 AU · 59.04 亿 km',公转:'248 年',自转:'6.4 天(逆行)',温度:'−229 °C',卫星:'5'}, fact:'轨道偏心率极高,近日点时比海王星更靠近太阳;2006 年被重新归类为矮行星。'} ]; ``` Mars vp negative: w = vp - O = -23.94-49.56 = -73.5 → mod 360 = 286.5 ✓ (code mod handles). M0 = L - vp: Mercury 252.25-77.457=174.79 ✓. Sun body object separately, then moon. ```js const SUN={id:'sun',cn:'太阳',en:'SUN',type:'G2V 主序星',rKm:695700,color:'#ffb454',viewK:30, stats:{直径:'1,392,700 km',质量占比:'99.86%',表面温度:'5,500 °C',核心温度:'1,500 万 °C',自转:'25.4 天(赤道)',光谱型:'G2V'}, fact:'太阳的质量是地球 33 万倍,占据整个太阳系 99.86% 的质量——你看到的每一颗行星,都只是它光环边缘的尘埃。'}; const MOON={id:'moon',cn:'月球',en:'MOON',type:'天然卫星',rKm:1737.4,color:'#cfd2d8',distKm:384400,T:27.321661,viewK:8, stats:{直径:'3,474 km',距地球:'38.44 万 km',公转:'27.32 天',自转:'与公转相同',温度:'−173 ~ 127 °C',卫星:'—'}, fact:'潮汐锁定使它永远以同一面朝向地球,背面直到 1959 年才被探测器拍下。'}; ``` 121. Note: viewK Sun 30 → 20.87 units. 122. Moon world: earth.group.localToWorld. Moon group is a child of the earth group: group.position set per frame in local coords ✓; getWorldPosition needs parent matrix updated — the three.js renderer updates matrices during rendering; if I read getWorldPosition before the first render it may be stale; in the loop I call scene.updateMatrixWorld() once before reads? Renderer does it; I'll call scene.updateMatrixWorld() explicitly at the start of the frame (cheap). 123. Orbit toggle: orbitGroup contains planet orbit LineLoops; moon orbit is a child of the earth group — put it in a separate group that also toggles: save the moonOrbit reference and set visible together. 124. Belt toggle: beltGroup. 125. Label toggle: labelsEl.style.display. OK — also "homeBtn": focusOn(SUN). nowBtn: reset simDays. 126. Rail includes sun, moon (indented after earth), pluto (矮行星 marker maybe). 127. Rail row AU live: for sun, show '0'. 128. Info stop button: cam.focus=null; info.classList.remove('show'); rail off. Also on free move by keys, info remains showing the old target? On keymove detach: keep info (distance live-updates? iDist reads cam.focus… if null skip). Let's keep: if(!cam.focus) hide info. Simpler UX: keys detach → hide info. 129. Initial: no focus; after intro → focus SUN (with rT 1500). Rail sun .on. 130. Loading progress: increment by step count. Also set renderer.setClearColor(0x030509, 1). Let me now write the final answer file. Also a subtle grid? No. One more consideration: initial camera radius 9000, near 0.001: log depth ✓; star dome 85k-115k < far 300k ✓. Sun halo sprites: scale SUN_R*8=5.6 and *15=10.4, opacity .85/.3, additive, depthWrite false, depthTest true? A depthTest true with a transparent sun sphere: sprite center at sun center → the sun sphere's front face is nearer? Sprite is a billboard at the center; the sphere surface (front) is at radius .7 nearer than the center → sprite fragments at center depth will be behind the sun disk → corona only visible outside the disk ✓ desired. But log depth + sprite: SpriteMaterial is built-in, supports log depth ✓. 131. Minimap static layer: offscreen canvas 2× size; draw orbits with each body color alpha .28; asteroid belt annulus: stroke circle r=2.7AU*scale, lineWidth (3.35-2.1)*AU*scale? That's 1.25AU*2.32=2.9px alpha .05. Kuiper 32-48: lineWidth 16*2.32=37px?? Too thick; use alpha .03. OK. Scale: half=112 (canvas 224 css + border?). Let's do MM css size 224, half=112, maxAU=50 → pxPerAU=2.24. Camera marker triangle pointing? A simple 3px dot + short line to focus target? Skip. 132. mmScale text: "±50 AU". 133. Minimap click coordinate conversion: rect = canvas.getBoundingClientRect(); x=(e.clientX-rect.left)/rect.width*224 - 112; world = x/pxPerAU*AU. Body hit: iterate bodies world → px; if dist<10 → nearest. 134. Minimap hover: same nearest → mmname textContent = cn; canvas cursor pointer vs. crosshair. 135. Also mm click empty space: target tween: implement tweenT = {from:cam.target.clone(), to:world, t:0, dur:1.1}; in loop if tweenT: t+=dt/dur; k=ease; cam.target.lerpVectors(from,to,k); if t>=1 null. Cancel on pan/key input (set tweenT=null). Also set focus=null, hide info. 136. ease: t<.5? 2t² : 1-(−2t+2)²/2 (easeInOutQuad). 137. Sun spin: rotate the sun mesh slowly? Shader is static aside from time; fine. 138. Also add subtle "lens dust"? No. Now let me double-check the GLSL sun fBm cost: 5 octaves × 3D noise per fragment, on a small sphere — fine. Write it all. Also wrap in try: catch (err) → show error text on loading. Also `const clock = new THREE.Clock()`. Key handling: track e.code in keys set. In loop: ```js const sp=cam.radius*1.35*(keys.has('ShiftLeft')||keys.has('ShiftRight')?6:1)*dt; Forward: f=tmp3.subVectors(cam.target,camera.position).normalize(); Right: tmp4.crossVectors(f, cam.up(0,1,0)).normalize(); if W: target.addScaledVector(f, sp); etc. If any move: detach. Q: target.addScaledVector(UP, -sp); E: +. ``` Use code: KeyW etc. Space: e.code==='Space' on keydown (not repeat): toggle speed between 0 and lastSpeed; update buttons. 139. Update rate label & speed button on change. 140. Date element update: format padded. Let me write the final file now. Careful with quotes inside the Chinese text (use ' fine). Also `#labels .label` default opacity .92. Label km format: use fmtKm. Label click: pointerdown then up without move → click event works. Also add title attribute? No. Final check on ring UV & texture: 1024x2 canvas, ImageData(1024,2) — fill both rows identically. Also `texture.wrapS=ClampToEdge` default fine; minFilter default LinearMipMapLinear with NPOT 1024x2 — WebGL1 NPOT doesn't allow mipmaps! 1024x2: non-power-of-two height (2 is POT? 2 = 2^1 ✓ so 1024x2 is POT ✓ fine). Planet textures 512x256 POT ✓, 1024x512 ✓. Cloud 512x256 ✓. 141. PointsMaterial size in px with sizeAttenuation false: main stars 1.6 px, bright 2.7. Colors: build a Float32 color array. Band object rotation: rotate the band geometry: create band points in a plane, then rotate the Points object: band.rotation.x=1.05, band.rotation.z=0.5. 142. Also subtle: renderer.toneMapping = THREE.ACESFilmicToneMapping? r128 supports; improves sun look; but with outputEncoding sRGB + toneMapping ACES: fine. Use ACESFilmic with exposure 1.05. ShaderMaterial is not affected by toneMapping unless we include the tonemapping chunk — the sun shader output won't be tone-mapped (ShaderMaterial ignores unless we include the tonemapping_fragment). Slight inconsistency acceptable (sun is brightest anyway). Actually to keep the sun colors exact, leave it. 143. Ensure `#info` initial is hidden (no .show). 144. Loading UI: also show a small hint line at the bottom "渲染引擎: Three.js r128 · 比例 1:1". OK, let me compose. I'll write clean, sectioned code. Also be mindful that the final message = short Chinese intro + a single HTML code block. Let me also re-verify Kepler with Earth at d=0: M0=357.53° → M≈357.5° → E≈same → x0=a(cosE−e)=1*(−0.99999 −(−?)) cos(357.5°)=0.999 → x0=0.999−0.0167=0.9824? Earth's perihelion is in early January ✓ (J2000 = Jan 1.5 2000, perihelion around Jan 3-4) → x positive, y0=a√(1−e²)sin(357.5°)= −0.0436 → near perihelion ✓. Position transform: X uses x0,y0 with rotations ✓. Sun's light at origin: planets at max 4500u — no attenuation (distance 0) ✓ uniform lighting regardless of distance (physically wrong — outer planets would be dimmer — but keeping it visible; stylistic choice; mention? Fine). OK, one more: Mercury orbit line with e=0.2 — a visible ellipse ✓ nice. Uranus tilt: spin.rotation.z = 97.77° → axis points nearly in the orbital plane; ring? Uranus ring — skip (faint). Moon texture: id 'moon' ✓. Moon pick & label & rail (sub row). Moon label distance: from camera. Moon focus viewDist = 0.0017*8=0.0139 ✓ (r=0.0017374). viewDist stored: b.viewDist = b.rKm/KM * viewK. Sun: 0.6957*30=20.87 ✓. Minimum radius on focus: b.r*1.25. 145. Wheel: also allow +/- keys? Skip. 146. Now compose the answer. Short intro line in Chinese + the code block. Code length is large; here we go. Also add ``. Ensure the speed button container id speeds is generated in JS. Let me write the JS in a single

TRUE SCALE · 1 : 1

真实比例太阳系

—

1 单位 = 100 万公里 · 1 AU = 1.496 亿 km

TIME · 时间流速

NAV MAP · 导航R = 50 AU

拖拽旋转 · 滚轮缩放
右键 / 双指 平移 · WASD 自由飞行
Q / E 升降 · Shift 加速
空格暂停时间 · 点击天体跟随

CALIBRATING SCALE

正在准备…

00%

ASTROGRAPHIC RENDER · 严格 1:1

真实比例SOLAR SYSTEM

在这里,天体大小与距离从未被压缩。你看到的空旷与荒凉,就是太阳系的真实面貌——行星只是星空中几近不可见的光点。

9 微米若太阳缩小为 1 米直径,地球只有 9 微米——细如发丝,悬在 10.7 厘米之外

11 倍木星直径是地球的 11 倍,却只有太阳的 1/10,轨道远在 7.8 亿 km 之外

4 小时阳光从太阳抵达海王星,需要走近 4 小时(45 亿 km)

拖拽旋转 · 滚轮缩放 · 点击天体跟随 · WASD 自由飞行

``` **功能要点** - **严格 1:1**:太阳半径 0.70 单位(1 单位 = 100 万公里),海王星轨道在 4,500 单位外——在太阳近旁看,行星就是几个亚像素光点,底部比例尺实时换算 km / AU,让你时刻感知真实尺度。 - **真实轨道**:使用 J2000 开普勒轨道根数(半长轴、偏心率、倾角、升交点、近日点幅角),位置与**今天的实际星空一致**;时间可加速到 5 年/秒。 - **导航体系**:点击天体 / 左侧列表 / 右下导航小地图(可点击空白处直接传送)三种方式聚焦跟随,配 WASD 自由飞行和指数缩放,从太阳表面(21 倍半径外)一路飞到柯伊伯带。 - **细节**:程序化生成的九大行星贴图(木星大红斑、土星光环卡西尼缝、地球云层与极冠)、日冕与太阳表面湍流着色器、月球(潮汐锁定)、主/柯伊伯小行星带、行星大气辉光。小提示:从太阳出发看地球确实几乎不可见——这正是真实比例的意义,用滚轮飞过去,或者点左侧"地球"直接抵达。

生成真实比例的太阳系3d-2