【Three.js】使用Three.js开发一个太阳系 3D 可视化模拟器完整技术项目概述基于 Three.js 构建的交互式 3D 太阳系模拟运行于现代浏览器中。支持行星公转、自转、土星光环、地球云层与大气、太阳辉光与日冕特效以及相机聚焦与自由视角控制。技术栈Three.js r170 (ES Module)、原生 JavaScript (ES Module)、WebGL、Canvas 2D入口文件earth.html单页应用无构建工具依赖效果展示项目结构game engine/ ├── earth.html # 主入口包含全部 HTML/CSS/JS ├── img/ # 行星纹理图片外网下载的 JPG │ ├── sun.jpg │ ├── earth.jpg │ ├── mercury.jpg │ ├── venus.jpg │ ├── mars.jpg │ ├── jupiter.jpg │ ├── saturn.jpg │ ├── uranus.jpg │ ├── neptune.jpg │ └── moon.jpg架构设计加载与初始化通过script typeimportmap映射three及three/addons/到 unpkg CDN以 ES Module 方式导入 Three.js 核心库和OrbitControls。import*asTHREEfromthree;import{OrbitControls}fromthree/addons/controls/OrbitControls.js;场景、相机、渲染器组件参数场景黑色背景 (0x000000)相机PerspectiveCamera(45, aspect, 0.1, 1000)初始位置(0, 10, 18)渲染器WebGLRenderer开启抗锯齿像素比限制 ≤2ACES Filmic ToneMapping轨道控制器使用OrbitControls实现阻尼惯性dampingFactor 0.05距离限制minDistance 0.8maxDistance 60自动旋转默认开启速度0.3模块详解1. 星空背景 (createStars)使用THREE.Points生成 15000 颗星星。位置球面均匀分布半径 100~400大小0.3~1.1随机颜色10% 偏橙红10% 偏蓝80% 纯白材质PointsMaterialAdditiveBlendingsizeAttenuation: true2. 太阳系统纹理程序化回退纹理橙黄渐变 大量随机噪点圆外载纹理img/sun.jpg加载完成后替换网格层级半径材质作用太阳球体1.5MeshBasicMaterial基础表面内层辉光1.6ShaderMaterial边缘泛光日冕2.0ShaderMaterial动态闪烁冕流外层光晕2.6ShaderMaterial微弱外发光着色器特效三个 ShaderMaterial 共享相同的顶点着色器计算法线和世界坐标区别在片元着色器辉光基于视角与法线点积的边缘发光叠加时间脉冲sin(time * 2.0 y * 3.0)日冕更强的边缘衰减pow(rim, 3)叠加 flicker 噪声sin(time * 1.5 x * 5 z * 4)光晕最外层大半径pow(rim, 4)低强度 0.12所有发光层均使用AdditiveBlending和BackSide保证从任何角度可见。3. 行星系统数据定义 (planetData)行星半径轨道半径相对速度轴倾角特殊标记水星0.082.54.150.03-金星0.183.81.622.64-地球0.205.21.000.41earth: true火星0.136.80.530.44-木星0.559.50.0840.05-土星0.4512.50.0340.47saturn: true天王星0.3015.50.0121.71-海王星0.2818.50.0060.49-纹理加载机制采用fallback 回退 异步替换策略constplanetMatConfig{mercury:{fallback:createMercuryTexture(),props:{roughness:0.9,metalness:0.1}},// ...};consttexUrls{mercury:img/mercury.jpg,// ...};初始化时创建 Canvas 程序化纹理作为 fallback用TextureLoader异步加载外部 JPG 图片加载完成后替换材质的map属性并标记更新地球特殊处理使用MeshPhysicalMaterial并设置clearcoat等 PBR 参数。八大行星月球地球和太阳都下载号纹理图片程序化纹理生成各行星的createXxxTexture()函数均使用 Canvas 2D API行星方法风格水星createMercuryTexture灰度渐变 大量深色陨石坑金星createVenusTexture暖黄渐变 大范围模糊云层地球内联在fallbackEarthTex蓝绿渐变为大陆 白斑为云示意火星createMarsTexture红橙渐变 深色地表斑点 浅色极冠木星createJupiterTexture水平色带 白色湍流噪点土星createSaturnTexture水平淡黄带 微弱高光天王星createUranusTexture青蓝渐变 微弱云纹海王星createNeptuneTexture深蓝渐变 淡色涡旋LOD多级细节createPlanetLOD(radius, material, baseSeg)创建三个精度的球体级别分段数显示距离精细min(256, baseSeg*2)radius * 5以内中等baseSegradius * 15以内粗略max(12, seg*0.4)radius * 40以内4. 土星环系统纹理生成Canvas 2048×64绘制 23 层同心色带start→end映射到径向位置每层独立颜色和透明度。从内到外模拟稠密的 B 环明亮卡西尼缝低透明度间隙较暗的 C 环外层逐渐稀薄叠加 200 个随机噪点模拟冰粒尘埃。UV 映射RingGeometry默认 UV 基于投影坐标直接贴图会导致纹理扭曲。核心处理for(leti0;iuvs.count;i){constxpos.getX(i);constypos.getY(i);constdistMath.sqrt(x*xy*y);constu(dist-ringInner)/(ringOuter-ringInner);uvs.setXY(i,u,0.5);}U 坐标重映射为径向距离归一化值使纹理的 X 轴映射为同心环V 坐标固定为 0.5取纹理中间一行因为所有行相同几何参数参数值内径planet.radius * 1.15外径planet.radius * 2.4分段320倾斜角Math.PI * 0.4透明度0.75渲染面DoubleSide5. 地球云层与大气云层MeshPhysicalMaterial半径偏移 0.8%AdditiveBlending以不同速度自转rotation.y dt * 0.1大气辉光ShaderMaterialpow(rim, 3)边缘发光颜色#4d8affAdditiveBlending月球SphereGeometry(radius * 0.27)以地球为中心半径 0.5 公转6. 运动系统公转p.angledt*p.data.speed*0.2;p.lod.position.xMath.cos(p.angle)*p.data.orbit;p.lod.position.zMath.sin(p.angle)*p.data.orbit;相对速度基准地球 1.0。自转所有行星自转rotation.y dt * 0.3云层更慢*0.1月球公转角速度dt * 3半径 0.5绕地球旋转。7. 相机聚焦系统点击右侧标签触发focusPlanet(name)获取行星/月球世界坐标计算目标相机位置pos (0, r*2, r*4)使用cubic bezier 缓动插值camera.position和controls.targetconsttfocusProgress0.5?4*focusProgress*focusProgress*focusProgress:1-Math.pow(-2*focusProgress2,3)/2;聚焦期间暂停自动旋转。双击空白重置视角。8. 轨道线使用LineBasicMaterial透明度 0.1绘制 128 段圆环每条轨道在行星创建时添加。9. UI 面板固定于右侧垂直居中包含所有行星和月球的圆形标签按钮。点击切换active高亮状态。光照体系光源参数说明PointLight0xffeedd, intensity 4太阳模拟AmbientLight0xffffff, intensity 1环境补光HemisphereLight天0xffffff/ 地0x444466, 0.6环境色着色器一览使用位置着色器核心公式太阳辉光ShaderMaterial(BackSide, Additive)rim pow(1-dot(view,normal), 2) * pulse太阳日冕ShaderMaterial(BackSide, Additive)rim pow(1-dot(view,normal), 3) * flicker太阳光晕ShaderMaterial(BackSide, Additive)rim pow(1-dot(view,normal), 4)地球大气ShaderMaterial(FrontSide, Additive)rim pow(1-dot(view,normal), 3)关键渲染参数参数值Pixel Ratiomin(devicePixelRatio, 2)Tone MappingACES FilmicTone Mapping Exposure1.5抗锯齿antialias: true响应式窗口resize事件更新相机 aspect ratio 和渲染器尺寸。性能优化Pixel ratio 限制Math.min(devicePixelRatio, 2)避免高 DPI 设备渲染压力LOD 多级细节远距离行星使用低面数网格Canvas 回退纹理不依赖外部图片加载首次渲染即显示纹理尺寸控制内行星 512×256外行星天王/海王256×128