概述

Three.js是一个将 WebGL（以及现在的 WebGPU）封装为易于使用的场景图 API 的JavaScript 库。核心思想很简单：你描述要显示什么——物体、灯光、相机——而渲染器负责如何在 GPU 上绘制。

架构非常直观：Scene（场景）包含 Object3D（3D 对象），Camera（相机）定义视角，Renderer（渲染器）每帧绘制所有内容。

01 - 架构概览

Three.js 完整架构图

每个 Three.js 场景都遵循相同的模式：

1.创建Scene（场景）

2.添加Mesh（网格）对象（几何体 + 材质）

3.定位Camera（相机）

4.将所有内容交给Renderer（渲染器），由它向 GPU 发送绘制调用

渲染循环通过requestAnimationFrame以 60fps 运行。

理解这个流程是学习本指南其他所有内容的基础。着色器、后期处理、物理引擎——都建立在这个核心循环之上。

核心概念：

●Scene|Camera|Renderer|Mesh|BufferGeometry|Material|Object3D|requestAnimationFrame

●●●javascript// 最简 Three.js 场景 constscene = new THREE.Scene(); constcamera = new THREE.PerspectiveCamera(75, width/height,0.1,1000); constrenderer = new THREE.WebGLRenderer({ antialias:true});

renderer.setAnimationLoop(() => renderer.render(scene, camera));

02 - 几何体（Geometry）

Three.js 几何体类型

几何体定义了 3D 对象的形状——构成其表面的顶点、边和面。底层一切都是BufferGeometry：直接发送到 GPU 的顶点数据平面类型数组（位置、法线、UV、颜色、索引）。

Three.js 内置了21 种几何体构造器，外加从零创建或从文件加载的工具。

21 种内置几何体类型

基础几何体：

●BoxGeometry- 立方体

●SphereGeometry- 球体

●CylinderGeometry- 圆柱体

●ConeGeometry- 圆锥体

●TorusGeometry- 圆环体

●TorusKnotGeometry- 环形结（通过 p 和 q 缠绕参数创建复杂结状形状）

●PlaneGeometry- 平面

●CircleGeometry- 圆形

●RingGeometry- 环形

●CapsuleGeometry- 胶囊体

参数化几何体：

●LatheGeometry- 车削几何体（旋转轮廓创建）

●TubeGeometry- 管道几何体（沿曲线创建）

●ExtrudeGeometry- 挤压几何体

●ShapeGeometry- 形状几何体

多面体：

●IcosahedronGeometry- 二十面体

●DodecahedronGeometry- 十二面体

●OctahedronGeometry- 八面体

●TetrahedronGeometry- 四面体

●PolyhedronGeometry- 自定义多面体

辅助几何体：

●EdgesGeometry- 边线几何体

●WireframeGeometry- 线框几何体

所有几何体都有widthSegments/heightSegments参数来控制多边形密度。分段越多 = 形状越平滑但顶点数越高。

●●●javascript// 创建带细节级别的几何体 constgeo = new THREE.SphereGeometry(radius, widthSegs, heightSegs); constknot = new THREE.TorusKnotGeometry(10,3,100,16, p, q);

03 - 材质（Materials）

Three.js 材质

材质控制几何体渲染时的外观——颜色、光泽度、透明度，以及对光照的反应。Three.js 为各种用例和性能预算提供了材质：从最简单的平面MeshBasicMaterial（无光照）到完整的物理级MeshPhysicalMaterial（带清漆、光泽、彩虹色、透射和次表面散射）。

材质类型详解

材质	说明	适用场景
MeshBasicMaterial	无光照计算，始终显示平面颜色或纹理	UI、线框、非光照风格化物体
MeshLambertMaterial	仅漫反射光照（无高光），逐顶点计算	哑光表面、风格化场景
MeshPhongMaterial	添加高光（Blinn-Phong 模型）	经典 3D 外观，比 PBR 更快
MeshStandardMaterial	基于物理的渲染（PBR），金属度/粗糙度工作流	标准 PBR 材质
MeshPhysicalMaterial	扩展 Standard，带清漆、光泽、透射等	最逼真的材质（玻璃等）
MeshToonMaterial	卡通风格渐变着色	动漫风格
MeshNormalMaterial	显示法线颜色	调试法线
MeshDepthMaterial	显示深度	后期处理、深度效果
MeshMatcapMaterial	材质捕捉	快速预览
ShaderMaterial	自定义着色器	完全自定义效果

标准 PBR 材质

●●●javascript// 标准 PBR 材质 constmat = new THREE.MeshStandardMaterial({  color: 0xff6600,  roughness:0.3,   // 0=镜面，1=完全漫反射  metalness:0.8,   // 0=非金属，1=金属  normalMap: normalTex,  envMapIntensity:1.5 }); // 物理材质（玻璃） constglass = new THREE.MeshPhysicalMaterial({  transmission:1,  // 透射  thickness:0.5,   // 厚度  roughness:0,  ior:1.5      // 折射率 });

04 - 灯光（Lighting）

Three.js 灯光系统

灯光让 3D 场景感觉真实。精心布置的灯光传达深度、重量、材质类型和氛围。Three.js 提供7 种灯光类型——从消除 harsh 阴影的环境填充光，到投射戏剧性阴影的精确聚光灯。

只有DirectionalLight、SpotLight和PointLight能投射阴影；每种都使用阴影贴图技术（从灯光视角渲染场景以确定遮挡）。

7 种灯光类型

环境光：

●AmbientLight- 均匀添加平面颜色到每个表面，无方向、无阴影、无高光。用作基础填充以防止完全黑色的阴影。

方向光：

●DirectionalLight- 无限平行光线，像太阳。所有阴影都是平行的。位置设置方向；target 设置指向。户外主光。

点光源：

●PointLight- 从一点向所有方向辐射，像灯泡。有distance和decay控制衰减。向 6 个方向投射阴影（较耗性能）。

聚光灯：

●SpotLight- 锥形光束，像手电筒或舞台灯。angle设置锥宽，penumbra柔化边缘。戏剧性照明。

半球光：

●HemisphereLight- 天空色从上，地面色从下。模拟户外环境光。无阴影，非常轻量。

矩形区域光：

●RectAreaLight- 柔和的矩形光源（荧光灯管或窗户）。仅适用于 MeshStandardMaterial 和 MeshPhysicalMaterial。

光探针：

●LightProbe- 将球谐函数（SH）编码的环境光照。低频环境光照，平滑、轻量。

三点布光示例

●●●javascript// 三点布光设置 constkey = new THREE.DirectionalLight(0xffffff,2);

key.castShadow =true;

key.shadow.mapSize.set(2048,2048); constfill = new THREE.HemisphereLight(0x8888ff, 0x443322,0.5); constrim = new THREE.PointLight(0x00ffff,1,50);

05 - 场景对象（Scene Objects）

Three.js 场景对象

场景中的所有东西都是Object3D——提供位置、旋转、缩放、可见性和父子层级的基类。从基本的Mesh到 GPU 实例化的InstancedMesh（单次绘制调用绘制 10 万个副本），每种对象类型都用于解决特定的渲染挑战。

对象类型

对象	说明
Mesh	基础 3D 对象：几何体 + 材质
InstancedMesh	单次 GPU 绘制调用渲染 N 份相同几何体+材质。通过setMatrixAt(i, matrix)设置每个实例的变换。10 万棵树渲染速度与一棵树相同
BatchedMesh(r159+)	类似 InstancedMesh，但允许同一次绘制调用中使用不同几何体
SkinnedMesh	由 Skeleton（骨骼层级）变形的网格。用于角色动画
Points	将每个顶点渲染为屏幕对齐的点/精灵。用于粒子系统
Line / LineSegments / LineLoop	绘制线条基元
Sprite	始终面向相机的公告板
Group	空的 Object3D，用作父容器
LOD	根据相机距离自动切换高/中/低模版本

06 - 相机（Cameras）

透视相机视野

PerspectiveCamera（透视相机）

最常用的相机。四个参数：

●fov- 垂直视野角度

●aspect- 画布宽高比

●near- 最近可见距离

●far- 最远可见距离

视野角度效果：

●FOV 30°- 长焦/狙击镜效果。透视扁平，物体看起来距离很近

●FOV 75°- 标准 FPS 游戏感觉。自然透视，良好深度

