javascript - Three.js 从相机中提取以弧度为单位的旋转

Question

我已经在四元数的概念上苦苦挣扎了一段时间，我认为这可能与这个特殊的挑战有关。

如果您了解 Three.js，您可能会熟悉等距柱状全景视频示例。我一直在尝试做的就是简单地以我理解的格式(弧度、度数...)提取每个轴在任何给定时刻的相机旋转。理论上，我是否应该能够简单地利用相机的rotation.x/y/z 参数来找出这些参数？不过，我得到了奇怪的值。

看看这个例子: http://www.spotted-triforce.com/other_files/three/test.html

我在左上角输出相机的 xyz 旋转值，这些数字不是预期值，而是在正值和负值之间跳动。

现在，此示例不使用可用的控制脚本之一。相反，它创建一个向量来计算要查看的相机目标。相机代码如下所示:

function init() {
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
  camera.target = new THREE.Vector3( 0, 0, 0 );
}

function onDocumentMouseDown( event ) {

  event.preventDefault();
  isUserInteracting = true;

  onPointerDownPointerX = event.clientX;
  onPointerDownPointerY = event.clientY;

  onPointerDownLon = lon;
  onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

  if ( isUserInteracting === true ) {

    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

  }
}

function onDocumentMouseUp( event ) {
  isUserInteracting = false;
}

function update() {

  lat = Math.max( - 85, Math.min( 85, lat ) );
  phi = THREE.Math.degToRad( 90 - lat );
  theta = THREE.Math.degToRad( lon );

  camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
  camera.target.y = 500 * Math.cos( phi );
  camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

  camera.lookAt( camera.target );

}

有谁知道我得到的这些奇怪的值是什么以及如何提取正确的旋转值，然后将其用于另一个对象来镜像运动？

Answer 1

如果你设置了

camera.rotation.order = "YXZ"

(默认为“XYZ”)欧拉 Angular 对您来说更有意义:

rotation.y 将以弧度表示的相机方向

rotation.x 将以弧度为单位的相机俯仰 Angular

rotation.z 将以弧度表示的相机胶卷

轮换将按该顺序应用。

三.js r.70