ThreeJs 可视化教程-目前最好的3djs指南

每日一题，轻松联系

520人浏览 · 2026-03-18 16:17:38

每日一题，轻松联系 · 2026-03-18 16:17:38 发布

概述

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

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

01 - 架构概览

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

1.创建 Scene（场景）

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

3.定位 Camera（相机）

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

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

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

核心概念：

● 核心组件

模块	功能描述
Scene	三维场景容器
Camera	视图观察视角控制
Renderer	场景渲染器
Mesh	几何体与材质的组合对象
BufferGeometry	高效几何数据结构
Material	表面渲染特性定义
Object3D	基础三维对象类
requestAnimationFrame	动画循环控制器

// 最简 Three.js 场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setAnimationLoop(() => renderer.render(scene, camera));

02 - 几何体（Geometry）

几何体定义了 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参数调节多边形密度。增加分段数可使形状更平滑，但同时会增加顶点数量。

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

03 - 材质（Materials）

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

材质类型详解

好的，这是一个整理好的表格：

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

标准 PBR 材质

// 标准 PBR 材质
const mat = new THREE.MeshStandardMaterial({
  color: 0xff6600,
  roughness: 0.3,      // 0=镜面，1=完全漫反射
  metalness: 0.8,      // 0=非金属，1=金属
  normalMap: normalTex,
  envMapIntensity: 1.5
});

// 物理材质（玻璃）
const glass = new THREE.MeshPhysicalMaterial({
  transmission: 1,     // 透射
  thickness: 0.5,      // 厚度
  roughness: 0,
  ior: 1.5             // 折射率
});

04 - 灯光（Lighting）

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

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

7 种灯光类型

好的，以下是关于不同光源类型的总结信息：

光源类型特性对比

环境光（AmbientLight）
- 特性：均匀添加平面颜色到每个表面
- 效果：无方向、无阴影、无高光
- 用途：基础填充光，防止完全黑色阴影
方向光（DirectionalLight）
- 特性：无限平行光线（模拟太阳光）
- 效果：所有阴影均为平行阴影
- 参数：position 设置方向，target 设置指向
- 用途：户外场景主光源
点光源（PointLight）
- 特性：从单点向全方向辐射（模拟灯泡）
- 参数：distance 控制作用距离，decay 控制衰减
- 限制：需向6个方向投射阴影（性能消耗较大）
聚光灯（SpotLight）
- 特性：锥形光束（模拟手电筒/舞台灯）
- 参数：angle 控制锥角宽度，penumbra 控制边缘柔化
- 用途：戏剧化局部照明
半球光（HemisphereLight）
- 特性：双色渐变（天空色+地面色）
- 效果：模拟户外环境光，无阴影
- 优势：计算轻量
矩形区域光（RectAreaLight）
- 特性：柔和的矩形光源（模拟荧光灯/窗户）
- 限制：仅支持 MeshStandardMaterial 和 MeshPhysicalMaterial
- 用途：物理精确渲染
光探针（LightProbe）
- 原理：球谐函数（SH）编码环境光
- 特性：低频平滑光照
- 优势：轻量级环境光解决方案

注：实际光源效果受材质类型、渲染器设置及场景结构影响，具体实现需结合场景需求调整参数。

三点布光示例

●●●javascript

// 三点布光设置 const key = new THREE.DirectionalLight(0xffffff, 2); key.castShadow = true; key.shadow.mapSize.set(2048, 2048); const fill = new THREE.HemisphereLight(0x8888ff, 0x443322, 0.5); const rim = 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	根据相机距离自动切换高/中/低模版本

07 - 相机（Cameras）

透视相机视野

PerspectiveCamera（透视相机）

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

●fov - 垂直视野角度

●aspect - 画布宽高比

●near - 最近可见距离

●far - 最远可见距离

视野角度效果：

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

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

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

●●●javascript

const camera = 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，生成环境立方体贴图纹理。

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

●●●javascript

const cubeRT = new THREE.WebGLCubeRenderTarget(256); const cubeCamera = 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。

08 - 纹理（Textures）

纹理基础与 UV 映射

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

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

●●●javascript

const tex = new THREE.TextureLoader().load('wood.jpg'); tex.repeat.set(4, 4); tex.wrapS = tex.wrapT = THREE.RepeatWrapping;

法线贴图

法线贴图（Normal Maps）

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

