three.js / web-vr-boilerplate / polyfill - HMD 到受控对象：轴重新映射也不会重新映射旋转顺序/规则答案

【问题标题】：three.js / web-vr-boilerplate / polyfill - HMD to controlled object:Axis re-mapping does not re-map also rotation order/rulesthree.js / web-vr-boilerplate / polyfill - HMD 到受控对象：轴重新映射也不会重新映射旋转顺序/规则
【发布时间】：2015-10-18 16:56:36
【问题描述】：

我正在使用您的 webvr-boilerplate 并尝试将其映射到人脸网格。

我的做法是：

1) 将相机连接到眼骨

主 js 脚本：

//add camera to eye
mesh.skeleton.bones[ 22 ].add(camera);

//resets camera rotation
camera.rotation.set(0,0,0);

//looks at mesh up direction to face front
camera.lookAt( mesh.up );

//moves camera to middle of eyes 
camera.position.set(10,10,0);

2) 更改 webvr-manager.js 以更新颈骨（在初始化时作为参数传递）位置和旋转，在 index.php 中我交换轴以将 HMD 的轴与骨骼的轴匹配：

webvr-manager.js：

if ( state.orientation !== null ) {

     object.quaternion.copy( state.orientation );

 }

if ( state.position !== null ) {

     object.position.copy( state.position ).multiplyScalar( scope.scale );

 }

主 js 脚本：

 /* INSIDE UPDATE CYCLE */

// mesh.rotation.y+=0.1;
controls.update();

//resets bone position to default
mesh.skeleton.bones[ neckVRControlBone ].position.set(neckInitPosition.x,neckInitPosition.y,neckInitPosition.z) ;


//ROTATION SWAP
mesh.skeleton.bones[ neckVRControlBone ].rotation.x = pivot.rotation.y;

mesh.skeleton.bones[ neckVRControlBone ].rotation.y = - pivot.rotation.z;

mesh.skeleton.bones[ neckVRControlBone ].rotation.z = - tempRotation;

2015 年 10 月 28 日更新：

为了简化并且经过一些额外的调试后意识到不是钳位问题..

重述的问题是：

将 VR 控件映射到具有不同 HMD/Cardboard 轴配置的对象并保持正确的旋转规则。对象轴示例： * x - 向上 * y - 深度 * z - 边

只需交换旋转 object .rotation.x = object .rotation.z 的结果是，在更新控件后，向一侧旋转会在 45º 后产生不希望的旋转。

每个轴的旋转规则不同：

x 旋转直到 PI，然后反转信号并沿原来的方向不断变化；
y 旋转到 PI/2 后反转方向（增加时开始减少）
z 等于 x。

更改了webvr-polyfill.js 并通过以下方式修复了键盘/鼠标：

MouseKeyboardPositionSensorVRDevice.prototype.getState = function() {
   // this.euler.set(this.phi, this.theta, 0, 'YXZ');
   this.euler.set( this.theta , 0, - this.phi, 'YXZ');

但与其他控制器（HMD、纸板等）没有任何相似之处。也许用户可以使用旋转顺序和映射会很好。谢谢

Example - 在 js 控制台中尝试一组 swappedAxis = true 并旋转颈部。

【问题讨论】：

示例不工作
有什么问题？我使用了 webvr polyfill。 VR头显旋转没有限制。
你是对的。用鼠标/键盘向上/向下查找只有限制。但经过额外的调试后，我意识到问题是其他的。我更新了我的问题！

标签： three.js polyfills webvr

【解决方案1】：

您遇到的主要问题是gimbal lock，因为您使用的是欧拉旋转。使用四元数来避免这个问题。

此外，网格上的轴似乎是翻转的，因此您必须考虑到这一点。

不用设置旋转的分量，只需设置四元数：

mesh.skeleton.bones[neckVRControlBone].quaternion.set(
    pivot.quaternion.y,
    -pivot.quaternion.z,
    -pivot.quaternion.x,
    pivot.quaternion.w
);

【讨论】：