Three.js + Tween.js 补间多个对象的顶点

Question

我正在使用 three.js 创建多个 BoxGeometries 并使用 tween.js 为几何体的所有顶点设置动画。

起初所有的立方体都应该随机变形，直到我调用 stopTweens()。然后所有的顶点应该回到它们的默认位置。

我的问题是，只有最后一个立方体在视觉上被重置。其他人也补间了，但似乎 verticesNeedUpdate 未设置为 true，因此屏幕上没有任何反应。

这是我的代码：

var scene_03_TweenArr = [];

创建立方体的函数：

function createCubes(){

for (i = 0; i < 10; i++) {
    var CubeGeometry = new THREE.BoxGeometry( 4, 4, 4, 5, 5, 5 );
    var CubeMaterial = new THREE.MeshPhongMaterial( {color: 0xffffff} );
    var cube = new THREE.Mesh( CubeGeometry, CubeMaterial );
    scene_03.add( cube );
    cube.position.x = -40+5*i;
    tt_animate_vertices(cube);
    }

}

随机动画立方体的函数：

function tt_animate_vertices(object) {

for( j = 0; j < object.geometry.vertices.length; j++ ){

    var previousX = object.geometry.vertices[j].x;
    var previousY = object.geometry.vertices[j].y;
    var previousZ = object.geometry.vertices[j].z;


    var tween = new TWEEN.Tween(object.geometry.vertices[j]);
    tween.to({ x: (0.25*Math.random()+1)*previousX, y: (0.25*Math.random()+1)*previousY, z: (0.25*Math.random()+1)*previousZ }, 5000 + Math.random()*5000);

    var tween2 = new TWEEN.Tween(object.geometry.vertices[j]);
    tween2.to({ x: previousX, y: previousY, z: previousZ }, 5000 + Math.random()*5000);

    tween.onUpdate(function(){
        object.geometry.verticesNeedUpdate = true;
    });

    tween2.onUpdate(function(){
        object.geometry.verticesNeedUpdate = true;
    });

    tween.chain(tween2);
    tween2.chain(tween);

    tween.start();

    var verticeTween = [object, tween, tween2, j, previousX, previousY, previousZ  ];

    scene_03_TweenArr.push(verticeTween);

}
}

停止补间并将立方体顶点重置为默认值的函数：

function stopTweens(){

for (let k = 0; k < scene_03_TweenArr.length; k++) {
    scene_03_TweenArr[k][1].stop();
    scene_03_TweenArr[k][2].stop();

    var object = scene_03_TweenArr[k][0];
    var index = scene_03_TweenArr[k][3];
    var prevX = scene_03_TweenArr[k][4];
    var prevY = scene_03_TweenArr[k][5];
    var prevZ = scene_03_TweenArr[k][6];

    var tween = new TWEEN.Tween(object.geometry.vertices[index]);
    tween.to({x: prevX, y: prevY, z: prevZ }, 300)

    tween.onUpdate(function(){
        object.geometry.verticesNeedUpdate = true;
    });

    tween.start();

    object.geometry.verticesNeedUpdate = true;

}   
}

在这里，我设法在 JSFiddle 中以相同的行为实现了运行：

http://jsfiddle.net/gfhyvou3/25/

Answer 1

根据我的经验，当您使用数组时，最好在循环内使用 let 关键字。

function stopTweens(){

    for (let k = 0; k < scene_03_TweenArr.length; k++) {
        scene_03_TweenArr[k][1].stop();
        scene_03_TweenArr[k][2].stop();

        let object = scene_03_TweenArr[k][0];
        let index = scene_03_TweenArr[k][3];
        let prevX = scene_03_TweenArr[k][4];
        let prevY = scene_03_TweenArr[k][5];
        let prevZ = scene_03_TweenArr[k][6];

        var tween = new TWEEN.Tween(object.geometry.vertices[index]);
        tween.to({x: prevX, y: prevY, z: prevZ }, 300)

        tween.onUpdate(function(){
            object.geometry.verticesNeedUpdate = true;
        });

        tween.start();

        object.geometry.verticesNeedUpdate = true;

    }   
}

Three.js + Tween.js 补间多个对象的顶点

Three.js + Tween.js tweening vertices of multiple objects

three.js

tween.js