当前位置：首页 > news >正文

如何学习Three.js

news 2026/5/21 22:17:00

一、Three.js 整体定义与行业定位

1.1 基础概念释义

Three.js 是一款基于 WebGL/WebGPU 标准构建的开源、轻量级、跨平台 3D 图形 JavaScript 库，是全球最主流、生态最完善的 Web 3D 开发框架。它屏蔽了底层 WebGL/WebGPU 复杂的渲染管线、着色器编写、矩阵运算、状态管理细节，提供简洁、直观、语义化的高层 API，让前端开发者无需精通底层图形原理，即可快速在浏览器中创建高性能 3D 交互场景。

Three.js 定位为Web 端 3D 引擎开发工具库，而非底层图形 API，核心价值是降低 Web 3D 开发门槛，同时保留高度可定制性。它完美支持桌面 / 移动端浏览器、Electron 桌面应用、微信小程序、WebXR 虚拟现实，是 Web 3D、元宇宙、数字孪生、数据可视化、网页游戏、3D 产品展示的事实标准框架。

目前 Three.js 已全面内置WebGPU 后端渲染器，可自动切换 WebGL/WebGPU，兼顾兼容性与高性能，是下一代 Web 图形开发的核心上层框架。

1.2 Three.js 诞生与迭代发展背景

早期 WebGL 原生开发极度繁琐，需手动编写着色器、处理缓冲区、矩阵变换、光照计算，开发成本极高，普通前端开发者难以入门。为解决这一痛点，2010 年由 Ricardo Cabello（Mr.doob）主导推出 Three.js 开源项目，通过封装 WebGL 底层细节，提供场景、相机、网格、材质、灯光等高层抽象对象。

历经十余年迭代，Three.js 从基础 3D 渲染库进化为全功能 Web 3D 引擎：

支持 PBR 物理渲染、实时光照、阴影、粒子系统、骨骼动画、几何体实例化；
兼容 glTF/GLB/FBX/OBJ 等主流 3D 模型格式；
内置物理引擎、后期处理、路径追踪渲染、LOD 优化、射线交互；
新增 WebGPU 渲染后端，支持多线程、低开销、并行计算。

如今 Three.js 已成为 GitHub 星标超 10 万的顶级前端图形开源项目，被谷歌、微软、苹果、英伟达、亚马逊等企业广泛采用，生态成熟度无出其右。

1.3 Three.js 核心定位与技术特性

核心定位

Web 3D 开发首选高层框架
WebGL/WebGPU 双后端统一调用层
零插件、纯 JavaScript、全平台运行
前端工程师入门 3D 开发的第一选择

核心技术特性

极简 API 设计：一行代码创建场景、相机、模型、灯光；
双渲染后端：自动适配 WebGL（高兼容）与 WebGPU（高性能）；
完整渲染体系：内置标准材质、PBR 材质、卡通渲染、线条渲染；
模型生态完善：原生支持 glTF/GLB（官方推荐）、FBX、OBJ、DRACO 压缩；
交互系统强大：内置轨道控制器、鼠标射线拾取、触控支持；
高性能优化：实例化渲染、LOD、视锥体裁剪、纹理压缩、网格合并；
特效生态丰富：后期处理、 bloom 光晕、景深、运动模糊、屏幕后处理；
可高度扩展：自定义着色器、自定义几何体、自定义插件。

1.4 Three.js 支持平台与运行环境

支持环境

所有现代 PC / 移动端浏览器（Chrome/Firefox/Safari/Edge）
Electron 桌面客户端
微信小程序、抖音小程序（适配版）
WebXR AR/VR 虚拟现实设备
Node.js 服务端渲染（离线截图、模型处理）

最低要求

支持 WebGL 1.0+（全浏览器兼容）
WebGPU 需浏览器支持（自动降级）

1.5 Three.js 与原生 WebGL/WebGPU、其他引擎对比

技术方案	开发难度	性能	上手速度	生态	适用场景
Three.js	极低	高 / 极高	极快	全球第一	90% Web 3D 项目
原生 WebGL	极高	中	极慢	小	底层图形研究
原生 WebGPU	高	极高	极慢	中	高性能定制渲染
Babylon.js	中	高	快	大	重型 Web 3D 游戏
PlayCanvas	中	高	快	中	云编辑器游戏
Unity WebGL	高	中	慢	大	重度 3D 游戏

二、Three.js 整体架构与核心技术模块详解

Three.js 采用经典场景图架构，模块高度解耦，逻辑清晰，是最符合人类直觉的 3D 框架结构。

2.1 三大核心基础组件（必掌握）

2.1.1 Scene 场景

Three.js 的根容器，所有模型、灯光、相机都必须添加到场景中才能渲染。

