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

Question

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

如果您知道 three.js，您可能熟悉等距柱状全景视频示例。我一直在尝试做的是在任何给定时刻以我理解的格式（弧度、度...）为每个轴简单地提取相机的旋转。从理论上讲，我不应该能够简单地利用相机的旋转。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

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

Three.js extract rotation in radians from camera

javascript

3d

three.js