如何使用TweenLite正確地動畫/補間THREE.js中的一行？

Question

我想使用THREE.JS和TweenLite補間3D線。 但是，適用於例如球體位置的方法在這里不起作用。 我不知道為什么。

            // 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。 原因可能會在這篇文章中解釋，但我不明白。

Answer 1

我自己找到了解決方案：頂點上方被標記為需要更新，這在行line.geometry.verticesNeedUpdate = true;發生一次line.geometry.verticesNeedUpdate = true; 。 但是在頂點中的每次更改之后都需要設置此標志。 這可以通過將更新行放在onUpdate函數中來實現。 現在，每次更新頂點后都會調用該行。

target.onUpdate = function () {
   line.geometry.verticesNeedUpdate = true;
};