Three.js + Tween.js анимация вершин нескольких объектов - PullRequest
Новая
       56

Three.js + Tween.js анимация вершин нескольких объектов

0 голосов
/ 28 июня 2018

Я использую 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/

1 Ответ

0 голосов
/ 29 июня 2018

Из моего опыта лучше использовать ключевое слово 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;

    }   
}
...