用于太空游戏的Three.js相机控件

Three.js camera controls for space game

本文关键字：js 相机 控件 Three 太空 游戏 用于      更新时间：2024-01-08

在一个three.js项目中，我使用了PointerLockControls.js的修改版本作为相机控件。我想修改旋转功能，这样相机就不会有绝对的"上"轴旋转，而是向上或向下移动鼠标会无限期地倾斜，左右摇摆（滚动键）也是如此。

我似乎无法让偏航部件工作，因为它似乎绕着同一轴旋转，而不管俯仰如何。

任何正确方向的帮助都将是伟大的！

我最近也遇到了同样的问题，所以我查看了一些与您类似的THREE.*控件文件。

以此为基础，我做出了以下结论：https://github.com/squarefeet/THREE.ObjectControls

重要的位如下（上下文请参见此处）：

var updateTarget = function( dt ) {
    var velX = positionVector.x * dt,
        velY = positionVector.y * dt,
        velZ = positionVector.z * dt;
    rotationQuaternion.set(
        rotationVector.x * dt,
        rotationVector.y * dt,
        rotationVector.z * dt,
        1
    ).normalize();
    targetObject.quaternion.multiply( rotationQuaternion );
    targetObject.translateX( velX );
    targetObject.translateY( velY );
    targetObject.translateZ( velZ );
};

rotationVector可能是你最感兴趣的，所以它正在做什么：

  • 它使用THREE.Vector3来描述旋转，在这个例子中是rotationVector变量。

  • rotationVector的每个分量（x、y、z）分别与俯仰、偏航和滚转有关。

  • 将四元数的x、y和z值设置为旋转向量的值，确保w分量始终为1（要了解w分量的作用，请参阅此处，这是一个很好的答案。

  • 对这个四元数进行归一化将得到一个长度为1的四元数，这在我们进入下一步时非常方便。。。

  • 在这种情况下，targetObject是THREE.Object3D（THREE.Mesh，继承自THREE.Object3D）的一个实例，因此它有一个我们可以使用的四元数。

  • 现在，只需要将targetObject的四元数乘以闪亮的新rotationQuaternion。

  • 由于我们的对象现在被旋转到我们想要的位置，我们可以使用translateX/Y/Z沿着它的新轴角度移动它。

这里需要注意的重要一点是，四元数的作用不像欧拉向量。与其把两个四元数相加得到一个新的角度，不如把它们相乘。

不管怎样，我希望这对你有所帮助！

相关文章：