如何使用THREE.DeviceOrientationControls调整相机旋转的轴?

时间:2015-03-05 22:08:44

标签: javascript three.js device-orientation perspectivecamera

短篇小说:我正在尝试使用THREE.TrackballControls来移动相机,但是(颠倒的)x-z平面是x-y平面的位置。有人可以帮忙吗?

长篇故事:我一直在尝试将设备方向控件添加到项目中。我已经使用THREE.TrackballControls在使用鼠标和触摸时移动相机,并且相机指向的方向输入其他功能。我正在使用v69 of three.js。

所以,我一直在研究使用THREE.DeviceOrientationControls来启用设备方向。具体来说,我所追求的是当设备直立在我面前并且我转身时,旋转是在x-y平面上。或者换句话说,当设备面朝上时,它正朝向-ve z方向,而当它倒置时,它朝向+ ve z方向。听起来相当简单,对吗?

周围有很多例子可供遵循,但我似乎陷入了错误定位的轴,即我的x-y平面应该是x-z平面,但是倒置。我根据我发现的BoxGeometry立方体的示例创建了一个测试页面,然后将红色,黄色和蓝色球体分别添加到面对面的+ ve x-,y-和z-方向的中间,并且然后是对应-ve方向的相同颜色球体的苍白版本。在iPad上进行测试证实,场景轴和现实轴没有对齐。

我花了一些时间来试图掌握这个Object的工作方式,而主要的关键点在于setObjectQuaternion()返回的函数,它做了一些棘手的事情:

...
return function (quaternion, alpha, beta, gamma, orient) {
    euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
    quaternion.setFromEuler(euler); // orient the device
    quaternion.multiply(q1); // camera looks out the back of the device, not the top
    quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) );    // adjust for screen orientation
}
...

其中q1是围绕x轴旋转-pi / 2的四元数,zee是单位z轴向量。

我设置了一个jsfiddle here来帮助我调试这个,但它本身并没有在iPad上正确呈现,所以我不得不添加一些定位事件的伪造,以及大量的日志记录,并继续在普通桌面+控制台上。这个jsfiddle遍历6个基本方向中的每一个,看看相机是否朝着我期望的方向看。

(最初看起来围绕x轴的pi / 2旋转是必需的,但删除quaternion.multiply(q1)并不能解决它 - 我甚至没有开始查看非零屏幕方向尚未。)

最终,我想让它更像是TrackballControls / OrbitControls,它有一个目标点,相机总是看着(除非平移)并旋转,一旦我想出这个“简单”的东西。

任何人都有任何想法如何正确定位我的相机?

0 个答案:

没有答案