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补间多个对象的顶点

1 个答案: