沿着三个路径或样条曲线移动对象

Question

我试图沿Three.js中的路径移动一个对象.我想以"构造"的方式构建路径,使用这样的Path对象:

var path = new THREE.Path([
    new THREE.Vector2(0, 0),
    new THREE.Vector2(0, inDistance)
]);

path.arc(arcRadius, 0, arcRadius,
    Geo.rad(180), Geo.rad(90), true);

path.lineTo(arcRadius + outDistance, arcRadius + inDistance);

然后我可以使用path.getPoint(t)并path.getTangent(t)获取我的对象的更新位置:

    let position = path.getPoint(percentTraveled);
    let tangent = path.getTangent(percentTraveled);

    state.model.position.x = position.x;
    state.model.position.y = position.y;

这有两个问题:

• 路径仅为2D
• Path对象无法转换为对象的位置和方向,因此返回的位置和切线是绝对位置.

我已经阅读了这个问题,它讨论了如何使用a SplineCurve3沿路径移动,但是这个解决方案并没有解释如何构建一个由一组线和弧构成的样条.

你是怎样做的？

Answer 1

对于直线运动,我认为您需要的只是方向和速度,然后您可以将其用作变换(在矩阵中或应用您的对象位置).优点是您可以在此过程中轻松地单独更改方向和速度.

// direction vector for movement
var direction = new THREE.Vector3( 1, 0, 0 );

// scalar to simulate speed
var speed = 0.5;

var vector = direction.multiplyScalar( speed, speed, speed );
object.x += vector.x;
object.y += vector.y;
object.z += vector.z;

这是一个小提琴,以证明这一点,并愚弄...

对于一个更加花哨的运动,比如你可以按照你的建议去做一条路.您可能遇到的一个问题是路径和形状总是在2D中定义.因此,为了能够在计算中使用向量,您应该始终将它们设置为3D向量(简单地设置z = 0).要使运动相对,您应该计算差异.最简单的方法是跟踪先前的位置和先前的角度,并使用delta x和delta y进行平移,使用delta角进行旋转.

deltaX = point.x - previousPoint.x;
deltaY = point.y - previousPoint.y;
deltaAngle = angle - previousAngle;

这是一个你正在追求的事情的工作小提琴.

我让一个盒子在绝对路径上移动而另一个移动相对