PBR 纹理集

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

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

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

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

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

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

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

立方体贴图天空盒

CubeTexture - 天空盒与环境

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

●●●javascript

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

视频纹理

VideoTexture - 实时视频

将播放中的 HTML <video> 元素实时映射到 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 超压缩是现代标准。

关键：移动端性能优化。

09 - 渲染器特性（Renderer Features）

阴影类型

阴影贴图类型

●BasicShadowMap - 最快，硬边

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

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

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

●●●javascript

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

环境映射与 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	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：顶点着色器（将位置变换到裁剪空间）→ 光栅化（将三角形转换为片段）→ 片段着色器（计算像素颜色）→ 帧缓冲 → 屏幕。

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

EffectComposer

EffectComposer - 后期处理管线

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

●●●javascript

const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); composer.addPass(new UnrealBloomPass(resolution, strength, radius, threshold)); composer.addPass(new OutputPass());

泛光效果

Bloom / 泛光效果

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

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

SSAO

SSAO - 屏幕空间环境光遮蔽

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

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

景深

景深（散景）

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

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

胶片颗粒

胶片颗粒与噪点

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

故障效果

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

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

轮廓线

轮廓线 - 选择高亮

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

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

色彩分级

色彩分级 / LUT

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

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

运动模糊

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

体积光

体积光 - 光束

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

色差

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

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

像素复古效果

像素/复古效果

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

11 - 控制器（Controls）

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

轨道控制器

OrbitControls - 围绕目标旋转相机

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

第一人称控制器

FirstPersonControls - WASD + 鼠标查看

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

飞行控制器

FlyControls - 6 自由度

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

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

地图控制器

MapControls - 俯视地图

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

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

变换控制器

TransformControls - 3D 物体操纵器

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

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

指针锁定控制器

PointerLockControls - FPS 相机

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

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

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

TSL 概念

什么是 TSL？

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

●●●javascript

import { color, texture, mix, uv, time } from 'three/tsl'; const mat = new MeshStandardNodeMaterial(); 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 节点分解

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 坐标和纹理采样。

13 - 动画（Animation）

关键帧与轨道

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

行走循环

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

混合与交叉淡化

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

变形目标

变形目标 - 混合形状

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

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

骨骼动画

骨骼动画 - 骨骼绑定

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

叠加动画

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

●●●javascript

action.blendMode = THREE.AdditiveAnimationBlendMode;

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

动画曲线

动画曲线 - 插值

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

●InterpolateLinear - 直线，机械感

●InterpolateSmooth - 三次 Catmull-Rom，自然

●InterpolateDiscrete - 即时步进，干脆

AnimationMixer 概念

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

14 - 音频（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 - 外锥及以外音量

15 - 特殊对象与效果

水面

水面 - 海洋表面

动画水面使用两张以不同速度和角度滚动的法线贴图纹理，形成复杂的波浪图案。反射天空，折射下方场景，响应 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 - 鼠标拾取与交互

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

●●●javascript

raycaster.setFromCamera(pointer, camera); raycaster.intersectObjects(meshArray);

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

裁剪平面

裁剪平面 - 横截面

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

●renderer.clippingPlanes - 全局裁剪

●material.clippingPlanes - 每材质裁剪

16 - 加载器（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 压缩

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

HDR 加载器

RGBELoader / EXRLoader - HDR 环境

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

免费 HDRI 库：Poly Haven、HDRIHaven。

SVG 加载器

SVGLoader - 3D 中的矢量图形

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

17 - 物理（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 - 圆锥扭转（带角度限制的肩关节）

18 - 辅助工具与调试

网格与坐标轴辅助

GridHelper + AxesHelper

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

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

相机辅助

CameraHelper - 可视化视锥

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

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

灯光辅助

●DirectionalLightHelper：箭头 + 目标线

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

●SpotLightHelper：锥形

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

●RectAreaLightHelper：轮廓矩形

骨骼辅助

SkeletonHelper - 骨骼可视化

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

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

贝塞尔曲线

●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）。

●●●javascript

const pmrem = new THREE.PMREMGenerator(renderer); const envMap = pmrem.fromEquirectangular(hdrTexture).texture; scene.environment = envMap;

20 - 数学库

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/

原文：https://neuralpixelgames.github.io/threejs-visual-guide/
版本：r183 | WebGL + WebGPU | 96 张图解。