Three.js 从相机中提取弧度旋转 [英] Three.js extract rotation in radians from camera

问题描述

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

I've been struggling for a while with the concepts of quaternions and I think that it may have something to do with this particular challenge.

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

If you know three.js, you may be familiar with the equirectangular panorama video example. What I've been trying to do is to simply extract the camera's rotation at any given moment in a format that I understand (radians, degrees...) for each axis. In theory, shouldn't I be able to simply tap into the camera's rotation.x/y/z parameters to find those out? I'm getting strange values, though.

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

我在左上角输出相机的 xyz 旋转值，而不是预期值，数字在正值和负值之间反弹.

I'm outputting the camera's xyz rotation values at the upper left corner and instead of expected values, the numbers bounce around between positive and negative values.

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

Now, this example doesn't use one of the control scripts that are available. Rather, it creates a vector to to calculate a camera target to look at. Here's what the camera code looks like:

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 );

}

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

Does anybody know what these strange values are that I'm getting and how I can extract proper rotation values that I can then use on another object to mirror the motion?

推荐答案

如果你设置了

camera.rotation.order = "YXZ"

(默认为XYZ")欧拉角对你来说更有意义:

( the default is "XYZ" ) the Euler angles will make a lot more sense to you:

rotation.y 将以弧度为单位的相机航向

rotation.y will be the camera heading in radians

rotation.x 将以弧度为单位的摄像机间距

rotation.x will be the camera pitch in radians

rotation.z 将以弧度为单位的相机胶卷

rotation.z will be the camera roll in radians

将按该顺序应用旋转.

three.js r.70

three.js r.70

这篇关于Three.js 从相机中提取弧度旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！