首页 / three.js / 教程
社区精选资源
先看结论
three.js 的官方示例比多数第三方教程更完整,很多问题在示例源码里已经有标准答案。 这一页把官方示例、手册、生态项目与问答入口整理成索引,只给链接和一句话说明,不复制正文。 查资料的顺序建议是:先看官方示例有没有同类效果,再读手册补概念,最后才去论坛搜具体报错。
先看哪一类
| 当前的处境 | 直接去哪 | 为什么 |
|---|---|---|
| 想找"某个效果怎么做" | 官方示例画廊 | 每个效果都有可运行的源码,参数可改 |
| 概念不清,比如矩阵、光照、材质 | 官方手册 | 手册讲原理与用法,不逐条列 API |
| 英文读得慢 | 官方中文手册 | 官方维护的翻译,术语与英文版对应 |
| 升级后材质变暗、颜色不对 | Migration Guide | 色彩空间与光照相关的变更有逐版本记录 |
| 要在三维场景里加载 3D Tiles | 3DTilesRendererJS | 成熟的三维瓦片加载方案,省去自己写调度 |
官方仓库与示例
- threejs.org:官网首页,给出版本、下载与文档入口。解决的问题:确认当前发布版本与引入方式,避免用到已下线的 CDN 路径。
- 官方示例画廊:数百个可运行示例,覆盖材质、光照、后处理、着色器、物理与加载器。解决的问题:需要现成的效果实现时,先在这里找同类场景,直接看源码。
- API 文档:按类组织的接口参考。解决的问题:查构造参数、属性默认值与方法的准确签名。
- mrdoob/three.js:源码、issue 与发布记录。解决的问题:文档描述不充分时,直接读实现确认行为。
- 仓库 examples 目录:所有示例的源文件,按主题分目录。解决的问题:把示例搬进项目时,能一次看全它引用的资源与依赖。
- examples/jsm 目录:官方扩展模块,含控制器、加载器、后处理与辅助工具。解决的问题:确认某个功能该从哪个模块导入,而不是去第三方仓库找。
- 仓库 src 目录:核心渲染实现。解决的问题:性能异常或渲染顺序问题时,从源码层面确认机制。
- Releases:按版本号发布的记录与变更摘要。解决的问题:定位某特性引入的版本,回退时也有明确目标。
- GitHub Issues:bug 与行为讨论。解决的问题:怀疑是引擎缺陷时,确认是否已有人报过、是否已有绕法。
- 在线编辑器:可视化搭场景、导入模型、调材质并导出场景文件。解决的问题:快速验证模型与材质效果,不用先写代码。
手册与教程
- 官方手册:从场景搭建讲到光照、纹理、阴影与性能,按章节组织。解决的问题:需要系统理解概念,而不是零散记 API。
- 手册 · Fundamentals:第一章,讲清场景、相机、渲染器三者关系。解决的问题:新手最容易搞混的坐标与渲染循环概念。
- 手册 · 中文版:官方维护的中文翻译,章节结构与英文版一致。解决的问题:读英文吃力时,仍能对着官方内容学。
- examples/jsm/loaders 目录:官方加载器集合,涵盖 glTF、OBJ、FBX、PLY 与点云格式。解决的问题:拿到一种模型格式时,先确认官方是否已有现成加载器。
- GLTFLoader 文档:模型加载器的参数、Draco 与 KTX2 解压配置。解决的问题:模型加载报错、贴图丢失、压缩模型无法解析。
- OrbitControls 文档:轨道控制器参数,含阻尼、缩放与旋转限制。解决的问题:交互手感不对、相机穿模或缩放范围失控。
- Migration Guide:逐版本列出改名、移除与语义变更。解决的问题:升级后一片报错时,按版本号定位改动点。
- 官方 Wiki:迁移指南与常见问题的汇总入口。解决的问题:想确认某写法是否已废弃时的第一站。
生态项目与工具
- three(npm):发行包,含 ESM 产物与
examples/jsm路径。解决的问题:确认版本号与子路径导入写法。 - @types/three:社区维护的类型声明。解决的问题:TypeScript 项目里给场景对象与自定义着色器补类型。
- stats.js:轻量 FPS 与渲染耗时面板。解决的问题:判断掉帧是几何量过大、还是每帧重建材质导致。
- 3DTilesRendererJS:在 three.js 中加载与调度 3D Tiles 的渲染器。解决的问题:三维瓦片城市模型接入 three.js 时,不必自己实现 LOD 与请求调度。
- react-three-fiber:用 React 组件描述 three.js 场景。解决的问题:React 项目里管理场景状态,避免手动同步生命周期。
- drei:常用三维辅助组件集合(相机控制、环境、文字、加载器封装)。解决的问题:重复实现常见交互与工具组件。
- three-stdlib:把官方
examples/jsm整理成稳定导入的模块包。解决的问题:官方扩展模块路径变动导致导入失效。 - postprocessing:后处理效果库,含抗锯齿、泛光、景深等组合。解决的问题:官方 EffectComposer 在复杂效果链下性能与顺序问题。
社区问答
- 官方 Discourse 论坛:核心维护者活跃,问题常能拿到直接回复。解决的问题:行为疑问、版本兼容与实现思路的讨论。
- 论坛最新帖:按时间排序的新问题。解决的问题:升级后集中出现的共性问题,往往在这里先被讨论。
- Stack Overflow · three.js 标签:英文问答存量最大。解决的问题:报错信息与基础用法的快速检索。
- r/threejs:偏作品展示与经验交流。解决的问题:效果实现思路、性能取舍这类没有标准答案的问题。
- examples/jsm/controls:官方控制器模块目录(轨道、飞行、第一人称等)。解决的问题:需要换一种相机操作手感时,先看官方已有哪些实现。
注意事项
- 色彩空间与光照的默认行为在 0.152 之后改过,升级后先查 Migration Guide,再调材质参数。
- 每帧重建材质或几何会引发频繁 GC,掉帧时先用 stats.js 区分是渲染量还是对象创建的问题。
- 三维瓦片的数据量远大于普通模型,浏览器端缓存有限,接入 3D Tiles 前先评估内存与显存。
怎么判断一篇教程是否过时
三条线索:版本号是否写明 0.1xx(three.js 用次版本号发布,不写具体数字的文章基本无法判断适用性);
日期是否在近两年内;API 是否已废弃——出现 outputEncoding、sRGBEncoding、
useLegacyLights 这些字段,说明写在 0.152 之前,色彩空间与光照的默认行为已经变了。
版本与发布时间以 npm 的实际数据为准:
npm view three version
npm view three time.modified
npm view three dist-tags
然后对照 Migration Guide:每个版本都列了改名与移除项。文章里的类如果已被移除, 即便示例还能跑(旧版本缓存),也不该再照着写。
用示例画廊交叉验证。把文章里的关键代码放进官方示例的同类页面运行。
能跑且效果一致,说明与 0.160 兼容;出现 material.onBeforeCompile 相关的报错或颜色明显偏暗,
多半是色彩空间与光照配置的旧写法。
经纬志(2026)。《社区精选资源》。https://www.jingweizhi.com/three/tutorial/community-picks.html(访问日期 2026-11-03)。