《Three.js权威指南》核心知识点梳理
第一部分：Three.js 基础与核心概念
1. Three.js 是什么
一个基于WebGL的3D库，简化了在浏览器中创建3D内容的复杂度。
核心价值：提供了高层次的API，无需深入掌握WebGL细节即可开发3D应用。
可以实现：
① 在任何支持WebGL的浏览器中创建和渲染简单的或复杂的3D几何体。
② 在3D场景中移动和动画化对象。
③ 对对象应用纹理和材质。
④ 使用不同的光源照亮场景。
⑤ 使用3D建模软件创建模型并将其导入Three.js应用程序中。
⑥ 给3D场景添加高级的后期处理效果。
⑦ 创建和使用自定义着色器。
⑧ 创建、可视化和动画化点云。
⑨ 创建虚拟现实和增强现实场景。
例如：下图就是使用Three.js实现的示例
（ 访问地址：https://threejs.org/examples/webgl_animation_keyframes.html）
2. 场景图结构
1）Three.js使用场景图来组织所有对象，它是一个树形结构。
2）Scene是根容器，包含了所有需要渲染的对象（网格、光源、相机等）。
3）对象之间的父子关系决定了变换（位置、旋转、缩放）的继承。
3. 四大核心组件
1）场景：THREE.Scene，3D世界的容器。
2）相机：决定观察3D世界的视角。
① 透视相机：THREE.PerspectiveCamera（最常用），模拟人眼视角，有近大远小的效果。
② 正交相机：THREE.OrthographicCamera，物体大小不随距离改变，常用于工程制图或2D游戏。
3）渲染器：THREE.WebGLRenderer，将场景和相机结合，最终绘制到HTML Canvas元素上的引擎。
4）网格：THREE.Mesh，是3D物体的实体，由两部分构成：
① 几何体：Geometry / BufferGeometry，定义了物体的形状（顶点、面）。
② 材质：Material，定义了物体的外观（颜色、光泽、透明度等）。
第二部分：构建3D世界
4. 几何体
1）内置几何体：立方体BoxGeometry、球体SphereGeometry、平面PlaneGeometry等。
2）自定义几何体：通过定义顶点Vertices和面Faces（或使用BufferGeometry直接操作缓冲区）来创建。
3）BufferGeometry：现代Three.js推荐使用的几何体类型，性能更高，以数组缓冲区的方式存储数据。
5. 材质
1）基础材质：THREE.MeshBasicMaterial，不受光照影响。
2）朗伯材质：THREE.MeshLambertMaterial，对光照有反应，适用于漫反射表面（如木头、石头）。
3）冯氏材质：THREE.MeshPhongMaterial，能产生高光反射，适用于光滑表面（如金属、陶瓷）。
4）基于物理的渲染材质：THREE.MeshStandardMaterial / THREE.MeshPhysicalMaterial，效果更真实，是现代项目的首选。
5）材质属性：color（颜色）、map（纹理贴图）、roughness（粗糙度）、metalness（金属度）、normalMap（法线贴图）等。
6. 光照
1）环境光：THREE.AmbientLight，均匀照亮所有物体，无方向性。
2）平行光：THREE.DirectionalLight，模拟太阳光，从无限远处照射。
3）点光源：THREE.PointLight，模拟灯泡，向所有方向发射光线。
4）聚光灯：THREE.SpotLight，模拟舞台聚光灯，呈锥形照射。
5）半球光：THREE.HemisphereLight，模拟户外天空和地面的光照环境。
7. 纹理
1）用于为材质提供表面细节（如木纹、砖墙）。
2）使用THREE.TextureLoader加载图片作为纹理。
3）高级纹理应用：凹凸贴图、法线贴图、环境贴图、光照贴图等。
第三部分：让场景“活”起来
8. 动画循环
1）核心是使用requestAnimationFrame函数创建一个循环。
2）在每一帧中，更新物体属性（如位置、旋转），然后调用renderer.render(scene, camera)重新渲染。
9. 相机控制器
1）用于通过鼠标/触摸来控制相机，实现旋转、缩放、平移。
2）OrbitControls：最常用的控制器，类似于卫星绕行地球。
3）其他控制器：FlyControls， FirstPersonControls等。
10. 加载3D模型
1）Three.js本身不建模，但可以加载外部工具（如Blender）创建的模型。
2）使用加载器：GLTFLoader（推荐，现代且高效）、OBJLoader、FBXLoader等。
3）GLTF格式是用于传输3D场景和模型的“JPEG of 3D”。
11. 动画系统
1）补间动画：使用Tween.js库（需额外引入）在两点之间平滑过渡。
2）骨骼动画：使用AnimationMixer和AnimationClip来处理复杂的、基于骨骼的模型动画（如角色行走）。
12. 性能优化
1）减少绘制调用：使用实例化网格InstancedMesh绘制大量相同几何体的物体。
2）层次细节：使用LOD，根据物体与相机的距离显示不同精度的模型。
3）几何体合并：使用BufferGeometryUtils.mergeBufferGeometries将多个几何体合并为一个，减少资源消耗。
第四部分：实战与扩展
13. 着色器
1）顶点着色器：处理每个顶点的位置。
2）片元着色器：处理每个像素的颜色。
3）使用THREE.ShaderMaterial或THREE.RawShaderMaterial来自定义着色器，实现高级、个性化的视觉效果。
14. 后期处理
1）在场景渲染完成后，再对整个画面进行特效处理。
2）使用EffectComposer，结合各种通道（如RenderPass, BloomPass（辉光）, FilmPass（胶片颗粒））来添加特效。
15. 物理引擎集成
1）为3D世界添加真实的物理效果（碰撞、重力等）。
2）介绍了如何与Ammo.js（Bullet物理引擎的JavaScript端口）等库集成。