短篇小说:我正在尝试使用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,它有一个目标点,相机总是看着(除非平移)并旋转,一旦我想出这个“简单”的东西。
任何人都有任何想法如何正确定位我的相机?