三个 JS 将模型旋转到 xyz 位置

Question

我正在尝试将 Three JS 中的对象旋转到 space 中的固定 xyz 位置。目前我可以这样实现：

var position_x  = -0.85;
var position_z  = -4.44;

model.lookAt(position_x, 0, position_z);

但是 lookAt() 函数会立即旋转模型，我想更慢地旋转模型。有没有办法使用内置的三个 JS 函数来完成此操作？

谢谢！

Answer 1

Is there a way to accomplish this using built in Three JS functions?

是的，您可以使用 Quaternion.rotateTowards()，其工作方式类似于 Unity 的 Quaternion.rotateTowards() 方法。

这个想法是计算一个由四元数表示的目标方向。您可以使用 Matrix4.lookAt() 执行此操作，然后通过 Quaternion.setFromRotationMatrix().

基于此矩阵创建四元数

接下来，您计算每帧的 angular 步长，这将定义您的对象转向目标的程度。 step 的计算如下所示：

const step = speed * delta;

delta 是以秒为单位的时间增量值，speed 代表我们模型的转弯速率，以每秒弧度为单位。

此处提供了完整的代码示例：

Three JS rotate model towards xyz position