眼瞅着马上就要过年了，公司里的小伙伴们也都三三两两的回家去了，就我还有几个天选打工人仍旧在搬砖房里面认真工(mo)作(yu),不过也刚好趁着这几天有空余时间，又可以打磨打磨我那蹩脚的Threejs功底，之前写过两篇比较基础入门的文章，算是简单了解了一下Threejs，这次做点小动效吧，简单的先试试手，至于写点啥，要过年了嘛，说到过年，现在真的没以前那么有意思，有盼头了，但唯独有一样，面对它的时候，大家脸上还是能绽放出发自肺腑的笑容的，那就是红包，无论是在各种群里面抢红包，还是小时候走亲戚收到长辈给的红包,我想每个人应该都挺开心的吧，那么今天，我们就做个漫天飞舞的红包吧

创建三要素

场景

相机

相机的位置选在了(0,0,50)主要是因为我们这个动效是正面去看的，没必要去仰望或者俯视它

渲染器并添加至页面中

创建缓冲对象

由于是要做多个红包的效果，第一个想到的就是每个红包作为一个独立的几何体，然后统统塞到一个Object3D对象里面去，但这也就想想，毕竟这样做太耗费性能，这里需要使用BufferGeometry缓冲几何体，用它来存储所有红包所对应的顶点数据，上代码

mCount是顶点的数量，我们这里定义为100个，然后在创建个Float32Array数组用来存放顶点的坐标，在for循环体内就是给坐标赋值的过程，分别在x,y,z轴的某个范围内取值，缓冲数据做好了之后，就将pos设置给缓冲对象BufferGeometry的position属性，我们缓冲对象就做好了

创建点对象

缓冲对象做好了之后就要将这些数据转换成能够看得见的粒子效果了，这里就要用到Three.Point对象，它的构造函数内部接收两个参数，一个就是刚才我们做好的缓冲对象，另一个就是点材质PointsMaterial

这里的点的大小稍微设置的大一些，因为一会还要显示红包纹理，现在暂时用色值来代替，实际效果如下

设置红包纹理

点的样式已经做好了，现在就要将红包纹理设置上去了，我们的红包纹理长这样

先将纹理加载器创建出来

然后去加载我们刚才找到的那张红包纹理图

最后将加载出来的纹理temptexture设置到点材质的map属性里面

我们现在就能看到一大堆红包出现在屏幕上了

接下来就要准备让这些红包动起来

安装Tween.js

要让这堆红包动起来，最简单有效的办法就是使用动画库Tween.js,先将库导入到项目中

由于是在TypeScript的项目中，所以还要安装@types/tween.js库，不然tween没法导入到项目中，完事了之后，我们将tween导入进来

创建动画的目标位置

Tween.js上手起来还是蛮简单的，只需要知道动画对象的起始位置坐标以及终止位置坐标，就可以让对象动起来，那么这里的起始位置就是我们粒子缓存起来的顶点位置，获取的方式如下

有了起始位置的坐标位置，那么终止位置的坐标如何设置呢？一个办法就是任意找一个几何对象，将它的顶点坐标取出来作为终止位置的坐标，但是不同几何对象的顶点数量不同，不能跟我们的红包数量一一对应起来，所以我们只能自己去创建终止位置的顶点坐标，这些坐标排列的方式呈矩形方式排列

同样也是生成了一个数组endpos用来存放终止位置的顶点坐标，然后矩型的长宽的大小就使用mCount开根号获得，得到的side就是矩形的边长，再通过长宽的嵌套遍历，得到顶点坐标的x,y值，z就默认为0，代表矩形刚好是贴着x轴的方向

开启动画

每个红包都会有一个动画效果，所以我们要从初始位置的顶点坐标里将每个坐标拿出来分别设置上tween动画

easing用来设置动画的速率变化规律，这里使用的是正弦缓动Sinusoidal,InOut表示动画开始快速，中期减速，后期缓慢，还有其余两个值

In:起始缓慢，中期加速，后期减速
Out:起始快速，中期减速，后期缓慢

repeat表示动画重复次数，delay表示动画延迟多少时间开始，单位是毫秒，onUpdate是动画在进行中的回调，我们在回调函数中开启实时更新顶点坐标，start表示开启动画,另外还需要去更新动画，不然就算开启了动画，界面上也不会有任何动画效果

那么一个红包从初始位置到终止位置的动画就做好了

我们发现虽然设置了repeat次数，但是每次动画完成之后，红包会瞬间回到初始位置，而不是从终止位置在反方向动画到初始位置，要做到这一点还需要再设置一个函数，函数名叫yoyo,起初我以为这个函数的命名是闹着玩的，后来一翻文档才发现，人家是正儿八经的正式成员，它的默认值是false,我们将它设置成true动画就能反方向进行了