Three.js实战：5分钟构建你的第一个3D旋转立方体
为什么选择Three.js而非原生WebGL？
打开浏览器就能运行的3D内容曾经是Flash的专利，如今已成为现代Web开发的标准能力。但当你真正踏入这个领域，面对原生WebGL API时，那些晦涩的着色器代码和复杂的矩阵运算往往会浇灭初学者的热情。这就是Three.js存在的意义——它像一位耐心的翻译官，将GPU的机器语言转换成了人类能理解的JavaScript对象。
原生WebGL需要你手动处理的内容包括：
- 顶点缓冲对象(VBO)的创建与绑定
- 着色器程序的编译与链接
- 矩阵变换的手动计算
- 光照模型的数学实现
而Three.js将这些底层细节封装成了直观的三大核心概念：场景(Scene)、相机(Camera)和渲染器(Renderer)。就像拍电影一样，你需要搭建舞台（场景），架设摄像机（相机），然后通过摄影师（渲染器）把画面呈现出来。这种类比让3D开发变得前所未有的直观。
环境准备：零配置起步
现代前端开发已经告别了手动引入脚本的时代。我们推荐使用ES模块直接导入Three.js：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个3D立方体</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script type="module"> import * as THREE from 'https://cdn.skypack.dev/three@0.132.2'; // 在这里编写Three.js代码 </script> </body> </html>这个HTML模板包含了所有必需元素：
- 全屏显示的画布
- 通过CDN引入的最新版Three.js
- 干净的页面结构
四大核心组件详解
1. 场景搭建：3D世界的容器
场景是存放所有3D对象的容器，就像剧场的舞台：
const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); // 设置浅灰色背景可以添加到场景中的对象包括：
- 网格(Mesh)：如立方体、球体等可见物体
- 光源(Light)：各种类型的光照
- 辅助对象：坐标系、网格辅助线等
2. 相机配置：观众的视角
Three.js提供多种相机类型，最常用的是透视相机(PerspectiveCamera)：
const camera = new THREE.PerspectiveCamera( 75, // 视野角度(FOV) window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); camera.position.z = 5; // 将相机向后移动5个单位相机参数调整技巧：
| 参数 | 作用 | 推荐值 |
|---|---|---|
| fov | 视野范围 | 45-75度 |
| aspect | 画面比例 | 通常为窗口宽高比 |
| near | 最近渲染距离 | 0.1-1 |
| far | 最远渲染距离 | 根据场景大小调整 |
3. 渲染器初始化：绘制引擎
WebGL渲染器是Three.js的核心组件：
const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 响应式设计 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });4. 创建立方体：你的第一个3D对象
立方体由几何体(Geometry)和材质(Material)组成：
const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1的立方体 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, // 绿色 wireframe: false // 是否显示线框 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);材质类型对比：
- MeshBasicMaterial：基础材质，不受光照影响
- MeshStandardMaterial：PBR材质，支持金属度和粗糙度
- MeshPhongMaterial：高光材质，适合塑料类表面
动画循环：让立方体旋转起来
Three.js的动画原理是利用浏览器的requestAnimationFrame API：
function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();这段代码创建了一个递归循环，每帧执行时会：
- 更新立方体的旋转角度
- 重新渲染场景
- 请求下一帧动画
完整代码与效果优化
将所有组件组合起来，这是完整的实现：
import * as THREE from 'https://cdn.skypack.dev/three@0.132.2'; // 初始化场景 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); // 设置相机 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); document.body.appendChild(renderer.domElement); // 添加立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 0x049ef4, metalness: 0.5, roughness: 0.2 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 添加光源 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 1, 1); scene.add(light); // 动画循环 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.005; cube.rotation.y += 0.01; renderer.render(scene, camera); } // 响应式调整 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); animate();这个增强版增加了：
- 更现代的金属质感材质
- 方向光源照明
- 平滑的抗锯齿效果
- 响应式布局支持
调试技巧与常见问题
场景可视化调试
添加辅助工具可以更直观地理解3D空间：
// 添加坐标系辅助（红色X，绿色Y，蓝色Z） const axesHelper = new THREE.AxesHelper(2); scene.add(axesHelper); // 添加网格地面 const gridHelper = new THREE.GridHelper(10, 10); scene.add(gridHelper);性能优化要点
在开发过程中注意：
- 重用几何体和材质对象
- 及时清理不再需要的3D对象
- 对于静态场景，可以关闭自动矩阵更新
- 使用BufferGeometry代替Geometry获得更好性能
浏览器兼容性处理
虽然现代浏览器都支持WebGL2，但为了兼容性可以考虑：
try { const renderer = new THREE.WebGLRenderer({...}); } catch (e) { alert('您的浏览器不支持WebGL，请升级到最新版本'); console.error(e); }从立方体到复杂场景
掌握了基础立方体后，你可以尝试：
- 添加纹理贴图
- 实现交互控制（如鼠标旋转）
- 加载3D模型文件
- 创建粒子系统
- 添加后期处理效果
Three.js的官方示例库提供了数百个案例，从简单的几何体到复杂的光影效果应有尽有。当你成功运行第一个立方体后，这些高级功能的学习曲线将变得平缓许多。