Three.js - 通过 Tween.js 维护粒子位移

使用Tween.js可以一个属性在两个状态之间不断切换，因此，如果让两个粒子系统在特定的时间内不断的切换，就是可以实现一些特效。

示例：

https://ithanmang.gitee.io/threejs/home/201808/20180830/02-animation-tween-particle.html

步骤一

示例中，从外部json文件中加载进来了两个Gepmetry对象

let loader = new THREE.JSONLoader();
loader.load('../../models/json/Male02_dds.json', function (obj) {
   

    // 平移所有点的 y
    obj.applyMatrix(new THREE.Matrix4().makeTranslation(0, -80, 0));
    obj1 = obj;
    if (obj1 && obj2 && !loaded) {
   

        loaded = true;
        addPartice(obj1, obj2);
        document.getElementById('loading').style.display = 'none';
    }

});
loader.load('../../models/json/Female02_slim.json', function (obj) {
   
    obj.applyMatrix(new THREE.Matrix4().makeTranslation(0, -80, 0));
    obj2 = obj;

    if (obj1 && obj2 && !loaded) {
   

        loaded = true;
        addPartice(obj1, obj2);
        document.getElementById('loading').style.display = 'none';
    }

});

步骤二

然后创建通过外部模型创建了两个粒子系统，并给粒子自定义颜色

let geometry = new THREE.Geometry();

let pos = position1[i];

geometry.vertices.push(new THREE.Vector3());

let color = new THREE.Color();

color.r = pos.x / 10;
color.g = pos.y / 10;
color.b = pos.z / 10;

let material = new THREE.PointsMaterial({
   
    color: color,
    blending: THREE.AddEquation,
    depthTest: false,
    transparent: true
});

let particle = new THREE.Points(geometry, material);

步骤三

创建两个补间动画对象，在0到1之间过渡，并使之首尾相连到一起。

/* 创建补间动画 */
let pos = {
   val: 1};

tween = new TWEEN.Tween(pos).to({
   val: 0}, 5000);
tween.easing(TWEEN.Easing.Quadratic.InOut).delay(1000).onUpdate(callback);

tweenBack = new TWEEN.Tween(pos).to({
   val: 1}, 5000);
tweenBack.easing(TWEEN.Easing.Quadratic.InOut).delay(1000).onUpdate(callback);

tween.chain(tweenBack);
tweenBack.chain(tween);
tween.start();

在动画的更新过程中改变粒子的位置，以及颜色。

/* 粒子位移的回调函数 */
function callback() {
   

    let val