将对象移动到另一个对象，在tween.js中创建动画

Question

我有一个对象是一条线。我想用一个移动线的所有顶点的对象制作一个动画，它可以是一个球体。为此，我将使用tween.js。我的问题是我无法实现其所有顶点动画。如何让动画从起点到终点显示？我有这段代码：

//myline.geometry.vertices  -> array with vertices of the line (1000 vertices for example)
//myline.geometry.vertices[0]=>x:1,y:2:z:0;
//myline.geometry.vertices[1]=>x:3,y:5:z:0;
//...
new TWEEN.Tween( mysphere.position ).to( { x: myline.geometry.vertices[0].x, y: myline.geometry.vertices[0].y, z: myline.geometry.vertices[0].z }, 9000 ).to( { x: myline.geometry.vertices[1].x, y: myline.geometry.vertices[1].y, z: myline.geometry.vertices[1].z }, 9000 ).delay(2000).start(); 

我使用“.to”方法并且效果很好，如果我将顶点移动到我要移动的位置。但如果我有1000个顶点，我将不得不把它们全部放入。我能做什么？。 。我需要沿着一条线移动一个球体。

Answer 1

您可以简单地创建一个循环，指定每个顶点的过渡。您还需要将球体的位置设置为前一个顶点，否则将缓存位置，并且每个补间将在执行循环之前从球体的位置开始。此外，由于这些补间在循环内执行得如此之快，因此您需要指定延迟，以便转换可以在正确的时间开始。

// Get the vertices for each line.
var vertices = line.geometry.vertices;
// Specify the duration for each tween.
var duration = 500;
// Iterate through each vertex in the line, starting at 1.
for (var i = 1, len = vertices.length; i < len; i++) {
    // Set the position of the sphere to the previous vertex.
    sphere.position.copy(vertices[i - 1]);
    // Create the tween from the current sphere position to the current vertex.
    new TWEEN.Tween(sphere.position).to(vertices[i], duration).delay(i * duration).start();
}