Three.js相机控制空间游戏

在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 targetObject的问题。

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

这里需要注意的重要一点是四元数不像Euler矢量那样起作用。 与其将两个四元数加在一起以获得新角度，不如将它们相乘。

无论如何，我希望这有助于你！

链接地址: http://www.djcxy.com/p/83217.html

上一篇: Three.js camera controls for space game

下一篇: Login website using linkedin with the help of passport.js