[GET]ThreeJS + TweenJS模拟微信跳一跳粒子效果

上接翻转移动动画文章。

在下在实现移动动画的基础上，又去尝试了一下使用ThreeJS实现粒子效果，其过程异常头大。

这个是微信里的特效

设计思路

• 生成粒子
• 设置位置
• 控制粒子移动

错误示范

通过错误示范，可以看到所生成的红色粒子，没有按照预想的状态去移动，而是产生了自己的移动方式。

之所以会出现这种情况，是因为在此之前在下没有考虑坐标系的缘故，将场景中所有方块的坐标系统一认定为世界坐标（粒子绑定在Player身上）。

之后在下在了解了以下坐标系以后，对整个代码进行了修整。

正确示范

首先是创建粒子，创建8个粒子，并且给定初始位置

这里的位置并没有选择用随机，因为考虑最后的实现效果
在下在类外面定义了一个常量数组，用来存储固定的粒子位置

• this.geometry.vertices 用于存储粒子的位置
• this.particles 粒子的节点

// 创建粒子
    CreatorParticles() {
        this.geometry = new THREE.Geometry();
        let vertext = null;
        for (let i = 0; i < 8; i++) {
            vertext = new THREE.Vector3(pos[i][0],pos[i][1],pos[i][2]);
            this.geometry.vertices.push(vertext);
        }
        let loader = new THREE.TextureLoader();
        let sprite = loader.load('./img/brick1.jpg');
        let color = [1, 0, 0];
        let size = 1;
        let pointsMaterial = new THREE.PointsMaterial({
            size: size,
            map: sprite,
            depthTest: false,
            transparent: true,
            opacity: 1.0,
            blending: THREE.AdditiveBlending
        });
        pointsMate