Three.js 零基础系统教程

前言

从零到企业级的 Three.js 完整系统教程，专为前端开发者整理，结构清晰、由浅入深、无废话、可直接当做博客笔记、学习手册、面试复习文档。
覆盖：基础架构 → 相机/控件/光照/阴影 → 几何体/材质/纹理 → 动画/交互/模型加载 → 特效/后处理 → 实战项目 → 性能优化。

第一章 Three.js 简介与环境搭建

1.1 什么是 Three.js

Three.js 是基于原生 WebGL / WebGPU 的前端 3D 图形渲染引擎。

原生 WebGL 极其底层、代码繁琐、需要手动管理缓冲区、着色器、矩阵、帧缓存。Three.js 对底层进行了高度封装，让前端可以用面向对象的方式快速开发 3D 场景。

一句话本质：Three.js = 前端的 3D 框架

适用场景

数据可视化：3D 地图、数字孪生、大屏沙盘
Web 3D 展示：商品、户型、汽车、模型预览
Web 小游戏、3D 艺术特效、粒子动画
WebXR / VR / AR 虚拟现实场景

1.2 Three.js 核心三大件（必背）

所有 Three.js 画面，只由三个核心组件构成：

Scene 场景：3D 世界的容器（舞台）

Camera 相机：观察者（你能看到什么）

Renderer 渲染器：绘制画面（把 3D 画到画布）

万能公式：3D画面 = 场景 + 相机 + 逐帧渲染

1.3 环境安装

方式一：Vite 工程化（推荐企业开发）

npm create vite@latest three-demo — –template vanilla
cd three-demo
npm install three
npm run dev

方式二：CDN 快速体验

1.4 最简通用初始化模板（项目万能骨架）

包含：场景、相机、渲染器、抗锯齿、适配、动画循环、轨道控制器

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 1. 场景
const scene = new THREE.Scene()

// 2. 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5

// 3. 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
document.body.appendChild(renderer.domElement)

// 4. 控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

// 5. 测试物体
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshNormalMaterial()
)
scene.add(cube)

// 动画循环
function animate() {
requestAnimationFrame(animate)
controls.update()
cube.rotation.y += 0.01
renderer.render(scene, camera)
}
animate()

// 窗口适配
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
})

第二章相机与控制器系统

2.1 两种相机原理与区别

透视相机 PerspectiveCamera（99% 场景）

模拟人眼，近大远小、透视畸变。

new THREE.PerspectiveCamera(FOV, 宽高比, 近裁剪面, 远裁剪面)

FOV：视场角，越大越广角、变形越强（45~75 最佳）
near：近裁剪面，不能设 0
far：远裁剪面，过大会出现深度抖动

正交相机 OrthographicCamera（无透视）

物体远近大小一致，适合 CAD、2.5D、UI、沙盘。

2.2 OrbitControls 轨道控制器全解

支持拖拽旋转、滚轮缩放、右键平移，是所有 3D 项目标配。

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 惯性顺滑
controls.dampingFactor = 0.04

// 缩放限制
controls.minDistance = 2
controls.maxDistance = 20

// 角度限制（防穿帮）
controls.maxPolarAngle = Math.PI / 2.1

// 自动旋转
controls.autoRotate = false
controls.autoRotateSpeed = 2

⚠️ 必须在动画循环执行 controls.update()

第三章光照与阴影系统

3.1 五大光源详解

AmbientLight 环境光

全局均匀补光，无方向、无阴影，只提亮场景。

DirectionalLight 平行光（主光源/太阳光）

方向固定、可产生高质量阴影，项目主光首选。

PointLight 点光源

灯泡效果，向四周发散，有衰减、有阴影。

SpotLight 聚光灯

手电筒/舞台灯，锥形照射、边缘羽化。

HemisphereLight 半球光

天空+地面渐变，模拟自然室外天光。

3.2 阴影完整开启流程（面试高频）

阴影必须四步全开，缺一不显示：

// 1. 渲染器开启阴影
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

// 2. 光源开启阴影
light.castShadow = true
light.shadow.mapSize.set(2048, 2048)

