首页 文章

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

提问于
浏览
0

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

如果你知道three.js,你可能熟悉equirectangular全景视频示例 . 我一直试图做的是在任何给定时刻以我理解的格式(弧度,度......)为每个轴简单地提取相机的旋转 . 理论上,我不应该只是简单地利用相机的rotation.x / y / z参数来找出那些?不过,我的 Value 观很奇怪 .

看看这个例子: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 );

}

有没有人知道我得到的这些奇怪的值是什么以及如何提取正确的旋转值然后我可以在另一个物体上使用它来反映运动?

1 回答

  • 2

    如果你设置

    camera.rotation.order = "YXZ"
    

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

    rotation.y 将是以弧度为单位的摄像机

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

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

    旋转将按此顺序应用 .

    three.js r.70

相关问题