javascript – 如何使用TweenLite正确地动画/补间THREE.js中的一行？

我想使用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.原因可能在this post中解释,但我不明白.

解决方法:

我自己找到了解决方案：顶点上方被标记为需要更新,这在行line.geometry.verticesNeedUpdate = true;中发生一次.但是在顶点中的每次更改之后都需要设置此标志.这可以通过将更新行放在onUpdate函数中来实现.现在,每次更新顶点后都会调用该行.

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

标签：tweenlite,javascript,three-js
来源： https://codeday.me/bug/20190825/1716977.html