简介这是一份面向Web前端初学者与三维可视化开发者的Three.js实战学习资源聚焦三维宇宙模拟场景系统讲解three.js核心概念与工程化应用。资源以Vue3为框架底座集成Element Plus UI与Three.js完整实现高精度太阳系建模——包括按真实比例缩放的行星几何体、PBR材质纹理映射、自转/公转复合动画、动态光源系统、星空背景随机生成算法以及星系、黑洞、恒星等天体的程序化建模逻辑。压缩包共2000个文件主体为1675个JavaScript模块含场景初始化、轨道计算、材质加载等核心逻辑、198份Markdown学习笔记涵盖API详解与调试技巧、116个JSON配置如天体参数、光照参数辅以HTML入口、CSS样式及少量Python工具脚本总大小57.66MB。已有46人学习下载提供可直接运行的完整项目结构、分层清晰的代码组织含pages、config、utils等模块及浏览器端实时演示效果助开发者快速掌握WebGL三维开发全流程。1. 项目概述从零构建一个会动的太阳系最近在捣鼓一个挺有意思的玩意儿用 three.js 在网页里模拟整个太阳系。这可不是简单摆几个球而是要做出带纹理贴图的星球、让它们各自转着自转、绕着太阳公转还得把光照和摄像机位置调对让整个场景看起来有模有样。对于刚接触三维 Web 前端或者想用 three.js 做点酷炫效果的朋友来说这个项目是个绝佳的练手机会。它几乎涵盖了 three.js 最核心的基础概念场景、相机、渲染器、几何体、材质、纹理、灯光、动画循环以及最关键的——三维空间中的坐标与变换。通过亲手把太阳、水星、金星一直到海王星甚至小行星带一个个“造”出来并让它们动起来你能对三维编程有一个非常直观和深刻的理解。不管你是前端开发者想拓展技能边界还是对数据可视化、游戏化展示感兴趣这个“宇宙沙盒”都能让你玩得不亦乐乎。2. 核心思路与架构设计2.1 为什么选择 three.js 与 WebGL在网页里做三维首先得选对工具。WebGL 是底层标准但直接用它写代码堪比用汇编语言造汽车复杂且繁琐。Three.js 的出现就是为了把 WebGL 的复杂性封装起来提供一套声明式的、易于理解的 JavaScript API。它抽象出了“场景(Scene)”、“网格(Mesh)”、“材质(Material)”这些符合我们认知的概念。对于太阳系模拟这种偏重展示和动画的项目three.js 的易用性和丰富的社区生态如大量的纹理资源、加载器、后期处理效果是决定性优势。你不需要从零理解着色器编程就能快速搭建出视觉效果不错的三维场景。2.2 太阳系模拟的核心设计思路这个项目的核心思路可以概括为“分层建模”和“独立动画”。分层建模每个星球包括太阳都是一个独立的“网格(Mesh)”对象。一个 Mesh 由“几何体(Geometry)”和“材质(Material)”构成。几何体决定形状这里我们都是用球体SphereGeometry材质决定外观颜色、光泽度、纹理贴图。然后我们将这些 Mesh 按照天文数据放置在三维场景Scene中的不同位置。独立动画每个星球需要两种运动自转和公转。在 three.js 的动画循环中我们需要独立更新每个星球自转通过每帧增加星球网格自身绕其 Y 轴的旋转角度来实现。公转公转的模拟需要一点技巧。一个高效且清晰的做法是为每个行星创建一个空的“容器”对象Object3D将行星 Mesh 作为这个容器的子对象。然后我们让容器绕太阳场景原点旋转而行星 Mesh 在容器内有一个初始的偏移距离即轨道半径。这样行星的公转容器旋转和自转Mesh自身旋转就完全解耦了逻辑清晰也便于单独控制速度。坐标系与比例尺真实太阳系的尺寸和距离比例极其夸张如果按真实比例渲染要么太阳巨大无比要么行星小到看不见。因此我们必须对星球大小和轨道半径进行“艺术化”的缩放在视觉美观和相对比例之间找到平衡。通常我们会放大行星的体积同时大幅缩小轨道半径以确保所有行星都能在一个合理的视窗内被观察到。3. 环境搭建与项目初始化3.1 创建基础 HTML 与引入 three.js首先创建一个标准的 HTML 文件并通过 CDN 引入 three.js 库。这是最快上手的方式。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleThree.js 太阳系模拟/title style body { margin: 0; overflow: hidden; } #canvas-container { width: 100vw; height: 100vh; } /style /head body div idcanvas-container/div !-- 引入 three.js 主库 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js/script !-- 后续我们自己的脚本 -- script src./solarSystem.js/script /body /html注意这里使用了 r128 版本three.js 版本迭代较快建议在正式项目中锁定一个稳定版本。如果需使用OrbitControls轨道控制器等扩展也需要额外引入对应的 JS 文件。3.2 初始化三大核心组件在solarSystem.js中我们从搭建 three.js 的“铁三角”开始场景(Scene)、相机(Camera)和渲染器(Renderer)。// 获取容器 const container document.getElementById(canvas-container); // 1. 创建场景 const scene new THREE.Scene(); scene.background new THREE.Color(0x000010); // 设置深空背景色 // 2. 创建透视相机 const camera new THREE.PerspectiveCamera( 60, // 视野角度 (FOV) container.clientWidth / container.clientHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); camera.position.set(0, 20, 50); // 将相机向后、向上移动以获得一个较好的初始视角 // 3. 创建 WebGL 渲染器 const renderer new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿 renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); // 适配高清屏 container.appendChild(renderer.domElement); // 将画布添加到页面 // 4. 添加窗口大小变化监听 window.addEventListener(resize, () { camera.aspect container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); });关键点解析透视相机(PerspectiveCamera)模拟人眼视角物体近大远小最适合这种展示型场景。其参数中fov视野很重要值越大看到的场景范围越广但边缘变形也可能更明显。渲染器(WebGLRenderer)setPixelRatio的调用能确保在高分辨率屏幕上渲染更清晰。antialias: true能平滑几何体的边缘提升视觉质量。相机位置初始位置(0,20,50)是一个经验值意味着相机位于世界坐标的 (x0, y20, z50) 点。由于后续星球主要分布在 XZ 平面上Y轴向上这个位置给了我们一个略带俯视的全局视角。4. 星球对象的创建与材质处理4.1 构建星球网格几何体与材质太阳系的主角是星球。我们首先创建一个函数来生成单个星球。/** * 创建一个星球 * param {number} radius 星球半径 * param {string} textureUrl 纹理图片URL * param {Object} options 可选参数如自转速度、光泽度等 * returns {THREE.Mesh} 星球网格对象 */ function createPlanet(radius, textureUrl, options {}) { const { rotationSpeed 0.002, specular null, shininess 30 } options; // 1. 加载纹理 const textureLoader new THREE.TextureLoader(); const texture textureLoader.load(textureUrl); // 可选设置纹理重复和偏移但星球纹理通常不需要 // 2. 创建材质 let material; if (specular) { // 像水星、金星这样表面粗糙的岩石星球使用 MeshLambertMaterial 或 MeshPhongMaterial无高光 material new THREE.MeshPhongMaterial({ map: texture, // 漫反射贴图颜色纹理 specular: new THREE.Color(specular), // 高光颜色 shininess: shininess // 高光强度 }); } else { // 像太阳这样自身发光或需要更简单表现的星球使用基础材质 material new THREE.MeshBasicMaterial({ map: texture }); } // 3. 创建几何体球体 const geometry new THREE.SphereGeometry(radius, 32, 32); // 后两个参数是宽度和高度分段数影响球体平滑度 // 4. 组合成网格 const planet new THREE.Mesh(geometry, material); // 为网格对象添加自定义属性便于在动画循环中访问 planet.userData.rotationSpeed rotationSpeed; return planet; }实操心得纹理加载TextureLoader.load()是异步的但在我们的简单场景中使用回调或 Promise 处理加载完成事件并非必须。对于复杂场景可以使用LoadingManager来统一管理加载进度。分段数SphereGeometry的宽度和高度分段数后两个参数默认是 32。增加这个值如 64会使球体更平滑但顶点数会呈平方增长影响性能。对于远处的星球可以适当降低分段数以优化性能。材质选择MeshBasicMaterial基础材质不受光照影响纹理是什么颜色就显示什么颜色。适合太阳自发光体或背景星体。MeshPhongMaterial冯氏材质能对光源产生镜面高光适合表现水、金属、光滑岩石等有光泽的表面。通过specular和shininess控制高光。MeshLambertMaterial朗伯材质仅计算漫反射无高光适合表现石灰、泥土等粗糙表面。性能通常比MeshPhongMaterial稍好。4.2 创建太阳与行星现在我们用上面的函数来创建太阳和八大行星。这里需要为每个星球寻找合适的纹理图片JPG或PNG格式你可以从 NASA 官网、纹理分享网站或一些开源天文项目中获取。// 创建太阳 (使用基本材质因为它自身是光源) const sun createPlanet(5, ./textures/sun.jpg, { rotationSpeed: 0.001 }); sun.name Sun; scene.add(sun); // 创建水星 const mercuryOrbit new THREE.Object3D(); // 公转容器 const mercury createPlanet(0.4, ./textures/mercury.jpg, { rotationSpeed: 0.004, specular: 0x222222, shininess: 5 }); mercury.name Mercury; mercury.position.x 10; // 轨道半径 mercuryOrbit.add(mercury); scene.add(mercuryOrbit); mercuryOrbit.userData.orbitSpeed 0.04; // 公转速度 // 创建金星 const venusOrbit new THREE.Object3D(); const venus createPlanet(0.9, ./textures/venus.jpg, { rotationSpeed: -0.002, // 金星自转方向相反 specular: 0x111111, shininess: 10 }); venus.name Venus; venus.position.x 15; venusOrbit.add(venus); scene.add(venusOrbit); venusOrbit.userData.orbitSpeed 0.015; // 创建地球和月球演示层级结构 const earthOrbit new THREE.Object3D(); const earth createPlanet(1, ./textures/earth.jpg, { rotationSpeed: 0.005, specular: 0x111111, shininess: 20 }); earth.name Earth; earth.position.x 20; earthOrbit.add(earth); scene.add(earthOrbit); earthOrbit.userData.orbitSpeed 0.01; // 为地球添加月球 const moonOrbit new THREE.Object3D(); // 月球绕地球公转的容器 const moon createPlanet(0.27, ./textures/moon.jpg, { rotationSpeed: 0.001 }); moon.name Moon; moon.position.x 3; // 月球到地球的距离 earth.add(moonOrbit); // 月球容器作为地球的子对象 moonOrbit.add(moon); moonOrbit.userData.orbitSpeed 0.05; // 以此类推创建火星、木星、土星、天王星、海王星... // 注意轨道半径、行星大小、自转和公转速度都需要按比例调整使其在视觉上相对合理。重要提示纹理路径‘./textures/xxx.jpg’需要根据你的实际文件存放位置进行调整。如果纹理加载失败星球会显示为黑色。浏览器的开发者工具“网络(Network)”标签页是排查纹理加载问题的第一站。5. 光照与背景的营造5.1 为场景添加光源没有光三维场景就是一片漆黑。我们的太阳系需要一个主光源来模拟太阳光并可以添加一些环境光来柔化阴影。// 1. 添加环境光 - 提供基础照明避免完全黑暗的阴影 const ambientLight new THREE.AmbientLight(0x333333); // 颜色较暗的环境光 scene.add(ambientLight); // 2. 添加平行光模拟太阳光 - 这是主要光源产生清晰的阴影和明暗对比 const sunLight new THREE.DirectionalLight(0xffffff, 1.0); // 颜色强度 sunLight.position.set(50, 50, 50); // 将光源放在远处模拟平行光 sunLight.castShadow true; // 启用阴影投射 // 优化阴影质量性能开销较大可根据需要调整 sunLight.shadow.mapSize.width 2048; sunLight.shadow.mapSize.height 2048; sunLight.shadow.camera.near 0.5; sunLight.shadow.camera.far 500; sunLight.shadow.camera.left -100; sunLight.shadow.camera.right 100; sunLight.shadow.camera.top 100; sunLight.shadow.camera.bottom -100; scene.add(sunLight); // 3. 可选添加点光源在太阳位置模拟太阳的自发光效果 const sunPointLight new THREE.PointLight(0xffaa33, 1.5, 100); // 颜色强度衰减距离 sun.add(sunPointLight); // 将点光源作为太阳的子对象这样它会随太阳一起移动光源选择解析环境光(AmbientLight)均匀地照亮场景中的所有物体没有方向也不会产生阴影。它用来确保没有直接被主光源照到的地方不至于一片死黑。平行光(DirectionalLight)模拟无限远处的光源如太阳所有光线都是平行的。它会产生方向性很强的阴影是模拟日光的首选。点光源(PointLight)从一个点向所有方向发射光线像灯泡一样。我们把它放在太阳上是为了让太阳本身看起来在发光并微微照亮附近的星球增加真实感。阴影启用阴影 (castShadow和receiveShadow) 会显著增加性能开销。在太阳系这种大尺度场景中星球间的投影并不明显可以考虑关闭以提升帧率。如果开启务必调整shadow.mapSize阴影贴图分辨率和shadow.camera阴影渲染范围来平衡质量和性能。5.2 创建星空背景深邃的星空背景能极大增强宇宙的沉浸感。最简单有效的方法是使用一个巨大的、内壁贴有星空纹理的球体天空盒或将星空作为背景图。方法一使用全景纹理等距柱状投影图作为场景背景const backgroundLoader new THREE.TextureLoader(); backgroundLoader.load(./textures/starry_sky.jpg, function(texture) { scene.background texture; // 直接将纹理设置为场景背景 });这种方法最简单性能最好但缺乏立体感。方法二使用立方体贴图天空盒更真实这需要六张图片上下左右前后。Three.js 提供了CubeTextureLoader。const cubeTextureLoader new THREE.CubeTextureLoader(); cubeTextureLoader.setPath(./textures/skybox/); const cubeTexture cubeTextureLoader.load([ px.jpg, nx.jpg, // 右左 py.jpg, ny.jpg, // 上下 pz.jpg, nz.jpg // 前后 ]); scene.background cubeTexture;天空盒能提供真正的三维环境感当相机旋转时背景也会随之变化体验更佳。6. 动画循环与交互控制6.1 实现自转与公转的动画循环动画的核心是requestAnimationFrame循环。在这个循环中我们更新每个星球及其轨道的旋转状态。// 将需要动画的对象收集到数组中便于管理 const planets [sun]; const orbits [mercuryOrbit, venusOrbit, earthOrbit, moonOrbit]; // 将所有轨道容器加入 function animate() { requestAnimationFrame(animate); // 循环调用自身 // 1. 更新每个星球的自转 planets.forEach(planet { if (planet.userData.rotationSpeed) { planet.rotation.y planet.userData.rotationSpeed; } }); // 2. 更新每个轨道的公转即容器绕Y轴旋转 orbits.forEach(orbit { if (orbit.userData.orbitSpeed) { orbit.rotation.y orbit.userData.orbitSpeed; } }); // 3. 可选更新相机或其它动态元素 // 例如让相机缓慢环绕场景 // camera.position.x Math.sin(Date.now() * 0.0001) * 50; // camera.position.z Math.cos(Date.now() * 0.0001) * 50; // camera.lookAt(scene.position); // 4. 渲染场景 renderer.render(scene, camera); } // 启动动画循环 animate();关键点planet.rotation.y是绕物体自身 Y 轴的旋转实现自转。orbit.rotation.y是绕轨道容器自身 Y 轴的旋转。由于行星 Mesh 是容器的子对象且被设置在容器的 X 轴正方向上因此容器的旋转就带动了行星绕场景原点太阳位置的公转。速度值如0.002,0.04是每帧增加的角度弧度制。你可以根据真实行星的相对速度比例来调整这些值或者纯粹为了视觉效果而调整。6.2 添加交互控制轨道控制器一个静态的太阳系观赏性有限。我们需要让用户能够用鼠标拖拽旋转视角、滚轮缩放。Three.js 的扩展库OrbitControls正是为此而生。首先需要在 HTML 中引入该控件script srchttps://cdn.jsdelivr.net/npm/three0.128.0/examples/js/controls/OrbitControls.js/script然后在 JS 中初始化// 在创建 camera 和 renderer 之后 const controls new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 启用阻尼惯性效果操作更顺滑 controls.dampingFactor 0.05; controls.screenSpacePanning false; // 平移模式false时沿场景平面平移 controls.minDistance 10; // 最小缩放距离 controls.maxDistance 300; // 最大缩放距离 controls.maxPolarAngle Math.PI; // 最大垂直旋转角度防止相机翻转到模型下方 // 在 animate 函数中需要更新控制器 function animate() { requestAnimationFrame(animate); controls.update(); // 必须在渲染前更新控制器状态 // ... 原有的自转公转更新逻辑 renderer.render(scene, camera); }启用阻尼 (enableDamping) 后必须在动画循环中调用controls.update()。OrbitControls极大地提升了用户体验让你可以自由探索自己创建的太阳系。7. 性能优化与高级效果探索7.1 性能优化要点当星球数量增多比如加入小行星带或者纹理分辨率很高时性能可能成为问题。纹理压缩与尺寸确保使用的纹理图片尺寸合理例如 1024x1024 或 2048x2048过大的纹理会占用大量显存。可以使用工具对纹理进行压缩。几何体细节如前所述减少SphereGeometry的分段数特别是对于远处的小行星。实例化网格(InstancedMesh)如果你要渲染成千上万颗形状相同但位置/旋转不同的小行星例如小行星带使用THREE.InstancedMesh可以极大提升性能。它通过一次绘制调用渲染多个相同几何体和材质的实例。细节层次(LOD)对于远近不同的星球可以使用不同精度的模型。Three.js 提供了THREE.LOD对象可以根据物体与相机的距离切换不同细节级别的几何体。渲染循环优化只在场景实际需要更新时才进行渲染。如果场景是静态的仅相机在动可以利用OrbitControls的change事件来触发渲染。7.2 添加高级视觉效果基础太阳系完成后可以尝试添加一些特效让场景更炫酷。辉光效果(Glow/Bloom)让太阳发出光芒。这通常需要用到后期处理通道。Three.js 的EffectComposer结合UnrealBloomPass可以实现漂亮的泛光效果。粒子系统(Particle System)用于模拟遥远的恒星背景、星云或行星的星环如土星环。使用THREE.Points和THREE.PointsMaterial可以高效渲染大量粒子。自定义着色器(Shader)如果你想实现更复杂的星球大气效果、极光或动态的太阳表面就需要编写自定义的着色器材质。这是 three.js 的高级话题但能带来质的飞跃。8. 常见问题与调试技巧在开发过程中你肯定会遇到各种问题。这里记录一些典型问题和排查思路。问题1页面一片漆黑什么也看不见。检查1打开浏览器开发者工具F12查看“控制台(Console)”是否有 JS 报错如THREE is not defined说明 three.js 库未正确加载。检查2查看“网络(Network)”标签页确认纹理图片是否成功加载状态码应为 200。红色表示失败通常是路径错误。检查3确认相机位置 (camera.position) 是否在场景范围内且镜头对准了场景物体 (camera.lookAt)。可以先将相机位置设为(0,0,50)并看向原点(0,0,0)。检查4确认场景中是否有光源。没有光默认材质是黑色的。可以先添加一个简单的AmbientLight。问题2星球不转动。检查1确认animate函数被正确调用并且requestAnimationFrame循环在运行。可以在animate函数开头加一句console.log(animating)来测试。检查2确认你是在更新星球网格的rotation属性而不是其他属性。检查3检查userData.rotationSpeed是否被正确赋值且值不为 0。问题3公转轨道不正确行星乱飞。检查1确认你使用了“容器”模式。行星 Mesh 应该作为轨道Object3D的子对象并且其初始位置应设置在容器的 X 轴正方向或其他固定方向。检查2确保你是在更新轨道容器 (orbit.rotation.y) 的旋转而不是行星自身的旋转。检查3检查行星到容器的距离即轨道半径是否设置合理。如果距离为0行星就会在太阳中心旋转。问题4画面卡顿帧率很低。检查1打开浏览器的性能监视器通常在开发者工具的“性能(Performance)”或“内存(Memory)”标签页。查看帧率(FPS)和内存使用情况。检查2降低纹理分辨率或几何体分段数。检查3如果开启了阴影尝试关闭 (castShadow false) 或降低shadow.mapSize如从 2048 降到 1024。检查4检查是否在每一帧都创建了新的对象例如在animate函数中new THREE.Vector3()这会导致垃圾回收频繁触发。应尽量复用对象。调试小技巧添加辅助坐标系scene.add(new THREE.AxesHelper(10));这会在场景原点添加一个红绿蓝三色坐标轴帮你理解物体方位。添加光源辅助scene.add(new THREE.DirectionalLightHelper(sunLight, 5));可以显示平行光的方向和位置。控制台查看对象在animate函数中暂停使用debugger语句或浏览器断点然后在控制台输入scene.children或直接输入某个网格变量名如earth可以查看其完整的属性、位置、旋转信息非常有用。构建这个三维太阳系的过程就像一次微型的游戏开发或数据可视化项目。从搭建环境、创建物体、处理材质灯光到实现动画和交互每一步都踩在 three.js 的核心概念上。当你最终看到自己创建的星球在深邃的太空中缓缓旋转时那种成就感是看教程无法比拟的。最关键的是这套方法论可以迁移到任何其他三维 Web 项目中去无论是产品展示、建筑漫游还是交互式图表。本文还有配套的精品资源点击获取