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

别再硬啃原生WebGL了！用Three.js 10分钟搞定一个旋转3D立方体（附完整代码）

news 2026/7/1 8:45:44

从零到3D：用Three.js十分钟实现旋转立方体的艺术

1. 为什么选择Three.js而非原生WebGL？

当我第一次接触WebGL时，被那些晦涩难懂的着色器代码和复杂的缓冲区操作吓退了。相信很多前端开发者都有类似的经历——我们只是想快速实现一个酷炫的3D效果，却不得不面对底层API的复杂性。这正是Three.js存在的意义。

原生WebGL就像是一台需要手动组装的汽车，你必须了解每个零件的功能和组装方式。而Three.js则是一辆已经组装好的跑车，你只需要学会驾驶它。让我们看一个简单的对比：

原生WebGL绘制三角形需要：

编写顶点着色器和片元着色器
创建和绑定缓冲区
设置顶点属性指针
编译和链接着色器程序
处理矩阵变换

Three.js实现旋转立方体只需要：

创建场景、相机和渲染器
添加几何体和材质
设置动画循环

// Three.js核心代码示例 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();

提示：Three.js的API设计遵循"约定优于配置"原则，大多数情况下你只需要关注核心概念，而不必纠结于底层实现细节。

2. 十分钟快速入门：搭建你的第一个3D场景

2.1 环境准备

开始之前，我们需要准备好Three.js的运行环境。有三种主要方式引入Three.js：

CDN引入（最简单快捷）：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

npm安装（适合现代前端项目）：

npm install three

下载本地文件（适合离线开发）：可以从 Three.js官网下载最新版本

2.2 核心概念解析

Three.js的核心架构围绕几个基本概念构建：

概念	作用	类比
场景(Scene)	3D对象的容器	摄影棚
相机(Camera)	定义视图视角	摄像机
渲染器(Renderer)	将3D场景渲染到2D屏幕	摄影师
网格(Mesh)	几何体+材质的组合	演员
几何体(Geometry)	物体的形状	骨架
材质(Material)	物体的外观	皮肤

2.3 完整实现步骤

让我们一步步实现旋转立方体：

创建HTML骨架：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First Three.js App</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> <script src="app.js"></script> </body> </html>

编写JavaScript(app.js)：

// 初始化场景 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // 设置相机 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.MeshBasicMaterial({ color: 0x00ff00, wireframe: false }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 处理窗口大小变化 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // 动画循环 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.005; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();

3. 进阶技巧：让你的立方体更专业

3.1 添加真实感材质

基础的MeshBasicMaterial不受光照影响，我们可以使用更高级的材质：

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 }); // 添加光源 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 1, 1); scene.add(light);

3.2 性能优化技巧

重用几何体和材质：相同类型的物体应共享几何体和材质
使用BufferGeometry：比普通Geometry性能更好
合理控制帧率：非必要场景可以降低渲染频率

// 性能更好的BufferGeometry示例 const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array([ -1, -1, 1, // v0 1, -1, 1, // v1 1, 1, 1, // v2 -1, 1, 1 // v3 ]); geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

3.3 调试工具

Three.js提供了方便的调试工具——three.js/examples/jsm/libs/dat.gui.module.js，可以实时调整参数：

import { GUI } from 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/libs/dat.gui.module.js'; const gui = new GUI(); const cubeFolder = gui.addFolder('Cube'); cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2); cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2); cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2); cubeFolder.open();