作用：管理 3D 世界所有物体的层级、位置、状态；
特性：支持嵌套层级、雾化效果、背景色 / 背景图、全局环境设置。

2.1.2 Camera 相机

决定3D 场景以什么视角显示在屏幕上，相当于人眼。

PerspectiveCamera 透视相机：模拟人眼，近大远小，最常用；
OrthographicCamera 正交相机：无透视，用于 UI、2D 视图、数据可视化；
必须与场景配对，缺一不可。

2.1.3 Renderer 渲染器

Three.js 的核心渲染引擎，负责将场景 + 相机绘制到 Canvas 画布。

WebGLRenderer：全兼容，稳定；
WebGPURenderer：高性能，下一代标准；
自动处理画布尺寸、清屏、渲染循环、设备像素比适配。

渲染公式：Renderer.render(Scene, Camera)

2.2 几何体与网格模块

2.2.1 Geometry 几何体

定义 3D 模型的形状与顶点数据。

内置几何体：立方体、球体、圆柱、圆环、平面、圆锥、胶囊体、二十面体；
自定义几何体：可手动创建顶点、法向量、UV 坐标。

2.2.2 Mesh 网格

几何体 + 材质 = 可渲染的 3D 物体。

Mesh 是 Three.js 中最基础的可显示对象；
支持位置、旋转、缩放、父子层级、矩阵变换。

2.3 材质系统（核心渲染特性）

2.3.1 基础材质

MeshBasicMaterial：不受光，纯色渲染，适合 UI；
MeshLambertMaterial：漫反射，适合非光滑物体；
MeshPhongMaterial：高光反射，适合塑料、金属。

2.3.2 PBR 物理材质（真实感渲染）

MeshStandardMaterial / MeshPhysicalMaterial

基于物理渲染，符合现实光照规律；
支持金属度、粗糙度、清漆、透射、次表面散射（皮肤渲染）；
制作影视级、产品级 3D 效果必备。

2.3.3 特殊材质

PointsMaterial：粒子渲染；
LineBasicMaterial：线条渲染；
ShaderMaterial：自定义着色器材质（高级扩展）。

2.4 光照与阴影系统

2.4.1 光源类型

AmbientLight：环境光（全局基础照明）；
DirectionalLight：平行光（模拟太阳光，支持阴影）；
PointLight：点光源（灯泡，辐射照明）；
SpotLight：聚光灯；
RectAreaLight：矩形面光源（模拟灯带、窗户）。

2.4.2 阴影系统

Three.js 支持实时软阴影 / 硬阴影：

需开启渲染器.shadowMap.enabled；
灯光.castShadow = true；
模型.castShadow/receiveShadow = true；
支持 PCF 软阴影、PCSS 高质量阴影。

2.5 高级核心技术模块

2.5.1 控制器（交互）

OrbitControls 轨道控制器：鼠标旋转、缩放、平移相机，最常用；
TrackballControls：轨迹球控制；
FirstPersonControls：第一人称控制。

2.5.2 射线投射（拾取）

Raycaster：实现鼠标 / 触摸点击 3D 物体、拾取模型、交互判断。

无需物理引擎即可实现 3D 交互；
是 Web 3D 交互的核心技术。

2.5.3 动画系统

AnimationMixer：骨骼动画、关键帧动画；
morphTarget：变形动画；
requestAnimationFrame：流畅渲染循环。

2.5.4 模型加载器

GLTFLoader：官方推荐，轻量化、高性能、支持动画 / PBR；
GLBLoader：单文件 glTF；
FBXLoader：游戏模型；
OBJLoader：静态模型；
DRACOLoader：模型压缩，减少 90% 模型体积。

2.5.5 后期处理（EffectComposer）

内置高级屏幕特效：

Bloom 光晕发光
DepthOfField 景深
FXAA 抗锯齿
Outline 描边
Vignette 暗角
FilmGrain 胶片颗粒

2.5.6 性能优化技术

InstancedMesh实例化渲染（批量绘制大量相同物体）
LOD多细节层次（远低近高）
视锥体裁剪（自动隐藏不可见物体）
纹理压缩（BasisUniversal）
网格合并（BufferGeometryUtils.mergeBufferGeometries）
雾化遮挡（减少远处渲染压力）

2.5.7 WebGPU 高级特性

多线程渲染
低 CPU 开销
批量渲染
实时光追预览支持
计算着色器

三、Three.js 权威学习网站、中文教程、官方资源（超全整理）

3.1 全球顶级官方 / 权威网站

1. Three.js 官方文档（必读）

https://threejs.org/docs/

最权威 API 手册、示例、教程；
英文原版，可机器翻译。

2. Three.js 官方示例库（最强学习库）

https://threejs.org/examples/

数百个官方可运行 Demo；
包含特效、材质、模型、动画、交互；
可直接查看源码。

