--- theme: smartblue --- # 本文简介 **点赞 + 关注 + 收藏 = 学会了**
还记得当初学 `CSS` 时，有点基础后立刻就想搞点动画出来玩一下。在了解了 [Three.js](https://juejin.cn/post/7101683178741432356) 的基础概念之后也有这个想法。简单的动画可以提高 `Three.js 初学者` 的学习兴趣和信心。本文会从初学者的角度出发讲解几个简单的动画，包括：平移、旋转、缩放、跳跃。

# 准备工作在开始制作动画前，需要把基础的元素创建出来，之后所有动画案例都是基于下面的代码。基础元素包括： 1. 场景 2. 摄像机 3. 渲染器 4. 立方体 5. 辅助坐标轴
![01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf2a6f7966224489a339483bed9dd98f~tplv-k3u1fbpfcp-watermark.image?) ```html ``` 此时页面就会出现一个坐标轴和一个黄色的立方体，接下来就控制这个立方体运动。如果对上面的代码还不太理解，可以先看看 [《『Three.js』起飞！》](https://juejin.cn/post/7101683178741432356) ，坐标轴方面可以看看 [《『Three.js』辅助坐标轴》](https://juejin.cn/post/7102077070418640932) 。

# 动画原理这里讲的动画主要是指物体运动的效果。第一个想到运动有关的 `API` 是 `setInterval` ，这个 `API` 可以设定每隔一定时间段就执行一次。比如 `setInterval(() => {}, 1000)` ，就1秒执行1次里面的函数。但 `setInterval` 在做动画时可能会遭遇阻塞的情况。所以不能保证每次执行的时间间隔都相同。于是推荐使用 `requestAnimationFrame()` 。
最简单的动画就是每一帧动一下，比如平移、旋转、缩放等。

# 平移平移可以理解成改变物体的位置。在三维世界里，用 `x、y、z` 代表三个维度。只要在每一帧都移动一下，不管是哪个维度都行，就可以做出一个平移动画。
比如，做一个以 `x轴` 方向的动画（来回移动）。 ![02.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e8eb8b00b7043db9809f05fc3d2010c~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码...... // 注释掉原本的渲染方法，我们需要另外写一个。 // renderer.render(scene, camera) let step = 0 // 运动步长 function render() { if (cube.position.x >= 4) { step = -0.08 } if (cube.position.x <= 0) { step = 0.08 } cube.position.x += step // 修改立方体在 x轴的位置 renderer.render(scene, camera) requestAnimationFrame(render) // 重复执行渲染方法 } render() ```
如果想做变速动画，可以使用 `cos` 计算新的步长。 ![03.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d52f65bf1b643e3878a1d7a3e1a4e64~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码...... // 注释掉原本的渲染方法，我们需要另外写一个。 // renderer.render(scene, camera) let step = 0 // 运动步长 function render() { step += 0.1 cube.position.x = 2 + Math.cos(step) renderer.render(scene, camera) requestAnimationFrame(render) // 重复执行渲染方法 } render() ```

# 旋转旋转也是可以根据 `x、y、z` 轴方向进行旋转。修改到的属性是 `rotation` 。
![04.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eccf3563aa5945c8a9224b8086856ca6~tplv-k3u1fbpfcp-watermark.image?) ```js function render() { cube.rotation.x += 0.01 cube.rotation.y += 0.01 cube.rotation.z += 0.01 renderer.render(scene, camera) requestAnimationFrame(render) } render() ```

# 缩放缩放也是有3个维度方向，同样也很简单，只需要修改立方体的 `scale` 属性。
![05.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf6bd805b5834a25864151c51251d5e6~tplv-k3u1fbpfcp-watermark.image?) ```js let step = 0.05 function render() { cube.scale.x += step cube.scale.y += step cube.scale.z += step if (cube.scale.x >= 2) { step = -0.05 } if (cube.scale.x <= 1) { step = 0.05 } renderer.render(scene, camera) requestAnimationFrame(render) } render() ```

# 跳跃跳跃需要改变2个维度的值。为了让跳跃效果更加舒服，可以使用三角函数去计算步长。
![06.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bdafad58e01745d4933ee877c1b8652b~tplv-k3u1fbpfcp-watermark.image?) ```js let step = 0 function render() { step += 0.08 cube.position.x = 4 * (Math.cos(step)) cube.position.y = 3 * Math.abs(Math.sin(step)) renderer.render(scene, camera) requestAnimationFrame(render) } render() ```

# 总结 **数学很重要！**

# 代码仓库 ⭐[几个Three.js简单动画](https://gitee.com/k21vin/three-study-demo/tree/master/08%E5%8A%A8%E7%94%BB)

# 推荐阅读 👍[《『Three.js』起飞！》](https://juejin.cn/post/7101683178741432356) 👍[《『Three.js』辅助坐标轴》](https://juejin.cn/post/7102077070418640932) 👍[《『Three.js』场景 Scene》](https://juejin.cn/post/7107272960754319397) 👍[《Canvas 从入门到劝朋友放弃（图解版）》](https://juejin.cn/post/7116784455561248775) 👍[《Canvas 10款基础滤镜（原理篇）》](https://juejin.cn/post/7119893640264024071)
**点赞 + 关注 + 收藏 = 学会了**