在 threejs 中沿路径或样条移动对象

Move an object along a path or spline in threejs

本文关键字：样条 移动 对象 路径 threejs      更新时间：2023-09-26

我正在尝试沿着 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 对象无法转换为对象的位置和方向，因此返回的位置/和切线是绝对位置。

我读过这个问题，它讨论了如何使用SplineCurve3沿着路径移动，但此解决方案没有解释如何构建由一组直线和圆弧构造的样条曲线。

你是怎么做到的？

对于直线运动，我认为您只需要一个方向和速度，然后您可以将其用作转换（在矩阵中或应用对象位置）。优点是您可以在此过程内轻松独立更改方向和速度。

// 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 angle 进行旋转。

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

这是你所追求的东西的工作小提琴。

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

相关文章：