从相机弧度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，你可能熟悉equirectangular全景视频的例子。我一直试图做的是简单地提取摄像机的转动在我理解的格式的任何特定的时刻（弧度，度...）为每个轴。从理论上讲，应该不是我可以简单地进军相机的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.

现在，这个例子没有使用可用的控制脚本之一。相反，它创建了一个向量计算镜头的目标来看待。下面是摄像头code是这样的：

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.x 将弧度相机间距

rotation.z 将弧度的相机胶卷

的旋转将按照这个顺序进行应用。

The rotations will be applied in that order.

three.js R.70

three.js r.70

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