Three.js 从相机中提取弧度旋转

Question

我一直在为四元数的概念苦苦挣扎，我认为这可能与这个特殊的挑战有关。

如果您了解three.js，您可能熟悉equirectangular 全景视频示例。我一直在尝试做的是在任何给定时刻以我理解的每个轴的格式（弧度，度数......）简单地提取相机的旋转。理论上，我不应该能够简单地利用相机的 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”）欧拉角对你来说会更有意义：

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

rotation.x 将以弧度表示相机间距

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

将按该顺序应用旋转。

three.js r.70