用 Three.js 制作 3D 行星：在浏览器中体验球体、光照与旋转速度

关于本文
本文采用利用生成式 AI 的自动生成流程制作。通过虚构的数据和浏览器操作，学习 Three.js 的用途、机制以及失败时的观察要点。不会访问实际的服务或个人信息。

验证状态： 在 2026-10-30 的现有评审中，确认了固定提交的 JavaScript 和 Node.js 语法检查已成功通过。浏览器的 WebGL 渲染、CDN 分发及 GitHub Pages 上的操作尚未经过验证。预期结果并非实际测量得出。

为什么尝试这项技术

当你想在网站上放置具有深度的展示而非平面图像时，3D 引擎会改变屏幕本身的构建方式。例如在科学馆的展示或产品的旋转预览中，从不同角度展示同一个物体，往往比并排摆放十张静态图片更能让人理解其形状。然而，使用 3D 展示并不是目的本身。在决定用什么展示之前，必须先明确希望用户理解什么，并判断它是否比平面图像带来更多收益。本次的惑星模型并非旨在强调天文学上的准确性，而是关于坐标、相机和渲染的教材。

制作动态示例时，不能止步于“看到它动了”这一表象，而需要区分“哪个输入改变了哪个变量，哪段处理更新了绘制”。在本教程中，我们会把这种变化在界面上明确显示出来。在将其应用到实际服务中时，请另外设计认证和保存的处理。

首先尝试：实时演示与预期结果

• Daily Code 教程的源码和 README

• GitHub Pages 实时演示（未在实际浏览器中确认运行状态）

首先显示图形，将滑块移至最左端的 0 以停止旋转。然后将其调至 1.5，观察细线位置的变化情况。注意即使改变速度，球体的大小或视点距离也不会突然发生变化。如果在尝试前打开 Chrome 或 Edge 的开发者工具中的 Console 和 Network，就可以区分 WebGL 是否可用以及模块获取是否失败。如果屏幕一片空白且状态未更新，则可能是加载 JavaScript 的阶段失败了。

操作前确认事项：无法打开公开演示时的本地步骤

公开演示的 URL 为公开且未确认运行状态。如果无法打开，请在 GitHub 中打开固定提交的HTML 主体和JavaScript 主体，分别通过 Raw 显示，以index.html和app.js的名字保存到同一个新建文件夹中。仅保存 README 是无法让画面动起来的。

1. 在可以使用 Python 3 的电脑上，打开能够看到保存的这两个文件的文件夹，并将该文件夹作为工作目录启动终端。在 Windows 上，可以在资源管理器的文件夹地址栏中输入powershell来启动。

2. 如果是 Windowspy -3 -m http.server 8000 --bind 127.0.0.1、Linux/macOS的话则运行python3 -m http.server 8000 --bind 127.0.0.1。这用于本地HTTP分发，并非用于确认执行结果的操作。如果没有Python，请选择官方资料中的本地服务器方式。

3. 在同一台PC的浏览器中打开http://127.0.0.1:8000/。初始文字显示为READY: JavaScriptを読み込み中，当脚本初始化进展到该阶段时，RUNNING: 3Dを表示的设计。仅凭显示RUNNING并不能证明WebGL渲染成功或画面显示正常。请实际用肉眼确认球体的线条与运动，并检查Console和Network。

4. 将滑块设为0时旋转角的更新量为零，设为1.5时则会增加。调整回数值进行对比，若要结束，请在启动服务器的终端中按下Ctrl+C。

file://如果直接用打开HTML，由于浏览器的安全限制，ES模块的加载可能会失败。此外，即便通过本地服务器打开，Three.js本身也是从第三方CDN获取的，因此依赖于网络连接或机构的网络限制。本教程中没有将实际文件或输入值发送给CDN的处理，但获取库的网络通信仍然会发生

。

flowchart LR
    A["入力やクリック"] --> B["イベントを受ける"]
    B --> C["Three.js のAPI"]
    C --> D["状態と描画を更新"]
    D --> E["見た目と文字で確認"]

机制总览图

该图是用于学习的概念图，并未表示浏览器内部实现或网络通信的细节。无论是什么库，追踪“操作会传达到哪个变量”这一点都是相通的。

它是如何运作的：解读API

