ABAB Pedia
词条广场

Three.js

概述

Three.js 是由 Ricardo CabelloRicardo CabelloRicardo Cabello，公开使用 Mr.doob、mrdoob 等名称，是图形程序员、网页交互创作者和开源 JavaScript 三维图形库 Three.js 的创建者。他的工作横跨演示艺术、浏览器实验、互动音乐项目和图形工具开发；Three.js 将场景、相机、几何体、材质等功能整理为可复用的接口，是其持续维护的代表项目。点击查看完整词条（Mr.doob）于 2010 年公开发布、由开源社区共同开发的 JavaScript 三维图形库。它为网页中的三维场景提供相机、几何体、材质、纹理、灯光和渲染等抽象，减少开发者直接编写底层图形接口代码的负担。项目以 MIT 许可证发布，官网为 threejs.org，核心代码库为 mrdoob/three.js。⁠[1][2][3]

Three.js 的主体是软件库和围绕它形成的开放项目。其现代渲染体系包括 WebGLRenderer，以及能够使用 WebGPU、必要时回退到 WebGL2 的 WebGPURenderer；SVG、CSS3D 等用途通过附加渲染器提供。不同后端的能力和适用范围并不完全相同。⁠[1][4]

本页目录17 节
词条资料

2010年4月24日首个公开版本

Three.js 的首个公开版本提交记录为 2010 年 4 月 24 日，提交者为 Mr.doob。首批文件已经包含场景、网格、几何体，以及 Canvas、SVG 渲染相关代码。GitHub 仓库建立时间与这一公开版本提交不是同一事件，项目起点宜采用具有明确提交说明的公开记录。⁠[2]

Cabello 在 2013 年采访中解释，代码源于此前的 ActionScript 引擎。他希望图形功能能够跨项目积累和复用，而不是沿用每做一部演示便重新制作引擎的方式。库的设计因此突出易用、可扩展的接口，并承认接口演变会给旧应用带来迁移成本。⁠[5]

2010年早期互动网站与 WebGL 扩展

2010 年的互动音乐项目 The Wilderness Downtown 是 Three.js 的早期应用。创建者在 2015 年回顾中指出，库承担了飞鸟及全景场景中的树木等元素，作品其他部分还使用单独的 Canvas 实现。该案例展示了三维库嵌入综合网页体验的方式。⁠[6][7]

同一回顾把早期 WebGL 渲染器的推进归于贡献者 alteredqualia，并展示了随后出现的灯光、反射、折射及模型加载等效果。早期 Three.js 的发展因此既有创建者的基础设计，也依赖社区把同一场景接口扩展到不同渲染方式。⁠[7]

2011年ROME 推动动画能力

2011 年 5 月的 ROME / 3 Dreams of Black 进一步使用 Three.js。Cabello 在五周年回顾中说，团队为项目中的动物变化等视觉需求扩展动画与变形功能；其同年采访亦介绍了开放代码和 Blender、Python 等工具参与的制作流程。⁠[6][7][8]

2012年10月CSS3DRenderer

2012 年 10 月 28 日的创建者文章介绍了 CSS3DRenderer 的开发背景：在当时 iOS 的图形支持条件下，利用 CSS 三维变换呈现全景和元素周期表。实现把网页元素置入三维排列，并配合触摸友好的 TrackballControls，说明 Three.js 的场景组织能力并不只服务 WebGL。⁠[9]

2015年五周年回顾与可视化编辑器

FITC 于 2015 年 4 月发布的五周年演讲总结了渲染后端、文档、动画与社区贡献的发展。Cabello 展示了可在浏览器中导入模型、组织场景并导出的编辑器，希望让设计者也能参与制作。这一方向使库之外出现了辅助创作工具，但库本身仍负责可组合的图形能力。⁠[7]

演讲还讨论了更贴近 GPU 数据形式的 BufferGeometry 整理，以及 Cardboard、设备方向控制和当时实验性 WebVR 的探索。这些内容属于 2015 年的技术阶段，不能直接作为当代浏览器或 XR 支持状况的说明。⁠[7]

