three.js与WebGL
🎨 Three.js - 3D 图形库
Three.js 是一个强大的 JavaScript 3D 图形库，让你可以在网页浏览器中轻松创建和展示 3D 内容！
🎨 Three.js 简介
Three.js 是一个轻量级的 JavaScript 3D 图形库，让你能够在浏览器中轻松创建和显示 3D 动画和交互式 3D 内容！
📋 基本信息
- 官网: https://threejs.org
- GitHub: https://github.com/mrdoob/three.js
- 作者: Ricardo Cabello (Mr.doob)
- 首次发布: 2010年
- 基于: WebGL（浏览器的 3D API）
- 代码片段: 11,520+ 个（文档非常丰富！）
🎯 核心作用
Three.js 让你可以：
- 🎮 创建 3D 游戏
- 📊 制作 3D 数据可视化
- 🏠 展示 3D 产品模型
- 🌍 构建虚拟场景
- 🎬 制作动画效果
- 🔬 科学可视化
🧱 核心概念
Three.js 的基本结构包括：
1. 场景 (Scene)
就像一个舞台，所有 3D 对象都放在这里
const scene = new THREE.Scene();
2. 相机 (Camera)
观察场景的视角
const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面1000 // 远裁剪面
);
camera.position.z = 5;
3. 渲染器 (Renderer)
将场景渲染到屏幕
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
4. 几何体 (Geometry)
定义 3D 对象的形状
const geometry = new THREE.BoxGeometry(1, 1, 1); // 立方体
5. 材质 (Material)
定义物体的外观（颜色、质感等）
从文档中看到的材质类型：
// 基础材质
MeshBasicMaterial // 基本材质（不受光照影响）
MeshLambertMaterial // 兰伯特材质（漫反射）
MeshPhongMaterial // Phong 材质（高光）
MeshStandardMaterial // 标准材质（PBR，最常用）
MeshPhysicalMaterial // 物理材质（更真实）
MeshToonMaterial // 卡通材质// 特殊材质
LineBasicMaterial // 线条材质
PointsMaterial // 点材质
ShaderMaterial // 自定义着色器材质
6. 网格 (Mesh)
几何体 + 材质 = 可见的 3D 对象
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
7. 光源 (Light)
照亮场景
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
💻 完整示例：旋转的立方体
<!DOCTYPE html>
<html>
<head><title>Three.js 示例</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script><script>// 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();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 4. 创建立方体const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 5. 添加光源const light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(5, 5, 5);scene.add(light);// 6. 动画循环function animate() {requestAnimationFrame(animate);// 旋转立方体cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染场景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>
🌟 实际应用场景
1. 产品展示（电商应用）
// 加载 3D 模型（如鞋子、家具）
const loader = new THREE.GLTFLoader();
loader.load('shoe.gltf', (gltf) => {scene.add(gltf.scene);
});// 添加控制器，让用户旋转查看
const controls = new THREE.OrbitControls(camera, renderer.domElement);
2. 数据可视化
// 创建 3D 柱状图
for (let i = 0; i < data.length; i++) {const height = data[i].value;const bar = new THREE.BoxGeometry(1, height, 1);const mesh = new THREE.Mesh(bar, material);mesh.position.x = i * 2;scene.add(mesh);
}
3. 游戏开发
// 创建可控制的角色
const character = new THREE.Mesh(geometry, material);
document.addEventListener('keydown', (e) => {if (e.key === 'ArrowUp') character.position.z -= 0.1;if (e.key === 'ArrowDown') character.position.z += 0.1;
});
4. 虚拟展厅
// 创建房间
const room = new THREE.BoxGeometry(10, 5, 10);
const walls = new THREE.Mesh(room, wallMaterial);
scene.add(walls);// 添加展品
products.forEach(product => {const model = loadModel(product.modelUrl);scene.add(model);
});
📦 安装使用
方法 1: CDN
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
方法 2: npm（推荐）
npm install three
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
🔧 常用功能
加载 3D 模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {scene.add(gltf.scene);
});
添加交互控制
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 阻尼效果
添加阴影
renderer.shadowMap.enabled = true;
light.castShadow = true;
cube.castShadow = true;
ground.receiveShadow = true;
🎮 热门应用示例
- 🌐 Google Earth - 使用 Three.js 渲染 3D 地球
- 🏠 宜家 - 在线 3D 家具展示
- 🚗 汽车官网 - 3D 车型展示
- 🎨 创意网站 - 炫酷的 3D 交互效果
- 📊 数据可视化平台 - 3D 图表
🎓 总结
Three.js 是：
- 🎨 强大的 JavaScript 3D 图形库
- 🌐 在浏览器中创建 3D 内容
- 📦 封装了复杂的 WebGL，让 3D 开发更简单
- 🎮 用于游戏、可视化、产品展示等
核心要素：
场景 + 相机 + 渲染器 + 几何体 + 材质 + 光源 = 3D 世界
WebGL 详解
WebGL (Web Graphics Library) 是一个在浏览器中渲染 2D 和 3D 图形的 JavaScript API，无需安装任何插件！
📋 基本信息
- 全名: Web Graphics Library
- 发布: 2011年
- 维护者: Khronos Group（同样维护 OpenGL）
- 基于: OpenGL ES 2.0/3.0
- 运行环境: 浏览器（直接访问 GPU）
- 支持: 所有现代浏览器
🎯 核心作用
WebGL 允许 JavaScript 直接与 GPU（图形处理器） 交互，实现：
- 🎨 高性能 3D 图形渲染
- 🖼️ 复杂的 2D 图形处理
- 🎮 浏览器游戏
- 📊 数据可视化
- 🎬 视频特效
🔄 WebGL 在技术栈中的位置
用户代码层↓
Three.js / Babylon.js ← 高级 3D 库（封装 WebGL）↓
WebGL ← JavaScript API（浏览器提供）↓
OpenGL ES ← 底层图形标准↓
GPU 驱动 ← 显卡驱动程序↓
GPU 硬件 ← 显卡（NVIDIA、AMD、Intel 等）
🆚 WebGL vs Three.js
直接用 WebGL（原生）
// 非常复杂！需要写很多底层代码
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');// 创建顶点着色器
const vertexShaderSource = `attribute vec4 a_position;void main() {gl_Position = a_position;}
`;// 创建片段着色器
const fragmentShaderSource = `precision mediump float;void main() {gl_FragColor = vec4(1, 0, 0, 1);}
`;// 编译着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);// 创建程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);// 创建缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);// 设置顶点数据
const positions = [-0.5, -0.5,0.5, -0.5,0.0, 0.5,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);// ... 还需要更多代码才能显示一个三角形！
使用 Three.js（封装了 WebGL）
// 简单！几行代码实现相同效果
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer(); // 内部使用 WebGLconst geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);renderer.render(scene, camera);
Three.js 就是对 WebGL 的封装，让开发更简单！
🧠 WebGL 的工作原理
1. 渲染管线（Pipeline）
JavaScript 代码↓
顶点数据（Vertices）↓
顶点着色器（Vertex Shader） ← 处理每个顶点的位置↓
光栅化（Rasterization） ← 将几何体转换为像素↓
片段着色器（Fragment Shader） ← 计算每个像素的颜色↓
帧缓冲（Frame Buffer）↓
显示在屏幕上
📊 WebGL 版本
WebGL 1.0
- 基于 OpenGL ES 2.0
- 2011年发布
- 所有现代浏览器支持
WebGL 2.0
- 基于 OpenGL ES 3.0
- 2017年发布
- 更多功能（更好的纹理、变换反馈等）
- 大多数现代浏览器支持
检测浏览器支持
// 检测 WebGL 1.0
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl) {console.log('✅ 支持 WebGL 1.0');
}// 检测 WebGL 2.0
const gl2 = canvas.getContext('webgl2');
if (gl2) {console.log('✅ 支持 WebGL 2.0');
}
🔧 WebGL 生态系统
高级 3D 库（封装 WebGL）
Three.js // 最流行，11k+ 代码片段
Babylon.js // 游戏引擎级别
A-Frame // VR/AR 框架
PlayCanvas // 游戏引擎
PixiJS // 2D（也支持 WebGL）
底层/工具库
REGL // 函数式 WebGL
twgl.js // 简化 WebGL API
Oasis Engine // 阿里开源引擎
⚡ WebGL 性能优势
Canvas 2D vs WebGL
// Canvas 2D（CPU 渲染）
渲染 1000 个圆形: ~30 FPS
渲染 10000 个圆形: ~5 FPS ❌ 卡顿// WebGL（GPU 渲染）
渲染 1000 个圆形: ~60 FPS
渲染 10000 个圆形: ~60 FPS ✅ 流畅
渲染 100000 个圆形: ~60 FPS ✅ 依然流畅！
🎓 学习曲线
难度等级:
WebGL 原生 ████████████ (12/10) 😱 非常难
Three.js ████░░░░░░░░ (4/10) 😊 中等
Babylon.js █████░░░░░░░ (5/10) 😊 中等
A-Frame ██░░░░░░░░░░ (2/10) 😄 简单
💡 什么时候用什么？
直接用 WebGL（不推荐，除非你是专家）
- ✅ 需要极致性能优化
- ✅ 开发自己的 3D 引擎
- ✅ 学术研究
用 Three.js（推荐）
- ✅ 大多数 3D 应用
- ✅ 产品展示
- ✅ 数据可视化
- ✅ 快速开发
用 Babylon.js
- ✅ 复杂游戏
- ✅ 需要物理引擎
- ✅ VR/AR 应用
🔍 浏览器兼容性
WebGL 1.0 支持率：~97%
✅ Chrome 9+
✅ Firefox 4+
✅ Safari 5.1+
✅ Edge (所有版本)
✅ Opera 12+
✅ 移动浏览器（iOS Safari 8+, Chrome Android）
❌ IE 10 及以下（需要 IE 11）
WebGL 2.0 支持率：~95%
✅ Chrome 56+
✅ Firefox 51+
✅ Safari 15+
✅ Edge 79+
⚠️ 部分移动设备可能不支持
🎓 总结
WebGL 是：
- 🎮 浏览器中的 GPU 加速图形 API
- 🔧 底层 API，直接操作 GPU
- ⚡ 性能极强，但使用复杂
- 🎨 是 Three.js 的底层基础
关系链：
你的代码 → Three.js → WebGL → GPU(简单) (复杂) (硬件)
类比：
- WebGL = 汽车引擎（复杂但强大）
- Three.js = 汽车方向盘+仪表盘（易用）
- 你不需要理解引擎内部构造，就能开车！
同样，你不需要深入 WebGL，用 Three.js 就能做出炫酷的 3D 效果！