沿另一个对象移动一个对象在 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();
}

沿另一个对象移动一个对象在 tween.js 中创建动画

move an object along another creating a animating in tween.js

javascript

animation

tween.js