2023年4月r152 调整默认色彩管理

GitHub 于 2023 年 4 月 28 日发布的 r152 记录包含一组影响画面输出的变化：默认启用 ColorManagement，以 colorSpace 替代纹理 encoding，以 outputColorSpace 替代 renderer.outputEncoding，并默认输出 sRGB。升级旧项目时，颜色变亮、变暗或纹理色彩异常可能与这些配置变化有关，需要依据版本迁移说明检查，而不能只更新包文件。⁠[10]

2024年3月r163 移除 WebGL 1 支持

2024 年 3 月 29 日的 r163 发布记录明确移除了 WebGLRenderer 对 WebGL 1 的支持，并清理了示例中的相关代码。此后使用这一渲染器的现代版本需要 WebGL2；早年介绍中笼统的 WebGL 兼容范围不能无条件套用到新版本。该版本也增加 Scene.environmentIntensity，并调整 stencil 等默认行为。⁠[11]

2024年公开讨论 WebGPU 转型

JSConf JP 2024 的 Mr.doob 演讲以 Three.js 从 WebGL 转向 WebGPU 为主题。主办方说明聚焦性能与灵活性的新机会、迁移中的挑战，以及为着色器定制开发的模块化语言；创建者的个人年表把该演讲列于 2024 年 11 月。⁠[12][6]

2026年6月至7月r185 公告与 Release 记录

官方 X 账号在 2026 年 6 月 25 日宣布 r185 发布并链接到更新日志；GitHub 的对应 Release 元数据则记录于 7 月 1 日发布。截至 2026 年 9 月 6 日核查，GitHub latest release 接口返回的版本仍为 r185。公告日期与仓库 Release 记录日期分别保留，不将二者时间差推断为延期或版本故障。⁠[13][14]

r185 记录的功能包括 WebGPURenderer 的 WebXR 支持、Forward+ 分簇光照，以及材质反序列化接口等扩展；同时修复了几何体属性数量不一致、WebGL 上下文恢复后的帧缓冲状态、纹理释放和多项渲染问题。更新日志逐项标注贡献者，体现出版本由多人共同完成。⁠[14]

这一版本还停止把 examples/fonts 打入 npm 包，并清理若干弃用代码。示例、附加组件和依赖文件的分发方式也是迁移检查的一部分，不能仅凭核心渲染 API 仍可调用就判断升级完全兼容。⁠[14]

截至2026年9月：场景与渲染模型

Three.js 应用以场景、相机和渲染器的组合为基础：场景组织要显示的对象，相机定义观察视角和可见范围，渲染器据此生成画面。场景图按父子关系组织对象，子对象的变换相对父对象计算，因此移动一组对象时可以保留其内部位置关系。⁠[15]

网格把几何体与材质组合起来。几何体提供顶点等形状数据，材质描述表面如何绘制，并可引用纹理；多个网格可以共享几何体或材质。相机设置决定视场、宽高比和近远裁剪范围，动画循环则在连续帧中更新对象并触发渲染。⁠[15][16]

截至2026年9月：模型资源与扩展

模型加载通过相应格式的加载器完成，许多加载器属于需要单独导入的 addons。官方工作流优先介绍 glTF 和 GLB，因为该格式面向运行时资源交付，可携带网格、材质、纹理、骨骼、变形目标、动画、灯光和相机；也提供 FBX、OBJ、COLLADA 等格式的加载路径。⁠[17]

库降低了绘制三维内容的门槛，但资源正确托管、模型格式、贴图配置和场景组织仍影响结果。官方排错流程建议同时检查控制台、加载错误、模型在其他查看器中的表现，以及资源导出选项，以区分文件问题和渲染设置问题。⁠[17]

截至2026年9月：WebGPU、节点材质与 TSL

