返回

踏上 three.js 之旅：旋转动画和 requestAnimationFrame 周期性渲染指南

前端

three.js 快速入门：新手指南，掌握旋转动画与 requestAnimationFrame 周期性渲染

前言

当今市场上，大量 WebGL 开发的前端页面都离不开动画，比如商品展示页面的商品放大和旋转效果。如果没有动画需求，可以直接让 UI 出图或使用 canvas(2d) 实现，还可以减轻浏览器的负担。

然而，对于更复杂的动画需求，WebGL 无疑是最佳选择。它不仅能充分利用 GPU 的能力，还能带来更流畅、更逼真的动画效果。three.js 是一个用于 WebGL 的 JavaScript 库，为开发人员提供了丰富的功能和 API，使其能够轻松构建交互式 3D 场景。

旋转动画：让物体动起来

在 three.js 中，我们可以使用 rotateX()、rotateY() 和 rotateZ() 方法对对象进行旋转。这些方法接收一个弧度值作为参数，表示沿特定轴旋转的角度。

// 围绕 X 轴旋转 45 度
object.rotation.x = Math.PI / 4;

// 围绕 Y 轴旋转 90 度
object.rotation.y = Math.PI / 2;

// 围绕 Z 轴旋转 180 度
object.rotation.z = Math.PI;

requestAnimationFrame：周期性渲染

为了使动画平滑流畅，我们需要周期性地重新渲染场景。requestAnimationFrame() 方法是一个浏览器 API，它会在浏览器刷新之前调用指定的回调函数。

function animate() {
  // 更新场景中对象的旋转或其他属性

  // 重新渲染场景
  renderer.render(scene, camera);

  // 请求下一次动画帧
  requestAnimationFrame(animate);
}

// 开始动画循环
requestAnimationFrame(animate);

总结

通过掌握旋转动画和 requestAnimationFrame 周期性渲染，我们已经踏出了 three.js 之旅的第一步。这些基本技能为我们提供了创建交互式 3D 场景的坚实基础。在后续的教程中，我们将深入探讨 more advanced concepts 更多的进阶概念，例如灯光、材质、相机控制等等。

延伸阅读