3. Three.js 官方手册（初学者必读）

https://threejs.org/manual/

从零开始系统教学；
英文，逻辑清晰，循序渐进。

4. MDN Three.js 指南

https://developer.mozilla.org/zh-CN/docs/Three.js

前端官方标准入门文档；
中文，简洁可靠。

5. Discover Three.js (WebGL 基础)

https://discoverthreejs.com/

全球公认最好的英文实战书籍；
从基础到进阶完整项目。

3.2 国内顶级中文学习网站

1. Three.js 中文网（国内最专业）

https://threejs.org.cn/

中文文档、教程、案例、问答；
新手入门首选。

2. 掘金 Three.js 专栏（高质量技术文）

https://juejin.cn/tag/10588960975774836799

大量实战、进阶、优化、特效教程；
中文优质内容最多。

3. 阿崔 cxr Three.js 系统教程

https://www.bilibili.com/read/cv47728

国内最火 Three.js 系统化教程；
从入门到实战。

4. Three.js 中文教程网

http://www.yanhuangxueyuan.com/

经典入门教程，简单易懂；
适合零基础。

5. Web3D 技术社区

https://web3d.org.cn/

数字孪生、元宇宙、WebGPU 技术交流。

3.3 最强视频学习平台（B 站）

Three.js 零基础入门到实战全集（阿崔 cxr）
Three.js 可视化 / 数字孪生系统教学
Three.js WebGPU 后端高级实战
Web3D 元宇宙开发全套

3.4 专业书籍

《Three.js 开发指南》
《Discover Three.js》
《WebGL 编程指南》（原理必备）
《3D Math Primer》（3D 数学基础）

四、Three.js 优质开源项目、插件、工具

4.1 官方 / 顶级开源库

lil-gui调试面板https://github.com/georgealways/lil-gui
tween.js平滑动画https://github.com/tweenjs/tween.js
cannon.js物理引擎https://github.com/schteppei/cannon.js
ammo.js子弹物理引擎https://github.com/kripken/ammo.js
meshline高质量线条https://github.com/oframe/oframe

4.2 顶级实战开源项目

Three.js 3D 产品展示
Three.js 数字孪生智慧城市
Three.js 元宇宙房间
Three.js 3D 相册 / 全景漫游
Three.js WebGPU 渲染 Demo

4.3 模型资源网站

Sketchfab（glTF 模型最多）
Blender Market
Free3D
Mixamo（免费角色动画）

五、Three.js 开发环境搭建

5.1 环境要求

浏览器：Chrome 最新版
编辑器：VS Code
本地服务：Live Server 插件（必须）

5.2 引入方式

CDN 方式（最简单）

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>

NPM 方式（工程化）

npm install three

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

六、Three.js 完整实战示例（3D 旋转立方体 + 轨道控制 + 光照 + 阴影）

6.1 HTML 结构

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three.js 3D立方体</title> <style> *{margin:0;padding:0;box-sizing:border-box;} body{overflow:hidden;background:#111;} canvas{display:block;width:100vw;height:100vh;} </style> </head> <body> <script type="module"> import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js' import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/controls/OrbitControls.js' // ========== 1. 创建基础三要素 ========== const scene = new THREE.Scene() scene.background = new THREE.Color(0x111215) const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ) camera.position.z = 5 const renderer = new THREE.WebGLRenderer({ antialias:true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.shadowMap.enabled = true // 开启阴影 document.body.appendChild(renderer.domElement) // ========== 2. 添加控制器 ========== const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true // 平滑阻尼 // ========== 3. 创建几何体 + 材质 + 网格 ========== const geometry = new THREE.BoxGeometry(1,1,1) const material = new THREE.MeshStandardMaterial({ color: 0x0099ff, metalness:0.2, roughness:0.5 }) const cube = new THREE.Mesh(geometry, material) cube.castShadow = true scene.add(cube) // ========== 4. 创建地面 ========== const planeGeometry = new THREE.PlaneGeometry(10,10) const planeMaterial = new THREE.MeshStandardMaterial({ color:0x333333 }) const plane = new THREE.Mesh(planeGeometry, planeMaterial) plane.rotation.x = -Math.PI/2 plane.position.y = -1.5 plane.receiveShadow = true scene.add(plane) // ========== 5. 添加灯光 ========== const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8) directionalLight.position.set(5,5,5) directionalLight.castShadow = true scene.add(directionalLight) // ========== 6. 渲染循环 ========== function animate() { requestAnimationFrame(animate) cube.rotation.x += 0.005 cube.rotation.y += 0.005 controls.update() renderer.render(scene, camera) } animate() // ========== 窗口适配 ========== window.addEventListener('resize', () => { camera.aspect = window.innerWidth/window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) }) </script> </body> </html>