如何使用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. 可能的原因在这篇文章中有解释，但我不理解。

- Mark Heckmann

Answer 1

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

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

- Mark Heckmann

---

需要注意的是，onUpdate函数是GSAP自带的函数，而不是Three.js的函数，为了清晰起见。 - 10000RubyPools

你在代码中硬编码了一个特定的顶点动画。你是否找到了一种方法来对一个对象的所有顶点进行动画处理？这正是我目前正在努力解决的问题，因为简单的forEach迭代似乎不起作用。 - phng