Three.js 是由 Ricardo Cabello (Mr.doob) 创建的 WebGL 3D 图形库，是浏览器端 3D 渲染的事实标准。它封装了 WebGL 复杂 API，提供场景、相机、灯光、材质、几何体等高层抽象，让前端开发者轻松构建 3D 交互体验。
Three.js 是什么？
解决什么问题？
关键特性：
# 创建项目
mkdir my-threejs-app &;& cd my-threejs-app
npm init -y
# 安装 Three.js
npm install three
# 安装开发依赖（可选，用于开发服务器）
npm install -D vite
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js"
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
chrome://gpu（Chrome）或 about:support（Firefox），确保 WebGL 状态为 "Hardware accelerated"Cannot use import statement outside a moduletype="module"，或使用打包工具（Vite/Webpack）处理npm config set registry https://registry.npmmirror.comtsconfig.json 中 moduleResolution 设置为 "bundler" 或 "node"用 Three.js 创建 3D 旋转地球仪：纹理贴图 + 星空粒子 + 鼠标交互旋转缩放。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3D 地球仪</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
.info { position: fixed; bottom: 20px; left: 20px; color: white; font-family: system-ui; opacity: 0.7; }
</style>
</head>
<body>
<div class="info">🌍 拖拽旋转 · 滚轮缩放</div>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 场景
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 4);
// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = 1.5;
controls.maxDistance = 10;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;
// 星空粒子
const starsGeom = new THREE.BufferGeometry();
const starsCount = 2000;
const positions = new Float32Array(starsCount * 3);
for (let i = 0; i < starsCount * 3; i++) {
positions[i] = (Math.random() - 0.5) * 30;
}
starsGeom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const starsMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02 });
const stars = new THREE.Points(starsGeom, starsMat);
scene.add(stars);
// 地球
const geometry = new THREE.SphereGeometry(1, 64, 64);
// 使用纹理贴图（在线纹理）
const textureLoader = new THREE.TextureLoader();
const earthMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
const earthSpec = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
const earthBump = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
const material = new THREE.MeshPhongMaterial({
map: earthMap,
specularMap: earthSpec,
bumpMap: earthBump,
bumpScale: 0.05,
specular: new THREE.Color('grey'),
shininess: 10,
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
// 光照
const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight.position.set(5, 3, 5);
scene.add(directionalLight);
// 动画循环
function animate() {
requestAnimationFrame(animate);
stars.rotation.y += 0.0001;
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>
index.htmlnpx serve . 启动创建一个带光照和旋转动画的 3D 立方体场景，这是 Three.js 最经典的入门示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Three.js 旋转立方体</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
// ========== 1. 创建场景 ==========
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
// ========== 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(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// ========== 4. 创建立方体 ==========
const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
const material = new THREE.MeshStandardMaterial({
color: 0x00ff88,
roughness: 0.3,
metalness: 0.1,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// ========== 5. 添加光源 ==========
// 环境光（基础亮度）
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);
// 方向光（产生阴影和立体感）
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
// ========== 6. 动画循环 ==========
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.015;
renderer.render(scene, camera);
}
animate();
// ========== 7. 窗口自适应 ==========
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
index.html原生 WebGL API 极其冗长——仅画一个三角形就需要上百行代码。Three.js 对 WebGL 进行了优雅的抽象，让开发者能用面向对象的方式构建 3D 场景。它是目前 GitHub 上 Star 最多的 3D Web 库（100k+ stars），被广泛应用于产品展示、数据可视化、游戏和 AR/VR。
Three.js 的世界观类似拍电影：
| 概念 | 类比 | 说明 |
|---|---|---|
| Scene（场景） | 舞台 | 容纳所有 3D 对象的容器 |
| Camera（相机） | 摄像机 | 决定观众看到什么，常用 PerspectiveCamera |
| Renderer（渲染器） | 放映机 | 将场景通过相机渲染到 Canvas |
| Mesh（网格） | 演员 | 由 Geometry（形状）+ Material（材质）组成 |
| Light（光源） | 灯光 | 没有光就看不到任何东西 |
| Animation Loop | 播放 | 每帧更新场景并重新渲染 |
使用 Vite 快速启动：
npm create vite@latest my-three-app -- --template vanilla
cd my-three-app
npm install three
npm run dev
在 main.js 中构建最小场景：
import * as THREE from 'three';
// 三大核心：场景 + 相机 + 渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
// Geometry（形状）+ Material（材质） = Mesh（网格物体）
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff6600 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 必须有光！
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate); // 请求下一帧
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
添加多个物体和辅助工具：
// 坐标轴辅助（红=X, 绿=Y, 蓝=Z）
scene.add(new THREE.AxesHelper(3));
// 网格地面
const grid = new THREE.GridHelper(10, 10);
scene.add(grid);
// 球体
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 32, 32),
new THREE.MeshStandardMaterial({ color: 0x4488ff, roughness: 0.2, metalness: 0.8 })
);
sphere.position.x = -2;
scene.add(sphere);
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 开启惯性
controls.dampingFactor = 0.05;
function animate() {
requestAnimationFrame(animate);
controls.update(); // 必须在 render 前更新
renderer.render(scene, camera);
}
| Geometry | 用途 |
|---|---|
BoxGeometry(w, h, d) |
立方体/盒子 |
SphereGeometry(r, segW, segH) |
球体 |
CylinderGeometry(rT, rB, h, seg) |
圆柱/圆锥 |
PlaneGeometry(w, h) |
平面 |
TorusGeometry(r, tube, radSeg, tubSeg) |
圆环 |
BufferGeometry |
自定义几何体（高性能） |
| Material | 特性 | 需要光照 |
|---|---|---|
MeshBasicMaterial |
不受光影响，纯色 | 否 |
MeshStandardMaterial |
PBR 物理渲染（推荐） | 是 |
MeshPhongMaterial |
经典 Blinn-Phong 光照 | 是 |
MeshNormalMaterial |
法线可视化（调试用） | 否 |
MeshToonMaterial |
卡通风格 | 是 |
renderer.setPixelRatio 设为 devicePixelRatio 的作用是什么？何时应降低它？Three.js 是浏览器端 3D 渲染的事实标准。毕设中如果能加入 3D 元素——产品 3D 展示、校园导览、数据可视化地球、虚拟展厅——会立刻让项目档次提升。Three.js 屏蔽了 WebGL 的复杂性，前端开发者无需学 OpenGL 也能做 3D。
Scene (场景) → 容納所有 3D 物体
Camera (相机) → 观察视角
Renderer (渲染器) → 绘制到屏幕
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
| 组件 | 说明 | 示例 |
|---|---|---|
| Geometry | 形状 | Box, Sphere, Cylinder, BufferGeometry |
| Material | 材质 | MeshBasic, MeshPhong, MeshStandard |
| Light | 光照 | Ambient, Directional, Point, Spot |
| Controls | 交互 | OrbitControls, FlyControls |
npm install three
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x3b82f6 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 别忘了加光照
scene.add(new THREE.AmbientLight(0x404040));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.autoRotate = true;
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('/models/building.glb', (gltf) => {
scene.add(gltf.scene);
});
Blender 建模校园建筑 → glTF 导出 → Three.js 加载 → OrbitControls 漫游。
商品 360 度旋转查看，支持缩放和材质切换。
3D 柱状图、3D 地图、3D 粒子效果。
COVID 期间流行的线上展厅，三维空间展示作品。
Three.js 是毕设的"视觉杀手锏"。一个带 3D 元素的毕设项目，在答辩演示时视觉冲击力远超传统 2D 页面。