Javascript Three.js从摄影机提取以弧度为单位的旋转

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

如果您了解three.js，您可能会熟悉Equirectangle panorama视频示例。我一直试图做的是简单地提取相机在任何给定时刻的旋转，以我理解的格式（弧度，度…）为每个轴。从理论上讲，难道我不应该简单地点击相机的rotation.x/y/z参数来找出它们吗？不过，我得到了奇怪的值

看看这个例子：

我在左上角输出相机的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 );

}

有人知道我得到的这些奇怪的值是什么，以及我如何提取适当的旋转值，然后在另一个对象上使用这些值来镜像运动吗？

如果设置

camera.rotation.order = "YXZ"

（默认值为“XYZ”）Euler角度对您来说更有意义：

rotation.y

将是以弧度为单位的相机航向

rotation.x

将是以弧度为单位的摄影机俯仰

rotation.z

将以弧度为单位显示摄影机滚动

旋转将按该顺序应用

---

three.js r.70

谢谢，我想我理解euler订单背后的含义，但当我试图在现实生活中应用它们时，我的大脑过热了……我听到了。了解Euler angles在three.js中如何工作的最好方法是按照您所做的那样构建一个测试平台并进行实验。