场景是汇总3D空间中出场人物的容器，相机是观察者的位置，网格则是形状与表面材质的组合。SphereGeometry从顶点构建球体，MeshStandardMaterial则决定对光照做出反应的外观。仅将物体添加到scene中并不会更新画面。通过renderer.render将从相机视角看到的结果绘制到canvas上。如果只是在每一帧中给旋转角度加上一个固定的增量，旋转速度就会随PC的渲染速度而改变。因此，这里采用了利用上一帧至今所过秒数的设计。最小代码解读

const scene = new THREE.Scene();
const geometry = new THREE.SphereGeometry(1, 32, 24);
const material = new THREE.MeshStandardMaterial({ color: 0x48bcb7 });
const planet = new THREE.Mesh(geometry, material);
scene.add(planet);

上述内容是提取出的 API 要点片段，并非可直接复制并独立运行的完整文件。要运行所需的 HTML 和整套实现，请在 Daily Code 侧的 README / 演示文件中确认。去追踪哪个函数选择了 HTML 元素、哪一行更新了数值，并用已知的虚拟值进行测试。

只修改一个条件进行比较

实际的app.js的new THREE.MeshStandardMaterial({color:0x48bcb7,wireframe:true})在wireframe:true把wireframe:false更改为时，以轮廓线为主的显示就会变成面片填充。前者能让人更容易看清三角形网格，但若要表现表面质感，则后者更合适。如果改变附近光源的放置位置，阴影出现的位置也会随之改变。另一方面，增加光源并不意味着球体的 3D 坐标会发生移动。区分开“模型位置”、“材质”、“光”和“相机”是相互独立的，这一点也有助于调试复杂的 3D 应用。

比较的步骤是：记录初始值，仅更改一个地方，然后确认结果是否出现在预期的部位。如果一次性修改多个输入，就会让人分不清究竟是哪个产生了影响。请连同恢复到修改前状态的操作一起进行验证。

遇到故障时该检查哪里

在 WebGL 被禁用的环境、设备内存较少的环境，或者企业网络不允许访问 CDN 的环境中，可能会出现无法运行的情况。此外，当缩小窗口时，如果只缩放 canvas 但相机的宽高比没有更新，画面就会变形。在实际应用版本中，请准备好 resize 处理和像素密度的上限。如果持续大量创建新的 Geometry 或 Material，会消耗 GPU 端的资源，因此在它们不再需要时进行 dispose（销毁）也很重要。

浏览器内部的错误和公网 Web 服务器的故障是两回事。前者通过开发者工具中的错误信息排查，后者通过 HTTP 响应或资源分发条件进行调查。切勿将未知的失败表述为成功，这是提升技术笔记可信度的关键。

在业务与学习中的应用

可应用于设备外观确认、展示、产品的旋转预览以及立体布局的教学材料中。若要将其用作正式设计图或尺寸保证的替代方案，则必须对缩放比例、单位、相机投影、色彩管理以及不同设备的渲染质量进行单独验证。在制作资料时，建议仅将“通过触摸可加深理解的信息”做成 3D，而简单的表格或说明则保留在 HTML 中，这样更适合屏幕朗读、打印和检索。

引入前需确定的事项

面向读者发布时，需确定显示的数据来源、谁拥有修改权限、保留在屏幕上的信息类型以及更新库时的确认事项。本次演示既没有登录也没有服务器保存。因此，在添加运维功能之前，建议首先区分“按预期显示的最小核心部分”与“需要实际业务可靠性、权限控制和备份的部分”。由于第三方 CDN 涉及外部通信，因此必须提前确认企业网络是否允许使用。

与其他方式进行对比

库是按需选择的工具。应将想要达成的目标与学习成本进行综合比较。在小规模页面中，不把“引入库”作为目的，会更容易进行维护。

GitHub 示例

• Daily-Code-Samples：Three.js 教程

• 实时演示（未在实际浏览器中验证运行情况）

博客正文负责背景与思路，Daily Code 负责供执行与改造的代码，两者分工明确。不包含用于向外部服务发帖或保存的 API。

官方信息与一手资料

• Three.js 官方文档

• Three.js 官方：MeshStandardMaterial 的 wireframe 设置

• MDN：本地测试服务器的必要性

• API 与参考资料

• MDN：JavaScript

资料确认范围： 于 2026-10-30 重新确认了 Three.js 官方的引入与材质设置以及 MDN 的本地服务器资料。这并不保证链接地址的未来变动或所有 CDN 资源的响应。

验证范围补充

Daily Code 固定提交中的 JavaScript 静态语法检查已通过确认，但未确认各浏览器中的渲染效果以及外部 CDN 的实际响应。实际尝试时，请利用正文中的本地服务器步骤以及通过 Console 和 Network 进行确认。