在一个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沿着它的新轴角度移动它。
这里需要注意的重要一点是,四元数的作用不像欧拉向量。与其把两个四元数相加得到一个新的角度,不如把它们相乘。
不管怎样,我希望这对你有所帮助!