WebGPURenderer 默认使用 WebGPU，并可在不支持 WebGPU 的设备上回退到 WebGL2。其节点材质系统与 Three.js Shading Language（TSL）允许用 JavaScript 形式组织着色逻辑，再按后端生成 WGSL 或 GLSL；后处理也采用节点组合，并支持多渲染目标。⁠[4]

迁移不是简单替换渲染器名称：官方说明列明，旧有 ShaderMaterial、RawShaderMaterial、onBeforeCompile 自定义方式和 EffectComposer 后处理链不能直接照搬，需要转成节点材质与 TSL。WebGPU 初始化为异步过程，应用也须确保初始化完成后再开始相关渲染。⁠[4]

截至2026年9月：成熟度与性能边界

截至核查时，官方文档仍将 WebGPURenderer 标为实验性，指出部分场景可能缺少功能，或使用 WebGLRenderer 反而性能更好。WebGLRenderer 仍被维护，并是纯 WebGL2 应用的推荐选择；项目的新功能重点则转向 WebGPURenderer。不能据此宣称 WebGL 后端已经停用，或 WebGPU 在所有场景都更快。⁠[4]

资源生命周期也是使用边界。官方说明几何体、材质和纹理等 GPU 资源需要适时调用 dispose；从场景中移除对象并不自动等同于释放全部关联资源。应用若持续切换模型或累积高分辨率纹理，仍须自行管理资源占用。⁠[18]

截至2026年9月：React 生态及协作

React Three Fiber 是围绕 Three.js 形成的独立生态项目，由 Poimandres 的代码库维护。它将 Three.js 对象表达为 React 组件，使场景可以随组件状态和交互更新；其 README 另列 Drei、glTF 转 JSX、后处理、XR 和物理集成等工具。这些项目扩展了使用方式，不能与 Three.js 核心库或创建者个人作品混为一体。⁠[19]

Three.js 官方代码库提供文档、示例、编辑器和社区入口，发布记录保留具体贡献者署名。创建者的历史角色与社区维护角色应并列理解；官方 X 账号 @threejs 则用于发布版本消息并分享相关网页作品。⁠[1][14][20]

截至2026年9月：许可与安全维护

Three.js 使用 MIT 许可证，允许在保留版权及许可声明的条件下使用、复制、修改、合并、发布、分发、再许可和销售软件副本。许可同时规定软件按现状提供，不作相应担保。库的开放许可不自动覆盖应用另行使用的模型、音乐、字体或其他第三方素材。⁠[3]

项目安全政策要求将漏洞私下报告给维护方，并提供影响与复现信息，避免修复前公开细节。维护方说明项目由志愿者按合理努力原则维护，请求在公开披露前给予 90 天修复时间。这是维护流程的说明，不构成固定修复期限或不存在漏洞的保证。⁠[21]

来源

  1. Three.js 官方代码库与 README（在新窗口打开）
  2. Three.js 首个公开版本提交（在新窗口打开）
  3. Three.js MIT License（在新窗口打开）
  4. WebGPURenderer（在新窗口打开）
  5. Interview with three.js Creator（在新窗口打开）
  6. Ricardo Cabello：个人作品与演讲年表（在新窗口打开）
  7. Ricardo Cabello (Mr doob) — 5 years of three.js（在新窗口打开）
  8. Interview with Mr Doob（在新窗口打开）
  9. CSS3DRenderer：原 2012 年 Google+ 文章存档（在新窗口打开）
  10. Three.js r152 release（在新窗口打开）
  11. Three.js r163 release（在新窗口打开）
  12. Moving Three.js from WebGL to WebGPU — Mr.doob（在新窗口打开）
  13. Three.js：r185 发布公告（在新窗口打开）
  14. Three.js r185 release（在新窗口打开）
  15. Three.js Fundamentals（在新窗口打开）
  16. Creating a scene（在新窗口打开）
  17. Loading 3D Models（在新窗口打开）
  18. Cleanup（在新窗口打开）
  19. React Three Fiber README（在新窗口打开）
  20. Three.js 的公开 X 资料（在新窗口打开）
  21. Three.js Security Policy（在新窗口打开）