как правильно анимировать/анимировать линию в THREE.js с помощью TweenLite?

Я хочу анимировать 3D-линию, используя THREE.JS и TweenLite. Но подход, который хорошо работает, например. положение шара здесь не работает. Я не знаю почему.

            // add a line to the scene using THREE.js
            var geometry = new THREE.Geometry();
            geometry.vertices.push(new THREE.Vector3(0, 0, 0));
            geometry.vertices.push(new THREE.Vector3(500, 500, 500));
            var line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
            scene.add( line );  

            // using TweenLite to animate
            var tl = new TimelineLite();          
            var target = { x: 0, y: 0, z:0 };
            line.geometry.verticesNeedUpdate = true;
            tl.add(TweenLite.to(line.geometry.vertices[1] , 1, target));
            tl.play();

Результат: ничего не происходит. Почему?

PS. Причина может быть объяснена в этом сообщении, но я этого не понимаю.


javascript gsap three.js
person Mark Heckmann    schedule 09.02.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Сам нашел решение: выше вершина помечена как нуждающаяся в обновлении, что происходит один раз в строке line.geometry.verticesNeedUpdate = true;. Но этот флаг нужно устанавливать после каждого изменения в вершине. Этого можно добиться, поместив строку обновления в функцию onUpdate. Теперь линия будет вызываться после каждого обновления вершины.

target.onUpdate = function () {
   line.geometry.verticesNeedUpdate = true;
};
person Mark Heckmann    schedule 11.02.2014
comment
Следует отметить, что для ясности функция onUpdate поставляется с GSAP, а не с Three.js. - person 10000RubyPools; 20.12.2018
comment
Вы жестко закодировали анимацию для одной конкретной вершины. Вы также нашли способ анимировать все вершины объекта? Это то, с чем я борюсь, потому что простая итерация forEach не работает. - person phng; 04.07.2019