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 charsetutf-8 title我的第一个3D立方体/title style body { margin: 0; overflow: hidden; } canvas { display: block; } /style /head body script typemodule import * as THREE from https://cdn.skypack.dev/three0.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-1far最远渲染距离根据场景大小调整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基础材质不受光照影响MeshStandardMaterialPBR材质支持金属度和粗糙度MeshPhongMaterial高光材质适合塑料类表面动画循环让立方体旋转起来Three.js的动画原理是利用浏览器的requestAnimationFrame APIfunction 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/three0.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的官方示例库提供了数百个案例从简单的几何体到复杂的光影效果应有尽有。当你成功运行第一个立方体后这些高级功能的学习曲线将变得平缓许多。