上一篇文章对 Three.js 库进行了简单的介绍，Three.js 之所以能成为 Web 3D 可视化领域的主流开发框架，核心在于其模块化、高封装、易拓展的API设计体系。它屏蔽了原生 WebGL 复杂的底层着色器、矩阵运算、缓冲区渲染逻辑，以面向对象的方式提供了一套简洁、规范、可落地的三维开发接口，让前端开发者无需深耕图形学底层，即可快速搭建沉浸式 3D 场景。能否看懂、复用、改造官方源码，是区分“只会跑入门 Demo”和“能写企业级数字孪生、3D 可视化项目”工程师的核心分水岭。
从本章节开始，将系统性梳理 Three.js 高频核心 API, 从基础概念、常用参数、使用场景到实战注意事项逐一拆解。整体可归纳为场景、相机、渲染器、几何体、材质、灯光、物体、动画交互八大核心模块，各模块各司其职、相互配合，构成 Web 3D 渲染的完整闭环。
一、官方示例使用指南
1. 在线示例地址
https://threejs.org/examples/
2. 覆盖核心业务场景
官方示例覆盖绝大多数 Web3D 开发需求，无需重复找第三方Demo：
- 视角控制：轨道旋转、地图平移、第一人称漫游
- 模型加载：GLB/GLTF/FBX 模型、Draco 压缩模型解析
- 材质渲染：金属、透明、法线、自发光、渐变材质
- 后期特效：辉光、景深、模型描边、雾化、胶片滤镜
- 交互能力：射线拾取、模型悬浮、拖拽交互
- 动画体系：骨骼动画、帧动画、混合动画
- 高性能渲染：WebGPU 并行计算、大场景优化方案
3. 使用指南
3.在线文档地址
https://threejs.org/docs/
二、官方代码仓库
Three.js 唯一官方开源仓库，由创始人 mrdoob 主导、全球社区长期维护，工业级稳定、持续迭代：
https://github.com/mrdoob/three.js
1. 核心目录结构
精简业务高频用到的核心目录：
three.js
├── build/ # 编译产物（项目安装依赖的核心文件）
│ ├── three.js # 完整的项目源码（代码完整、未压缩、可调式、变量名完整）
│ ├── three.min.js # UMD 压缩版
│ ├── three.module.js # ES Module 标准模块（官方现代标准，目前官方主推版本）
├── docs/ # 官方 API 文档源码
| ├── index.html # 直接可以本地运行的官方文档
├── editor/ # 官方可视化 3D 编辑器
│ ├── index.html # 编辑器的启动页
├── examples/ # 官方示例 + 官方扩展库（开发核心宝库）
│ ├── jsm/ # ESModule 模块化扩展（工程化项目专用）
│ ├── js/ # 旧版全局扩展（废弃，不推荐使用）
│ ├── models/ # 项目中的全部模型地址
│ └── .html # 可直接运行的完整功能 Demo
├── files/ # 官方图标、字体资源
├── src/ # 框架底层核心源码
├── test/ # 项目测试用例代码
└── utils/ # 模型压缩、项目构建工具脚本
2. 本地离线调试
克隆仓库到本地，启动服务离线修改、调试所有示例。
git clone https://github.com/mrdoob/three.js.git
cd three.js
npm install
npm start
启动后访问 http://localhost:8080/examples/ 即可使用全套离线示例
3. 关键目录功能解析
- build 编译产物：日常
npm install three安装的依赖，本质就是读取该目录文件。three.module.js适配 Vite/Webpack/Vue/React 工程化项目，three.js用于传统浏览器全局引入。 - src 源码目录：包含场景、相机、渲染器、几何体、材质、灯光等所有核心底层实现，适合进阶学习原理，日常业务开发无需修改。
- examples 示例目录：Three.js 真正的生态核心，囊括 95% 以上的企业 3D 业务场景，是高级功能开发的唯一权威参考。
