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();

结果 :没有任何 react 。为什么？

附注。原因可能在 this post 中有解释，但我不明白。

最佳答案

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

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

关于javascript - 如何使用 TweenLite 在 THREE.js 中正确设置动画/补间线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21665644/