🎨 Three.js 材质·光照
深度解析
📚 30章 完整目录
1
材质系统概述
材质概念 · 渲染关系 · 基础/标准/物理分类
2
基础材质 MeshBasicMaterial
color, map, wireframe · 不受光照 · UI/天空盒
3
标准材质 MeshStandardMaterial
PBR原理 · roughness/metalness/envMap
4
物理材质 MeshPhysicalMaterial
clearcoat, sheen, transmission · 真实感渲染
5
深度材质 & 法线材质
MeshDepthMaterial · MeshNormalMaterial · 调试辅助
6
材质纹理基础
纹理概念 · TextureLoader · 纹理坐标与映射
7
纹理类型与应用
漫反射/法线/粗糙度/金属度/自发光贴图
8
纹理采样与包裹
Repeat/Offset/Rotation · Nearest/Linear采样
9
纹理格式与优化
KTX2/DDS压缩 · 纹理尺寸 · Mipmap
10
材质属性动画
requestAnimationFrame · 颜色/透明度/纹理偏移
11
光照系统概述
环境光/方向光/点光源/聚光灯 · 模型区别
12
环境光 AmbientLight
均匀照明 · 无方向 · 基础照明
13
方向光 DirectionalLight
模拟太阳 · 平行光线 · 阴影投射
14
点光源 PointLight
点发光 · 衰减 distance/decay · 适用场景
15
聚光灯 SpotLight
锥形光束 · angle/penumbra · 阴影优化
16
半球光 HemisphereLight
天空/地面环境光 · skyColor/groundColor
17
矩形区域光 RectAreaLight
窗户/灯箱模拟 · 仅物理材质 · 性能开销
18
光晕与镜头光晕
Lensflare · 光晕实现 · 性能考量
19
阴影系统
Shadow Map原理 · 启用阴影 · 质量与性能
20
阴影优化技巧
阴影相机裁剪 · 贴图尺寸 · PCF/VSM
21
多光源场景管理
光源数量性能 · 衰减范围 · 辅助对象
22
材质与光照交互
不同材质光照响应 · 金属度/粗糙度影响高光
23
环境贴图 Environment Map
CubeTextureLoader · 反射/折射 · HDR
24
自定义着色器 ShaderMaterial
Vertex/FragmentShader · uniforms传递
25
RawShaderMaterial 区别
内置uniforms/attributes · 更底层控制
26
材质混合模式
Normal/Additive/Subtractive/Multiply · 透明渲染
27
材质渲染顺序
renderOrder · depthTest/depthWrite · 透明物体
28
性能优化
材质复用 · 纹理图集 · LOD与材质简化
29
调试工具
Three.js Inspector · Spector.js · Chrome DevTools
30
综合实战
珠宝展示/室内场景 · 多种材质与光照