●FOV 120°- 超广角，强鱼眼效果。能看到大量场景但边缘有明显畸变

●●●javascriptconstcamera = new THREE.PerspectiveCamera(  fov,   // 视野角度（垂直）  aspect, // 画布宽度 / 高度  near,  // 近裁剪面（如 0.1）  far   // 远裁剪面（如 1000） );

正交相机

OrthographicCamera（正交相机）

无透视。相同大小的物体无论距离相机多远都保持相同大小。

适用场景：等轴策略游戏、俯视 2D 游戏、CAD/工程视图、方向光的阴影贴图。

参数：left,right,top,bottom,near,far—— 定义一个盒形视锥体。

立方体相机

CubeCamera（立方体相机）

将场景渲染 6 次（±X, ±Y, ±Z 面）到 WebGLCubeRenderTarget，生成环境立方体贴图纹理。

用途：实时反射、环境映射。

●●●javascriptconstcubeRT = new THREE.WebGLCubeRenderTarget(256); constcubeCamera = new THREE.CubeCamera(0.1,100, cubeRT);

sphere.material.envMap = cubeRT.texture; // 用作反射

数组相机

ArrayCamera（数组相机）

子相机数组，每个定义一个视口区域（x, y, width, height 归一化 0-1 坐标）。

用途：分屏多人游戏、监控摄像头监视器 UI、同时从多个视角渲染同一场景。

立体相机

StereoCamera（立体相机）

两个相机相隔眼间距（eyeSep参数，默认 0.064 米）。并排渲染左右眼视图。

用途：VR 头显、红青立体 3D。

07 - 纹理（Textures）

纹理基础与 UV 映射

纹理基础与 UV 映射

每个顶点都有一个 UV 坐标（0-1 范围），将其映射到 2D 纹理中的位置。UV 0,0 是左下角，1,1 是右上角。

使用texture.repeat平铺，texture.offset偏移，texture.wrapS/T控制边缘重复方式（ClampToEdge, Repeat, MirroredRepeat）。

●●●javascriptconsttex = new THREE.TextureLoader().load('wood.jpg');

tex.repeat.set(4,4);

tex.wrapS = tex.wrapT = THREE.RepeatWrapping;

法线贴图

法线贴图（Normal Maps）

RGB 图像，每个像素编码一个表面法线方向。光照模型使用这些假法线来模拟凹凸、划痕、织物纹理和细节——无需添加单个多边形。

PBR 纹理集

PBR 纹理集

完整的基于物理的渲染纹理集，用于 MeshStandardMaterial：

●Albedo（反照率）- 基础颜色，无光照

●Normal（法线）- 表面细节方向

●Roughness（粗糙度）- 反射模糊程度，0=镜面，1=完全哑光

●Metalness（金属度）- 是否为金属，0=非金属，1=金属

●AO（环境光遮蔽）- 接触阴影

●可选：Emissive（自发光）、Displacement（置换）、Opacity（透明度）

立方体贴图天空盒

CubeTexture - 天空盒与环境

6 张图像（±X, ±Y, ±Z）组装成立方体贴图。

●●●javascriptscene.background = cubeTexture;   // 天空盒 scene.environment = cubeTexture;  // IBL 基于图像的照明

 

视频纹理

VideoTexture - 实时视频

将播放中的 HTML元素实时映射到 3D 表面。每帧更新以匹配视频播放。

用途：游戏内电视、屏幕、传送门、投影仪和视频墙。

数据纹理

DataTexture - 程序化纹理

直接从 JavaScript 的类型化数组创建纹理——无需图像文件。传递Uint8Array或Float32Array的像素值。

用途：热力图、高度图、科学数据可视化、GPU 计算纹理。

HDR 环境

HDR / EXR 环境贴图

高动态范围图像存储远高于 1.0 的光值，捕捉从深阴影到明亮阳光的完整范围。

使用 RGBELoader 加载 .hdr（RGBE 格式）或使用 EXRLoader 加载 .exr，然后传递给 PMREMGenerator 进行 PBR 渲染预过滤。

压缩纹理

压缩纹理 - KTX2 / Basis

GPU 原生压缩格式在显存中保持压缩状态——比 PNG 节省 4-8 倍内存。KTX2 配合 Basis 超压缩是现代标准。

关键：移动端性能优化。

08 - 渲染器特性（Renderer Features）

阴影类型

阴影贴图类型

●BasicShadowMap- 最快，硬边

●PCFShadowMap- 百分比渐近过滤，更平滑的边缘

●PCFSoftShadowMap- 带核模糊的更柔和 PCF

●VSMShadowMap- 方差阴影贴图，非常柔和，无 peter-panning 伪影

●●●javascriptrenderer.shadowMap.type = THREE.PCFSoftShadowMap;

 

环境映射与 IBL

环境映射与 IBL

设置scene.environment = pmremTexture可同时为所有 PBR 材质启用基于图像的照明。金属物体反射环境，粗糙物体接收漫反射 IBL。

色调映射

色调映射（Tone Mapping）

HDR 渲染产生高于 1.0 的光值。色调映射将完整的 HDR 范围压缩到 0-1 的显示范围。

●NoToneMapping- 裁剪

●ReinhardToneMapping- 摄影风格

●ACESFilmicToneMapping- 电影 S 曲线外观（最受欢迎）

●AgXToneMapping(r158+) - 物理准确，正确保色

抗锯齿

抗锯齿

内置 MSAA：向 WebGLRenderer 传递antialias: true。

后期处理选项：FXAA（快速，轻微模糊）、SMAA（更好质量，双通道）、TAA（时域 AA）——通过在多帧累积子像素采样提供最高质量。

渲染目标

渲染目标 - 离屏渲染

WebGLRenderTarget 将渲染输出重定向到纹理而非屏幕。该纹理可应用于 3D 表面（显示另一台相机的电视）、用作后期处理输入，或读回 CPU。

WebGL vs WebGPU

WebGL vs WebGPU

特性	WebGL	WebGPU
基础	OpenGL ES 2.0/3.0	现代显式 GPU API
浏览器支持	~98%	~70%（2024）
计算着色器	不支持	支持
多线程	有限	更好
驱动开销	较高	较低

Three.js 在相同 API 后封装两者——使用import WebGPURenderer from 'three/webgpu'切换。

计算着色器

计算着色器（仅 WebGPU）

在图形管线外运行的 GPU 程序。模拟数百万粒子、流体动力学、布料或人群——完全在 GPU 上。

通过 WebGPURenderer 配合 TSL 的compute()函数使用。

渲染管线

渲染管线 - 逐帧

场景图 → 视锥剔除 → 按材质排序渲染列表（不透明优先，透明在后，按 z 深度）→ 设置渲染状态 → GPU：顶点着色器（将位置变换到裁剪空间）→ 光栅化（将三角形转换为片段）→ 片段着色器（计算像素颜色）→ 帧缓冲 → 屏幕。

09 - 后期处理效果（Post-Processing Effects）

EffectComposer

EffectComposer - 后期处理管线

RenderPass 将场景渲染到纹理。每个后续通道从前一个通道的纹理读取，应用效果，写入下一个。OutputPass 或 RenderPixelatedPass 写入屏幕。

●●●javascriptconstcomposer = newEffectComposer(renderer);

composer.addPass(newRenderPass(scene, camera));

composer.addPass(newUnrealBloomPass(resolution, strength, radius, threshold));

composer.addPass(newOutputPass());

 

泛光效果

Bloom / 泛光效果

明亮区域向周围像素渗出发光，模拟强烈光线使相机镜头或眼睛过载的方式。

参数：threshold（泛光最小亮度）、strength（强度）、radius（扩散距离）。

SSAO

SSAO - 屏幕空间环境光遮蔽

使凹处变暗——缝隙、角落、表面接触处——模拟环境光被遮挡。

完全从屏幕空间的深度缓冲计算，因此轻量且无需光线追踪。

景深

景深（散景）

焦平面外的物体以特征性的圆形散景模糊，模仿真实相机镜头的浅景深。

参数：focus（焦距）、aperture（模糊量）、maxblur（最大模糊限制）。

胶片颗粒

胶片颗粒与噪点

为每个像素添加时变噪点，模拟摄影胶片颗粒或传感器噪点。柔化 CGI 过于干净的外观，增添电影感。

故障效果

故障效果

数字损坏：随机水平带位移、RGB 通道分离、噪点块。

适用风格：赛博朋克、恐怖、黑客/错误 UI 时刻、科幻过渡。

轮廓线

轮廓线 - 选择高亮

OutlinePass 用彩色边缘发光渲染选中物体。

用途：游戏选择 UI、悬停高亮、强调可交互物体。

色彩分级

色彩分级 / LUT

3D 查找表（LUT）重新映射整个帧的输出颜色——就像 Instagram 滤镜，但是用于 3D 场景。

变换任何场景：温暖的电影橙青色、寒冷的恐怖蓝色、复古棕褐色、压碎的黑部。

运动模糊

运动模糊

沿轨迹模糊快速移动的物体，就像真实相机快门在曝光期间会捕捉到的那样。

体积光

体积光 - 光束

当明亮光源被部分遮挡时可见的光束——阳光穿过云层、灯光穿过雾。

色差

色差

在屏幕空间中以略微不同的量偏移 R、G 和 B 颜色通道，在高对比度边缘创建色彩边缘。

适用风格：低保真、复古、恐怖和蒸汽波美学。

像素复古效果

像素/复古效果

以低分辨率（如 320×240）渲染场景，然后用最近邻过滤放大。结果看起来像旧电子游戏——块状像素、可见的色带。

10 - 控制器（Controls）

控制器将用户输入（鼠标、键盘、触摸、手柄）转换为相机或物体移动。

轨道控制器

OrbitControls - 围绕目标旋转相机

3D 模型查看器和产品配置器的默认选择。左键拖动旋转，右键拖动平移，滚轮缩放。

第一人称控制器

FirstPersonControls - WASD + 鼠标查看

WASD 在场景中移动，鼠标移动旋转视角。

飞行控制器

FlyControls - 6 自由度

完整的 6DOF 飞行——前后移动、左右平移、上升/下降、偏航、俯仰、翻滚。

用途：太空游戏、无人机模拟器。

地图控制器

MapControls - 俯视地图

OrbitControls 的变体，针对俯视地图导航优化。右键拖动旋转，左键拖动平移地面平面，滚轮缩放。

用途：策略游戏、GIS 应用、城市规划。

变换控制器

TransformControls - 3D 物体操纵器

附加到任何 Object3D 以显示操纵器控件——箭头平移、环旋转、手柄缩放。

用途：任何浏览器内 3D 编辑器或关卡编辑器。

指针锁定控制器

PointerLockControls - FPS 相机

锁定并隐藏鼠标光标（浏览器 Pointer Lock API）。所有鼠标增量移动直接旋转相机——无可见光标，无屏幕边缘限制。

用途：第一人称游戏的标准。

11 - 节点系统 / TSL - Three 着色语言

TSL 概念

什么是 TSL？

TSL 是 Three.js 完全用 JavaScript 编写的着色器创作系统。不写 GLSL 字符串，而是从函数节点组合着色器图——color()、texture()、add()、normalMap()、noise()——TSL 自动编译为 WebGL 的 GLSL 或 WebGPU 的 WGSL。

●●●javascriptimport{ color, texture, mix, uv, time }from'three/tsl'; constmat = newMeshStandardNodeMaterial();

mat.colorNode =mix(color(0xff0000),color(0x0000ff),sin(time));

 

噪点函数

噪点函数

TSL 包含多个 GPU 噪点函数：

●mx_noise_float()- Perlin 风格平滑噪点

●mx_worley_noise()- 蜂窝/Voronoi 图案

●checker()- 棋盘格

●mx_fractal_noise()- fBm（分形布朗运动）

TSL 数学运算

TSL 中的数学运算

所有标准着色器数学函数都可作为 TSL 节点使用：

add()、sub()、mul()、div()、mix()、clamp()、smoothstep()、pow()、abs()、sin()、cos()、floor()、fract()、length()、dot()、cross()、normalize()

菲涅尔效果

菲涅尔 / 边缘光照

菲涅尔效果：表面在掠射角（球体边缘与中心）变得更具反射性。水、玻璃、车漆、皮肤都表现出这种效果。

在 TSL 中：fresnel()在中心输出 0（面向相机），在边缘输出 1。

顶点置换

顶点置换

将 TSL 表达式赋值给material.positionNode以在顶点着色器中移动顶点。动画地形高度图、正弦函数海洋波浪、角色呼吸效果——全部在 GPU 上零 CPU 开销。

三平面映射

三平面映射

同时从 X、Y 和 Z 轴投影纹理，并根据表面法线混合它们。结果：任何形状都能正确纹理化，无需 UV 展开。

用途：地形、洞穴、有机形状。

PBR 节点分解

PBR 节点分解

TSL 纹理节点如何连接到完整 PBR 材质：

●texture(albedoMap)→colorNode

●normalMap(normalTex)→normalNode

●texture(roughTex).r→roughnessNode

●texture(metalTex).b→metalnessNode

GPGPU

GPGPU - GPU 粒子模拟

使用compute()节点（仅 WebGPU）在 GPU 上完全模拟数百万粒子。每个粒子的位置和速度存储在存储缓冲中。

程序化着色器

程序化着色器

纯粹从数学生成每个像素——无纹理、无文件、无加载时间。棋盘格、渐变、极坐标、曼德勃罗集、Voronoi、等离子体、正弦波图案。

自定义着色器

自定义着色器 - 完全创意控制

将任何 TSL 表达式赋值给任何材质属性。以任何想象的方式组合噪点、数学、时间、UV 坐标和纹理采样。

12 - 动画（Animation）

关键帧与轨道

关键帧与轨道

KeyframeTrack 存储属性名称（.position[x]）、时间数组（秒）和值数组。多个轨道形成 AnimationClip。

行走循环

行走循环

约 8 个关键姿势，时间设置使最后一帧流畅回到第一帧。混合器循环播放片段，角色无限行走。

混合与交叉淡化

混合与交叉淡化

AnimationMixer 通过weight属性混合多个同时进行的动作。action.crossFadeTo(otherAction, duration)在持续时间内平滑地将权重从一个片段过渡到另一个。

变形目标

变形目标 - 混合形状

预烘焙的顶点位置存储在几何体中。mesh.morphTargetInfluences[i] = 0..1在基础几何体和目标形状之间混合。

用途：面部表情、唇形同步、平滑形状变换。

骨骼动画

骨骼动画 - 骨骼绑定

Skeleton 是 Bone 对象（Object3Ds）的层级。SkinnedMesh 中的每个顶点受 1-4 根骨骼影响，带有混合权重。移动/旋转骨骼，网格跟随。

叠加动画

叠加动画

叠加层将其增量值添加到基础姿势上，而非替换它。

●●●javascriptaction.blendMode = THREE.AdditiveAnimationBlendMode;

呼吸、头部注视、退缩反应和面部情绪都可以是叠加在移动上的独立叠加层。

动画曲线

动画曲线 - 插值

关键帧之间的值变化方式：

●InterpolateLinear- 直线，机械感

●InterpolateSmooth- 三次 Catmull-Rom，自然

●InterpolateDiscrete- 即时步进，干脆

AnimationMixer 概念

AnimationMixer 概念

每个动画对象一个混合器。mixer.clipAction(clip)返回 AnimationAction。设置action.play()、action.weight（混合量）、action.timeScale（速度）。在渲染循环中每帧调用mixer.update(delta)。

13 - 音频（Audio）

空间音频

空间音频 - 3D 定位

AudioListener 在相机上 = 玩家的耳朵。PositionalAudio 在 3D 对象上 = 世界中的声源。Web Audio PannerNode 自动计算音量、左右声道平移和多普勒频移。

音频衰减

音频衰减 - 距离曲线

●rolloffFactor- 控制音量下降速度

●distanceModel：

○linear- 均匀下降到 maxDistance

○inverse- 每 doubling 距离减半（物理正确）

○exponential- 急剧下降

●refDistance- 衰减开始距离

●maxDistance- 音量归零距离

AudioAnalyser

AudioAnalyser - 频率可视化

包装 Web Audio 的 AnalyserNode。每帧调用analyser.getFrequencyData()—— 返回从低音到高音的 FFT 频率区间 Uint8Array。

用途：音乐反应视觉效果。

音频锥

音频锥 - 定向声音

PositionalAudio 通过内/外锥角支持方向性。

●coneInnerAngle- 全音量区域

●coneOuterAngle- 过渡区域

●coneOuterGain- 外锥及以外音量

14 - 特殊对象与效果

水面

水面 - 海洋表面

动画水面使用两张以不同速度和角度滚动的法线贴图纹理，形成复杂的波浪图案。反射天空，折射下方场景，响应sunDirection产生阳光闪烁。

天空

天空 - 程序化 Preetham 模型

基于物理的天空着色器（Preetham 1999 大气散射模型）。参数：

●turbidity- 雾霾

●rayleigh- 蓝天散射

●mieCoefficient/mieDirectionalG- 太阳光晕大小

●sunPosition- 太阳位置

无需纹理——纯实时方程实现完整的黎明到黄昏循环。

反射器

反射器 - 实时镜子

从反射相机视角将场景渲染到纹理，然后将该纹理应用到反射平面——实时镜子。

镜头光晕

镜头光晕

沿明亮光源到屏幕中心轴线添加六边形光圈光晕效果——模仿相机镜头。

CSS3D

CSS3DObject - 3D 中的 HTML 元素

CSS3DRenderer 在与 WebGL 场景完美对齐的 DOM 层上叠加。CSS3DObject 包装任何 HTML 元素（包括实时 iframe、视频、交互式 UI）并将其定位在 3D 空间中。

实例化

实例化 - 一次绘制调用，10 万个对象

InstancedMesh 在单次 GPU 绘制调用中渲染 N 份相同几何体+材质。每个实例有自己的 4×4 变换矩阵（位置、旋转、缩放）和可选的每实例颜色。

LOD

LOD - 细节层次

LOD.addLevel(mesh, distance)- 最近级别显示完整细节；随着相机距离增加，自动切换到更低多边形版本。

粒子

精灵粒子 - 点系统

Points 几何体 + PointsMaterial 将每个顶点渲染为屏幕对齐的公告板。

射线投射器

Raycaster - 鼠标拾取与交互

从相机通过鼠标指针向场景投射数学射线。

●●●javascriptraycaster.setFromCamera(pointer, camera);

raycaster.intersectObjects(meshArray);

返回所有命中物体，按距离排序，每个都包含精确的命中点、法线、UV 和面索引。

裁剪平面

裁剪平面 - 横截面

丢弃数学平面一侧的所有片段（Plane：法线 + 常数）。

●renderer.clippingPlanes- 全局裁剪

●material.clippingPlanes- 每材质裁剪

15 - 加载器（Loaders）

GLTF 加载器

GLTFLoader - 标准 3D 格式

●.gltf（JSON + 独立 .bin + 图像）

●.glb（单二进制包）

支持：PBR 材质、骨骼动画、变形目标、多网格/场景、灯光、相机、自定义扩展。

网络传输的正确默认选择。

FBX 加载器

FBXLoader - Autodesk 格式

Autodesk FBX 在来自 Maya、3ds Max、MotionBuilder 和游戏引擎（Unity/Unreal 导出格式）的游戏管线中很常见。

OBJ 加载器

OBJLoader - 通用传统格式

最广泛支持的 3D 格式——几乎每个 3D 应用都能导出 OBJ。

Draco 压缩

Draco 压缩

Google 的开源网格压缩编解码器，以最小视觉损失将几何文件大小减少 50-90%。

HDR 加载器

RGBELoader / EXRLoader - HDR 环境

加载 .hdr（Radiance RGBE 格式）或 .exr（OpenEXR）HDRI 环境贴图——等距柱状全景图，高动态范围。

免费 HDRI 库：Poly Haven、HDRIHaven。

SVG 加载器

SVGLoader - 3D 中的矢量图形

解析 SVG 路径、圆形、矩形和多边形为 Three.js ShapePaths。

16 - 物理（Physics）

刚体物理

刚体物理

有质量的物体，真实下落、弹跳、滑动和碰撞。每个物体有碰撞形状（盒子、球体、凸包、三角网格）、质量（0 = 静态）、摩擦和恢复（弹性）。

模式：world.step(delta)→ 将body.position复制到mesh.position，body.quaternion复制到mesh.quaternion。

推荐物理引擎：

●Rapier（Rust/WASM，最快，确定性）

●cannon-es（纯 JS，简单）

●Ammo.js（Bullet 移植，功能完整）

●Jolt（游戏品质）

布料模拟

布料模拟

由拉伸、剪切和弯曲弹簧约束连接的粒子网格。固定一些粒子（如顶角），让重力拉动其余部分。

载具物理

载具物理

射线投射载具模型：带四个射线投射"轮子"的底盘刚体。

约束与布娃娃

约束与布娃娃

约束以限制连接两个刚体：

●Hinge- 铰链（门、轮子）

●Slider- 滑块（活塞）

●Lock- 锁定（焊接）

●Point-to-point- 点对点（链球链）

●Cone-twist- 圆锥扭转（带角度限制的肩关节）

17 - 辅助工具与调试

网格与坐标轴辅助

GridHelper + AxesHelper

GridHelper 在 Y=0 绘制平面网格——立即在 3D 空间中定位。AxesHelper 将 XYZ 轴绘制为红（X）、绿（Y）、蓝（Z）线条。

这两个是任何新项目首先要添加的东西。

相机辅助

CameraHelper - 可视化视锥

将任何相机的线框视锥渲染为场景中的线条。

关键：调试阴影相机时——你能准确看到灯光"看到"的内容。

灯光辅助

灯光辅助

●DirectionalLightHelper：箭头 + 目标线

●PointLightHelper：灯光位置的线框球体

●SpotLightHelper：锥形

●HemisphereLightHelper：两个颜色编码的半球

●RectAreaLightHelper：轮廓矩形

骨骼辅助

SkeletonHelper - 骨骼可视化

将 SkinnedMesh 的骨骼层级渲染为彩色线段，显示每根骨骼的位置和长度。

18 - 曲线、形状与额外功能

贝塞尔曲线

贝塞尔曲线

●QuadraticBezierCurve3（起点、控制点、终点）

●CubicBezierCurve3（起点、控制点1、控制点2、终点）

使用不经过的控制点定义平滑曲线。

CatmullRom 样条

CatmullRom 样条 - 相机路径

与贝塞尔曲线不同，CatmullRomCurve3 经过所有控制点。

用途：电影式相机飞掠——放置一系列航点，在 t 从 0→1 时采样curve.getPointAt(t)。

形状与挤压

Shape + ExtrudeGeometry

用 Shape 定义 2D 轮廓（moveTo、lineTo、bezierCurveTo、arc、hole用于镂空）。

●ShapeGeometry- 平面 2D

●ExtrudeGeometry- 带depth和bevelSize参数的 3D 深度

PMREMGenerator

PMREMGenerator - 预过滤环境贴图

将原始环境（HDRI 或立方体贴图）预过滤为预过滤 mipmapped 辐射环境贴图（PMREM）。

●●●javascriptconstpmrem = new THREE.PMREMGenerator(renderer); constenvMap = pmrem.fromEquirectangular(hdrTexture).texture;

scene.environment = envMap;

19 - 数学库

Three.js 数学库

Three.js 包含完整的 3D 数学库。这些类在引擎和代码中无处不在——设置位置、组合旋转、计算变换、构建射线查询。

核心数学类

类	说明
Vector2/3/4	2D/3D/4D 向量。操作：add、sub、multiply、divide、dot、cross、length、normalize、lerp、clone
Quaternion	无万向节锁的旋转。setFromEuler、setFromAxisAngle、slerp（平滑旋转插值）
Euler	人类可读的旋转角度（X、Y、Z 弧度 + 顺序）
Matrix3/4	3×3 和 4×4 变换矩阵。每个 Object3D 有matrix（局部）和matrixWorld（世界空间）
Color	RGB + HSL 颜色。setHex、setHSL、lerp、convertLinearToSRGB
Box3, Sphere	包围体积。box.setFromObject(mesh)计算紧密的轴对齐边界
Ray, Plane, Frustum, Triangle, Line3	用于相交测试、裁剪和空间查询的几何基元
MathUtils	lerp、clamp、mapLinear、degToRad、radToDeg、smoothstep、randFloat、seededRandom、UUID

参考链接

●[Three.js 官网]https://threejs.org/

●[官方文档]https://threejs.org/docs/

●[官方示例]https://threejs.org/examples/

●[GitHub 源码]https://github.com/mrdoob/three.js

●[原文链接]https://neuralpixelgames.github.io/threejs-visual-guide/