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

Three.js extract rotation in radians from camera

本文关键字：为单位 旋转 提取 js 相机 Three      更新时间：2023-12-13

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

如果你知道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 );
}

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

如果设置

camera.rotation.order = "YXZ"

（默认值为"XYZ"）Euler角度对您更有意义：

rotation.y将是以弧度表示的摄像机航向

rotation.x将是以弧度为单位的相机间距

rotation.z将是相机的弧度

旋转将按该顺序应用。

three.js r.70

相关文章：