// 3. 物体投射阴影
mesh.castShadow = true

// 4. 地面接收阴影
floor.receiveShadow = true

3.3 阴影常见问题解决

阴影锯齿：提升 mapSize
阴影条纹闪烁：light.shadow.bias = -0.001
阴影范围太小：调整 shadow.camera 视口

第四章几何体系统

4.1 常用内置几何体

所有几何体底层都是 BufferGeometry 顶点缓冲数据。

BoxGeometry 立方体
SphereGeometry 球体
CylinderGeometry 圆柱
ConeGeometry 圆锥
PlaneGeometry 平面
TorusGeometry 圆环
CapsuleGeometry 胶囊体

4.2 自定义顶点几何体

手动绘制三角面，自由构建任意形状。

const geometry = new THREE.BufferGeometry()
const points = new Float32Array([
-1, -1, 0,
1, -1, 0,
0, 1, 0
])
geometry.setAttribute('position', new THREE.BufferAttribute(points, 3))
geometry.computeVertexNormals()

4.3 拉伸几何体 ExtrudeGeometry

将 2D 图形拉伸为 3D 立体，3D地图、楼宇建模核心。

第五章材质系统（PBR核心）

5.1 材质分类

不受光材质

MeshBasicMaterial：纯色无光影
MeshNormalMaterial：法线调试材质

传统光照材质

MeshLambertMaterial：漫反射、无高光
MeshPhongMaterial：高光、塑料质感

PBR 物理材质（企业首选）

MeshStandardMaterial 真实物理渲染

metalness 金属度：0绝缘 / 1金属
roughness 粗糙度：0镜面 / 1粗糙

MeshPhysicalMaterial：支持折射、透光、玻璃、车漆

第六章纹理贴图系统

6.1 九大核心贴图

map 颜色贴图
normalMap 法线凹凸贴图
roughnessMap 粗糙度贴图
metalnessMap 金属度贴图
aoMap 环境光遮蔽
displacementMap 位移贴图
alphaMap 透明贴图
emissiveMap 自发光贴图
envMap 环境反射贴图

6.2 纹理基础配置

const texture = new THREE.TextureLoader().load('xxx.jpg')
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(2,2)

第七章动画系统

7.1 时间驱动动画（无帧率抖动）

const clock = new THREE.Clock()
function animate(){
requestAnimationFrame(animate)
const t = clock.getElapsedTime()
cube.position.y = Math.sin(t) * 0.5
cube.rotation.y = t * 2
renderer.render(scene,camera)
}

7.2 GSAP 专业动画

import gsap from 'gsap'
gsap.to(cube.position,{
x:2,
duration:1,
repeat:-1,
yoyo:true
})

第八章鼠标交互与射线拾取

8.1 Raycaster 射线检测原理

从相机发射一条射线，穿透场景物体，实现 hover、点击拾取。

8.2 通用拾取代码模板

const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()

window.addEventListener('mousemove',e=>{
mouse.x = (e.clientX / innerWidth) * 2 – 1
mouse.y = -(e.clientY / innerHeight) * 2 + 1
})

function checkHover(){
raycaster.setFromCamera(mouse,camera)
const res = raycaster.intersectObjects(scene.children)
if(res.length){
console.log('选中物体',res[0].object)
}
}

第九章 3D模型加载系统

9.1 主流模型格式对比

GLB / GLTF：行业标准、体积小、贴图动画齐全、首选
FBX：模型大、兼容老项目
OBJ：无动画、老式格式

9.2 GLB 模型加载模板

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
const loader = new GLTFLoader()

loader.load('/model.glb',gltf=>{
const model = gltf.scene
model.traverse(child=>{
if(child.isMesh){
child.castShadow = true
child.receiveShadow = true
}
})
scene.add(model)
})

第十章高级特效与工程优化

10.1 后处理特效

辉光、景深、描边、AO、调色，大幅提升画面质感。

10.2 性能优化核心方案

InstancedMesh 实例化渲染（海量物体）
DRACO 模型压缩
贴图尺寸限制 1024/2048
视锥体剔除、LOD 多级细节
射线检测节流、限定检测对象