我正在使用您的 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、纸板等)没有任何相似之处。也许用户可以使用旋转顺序和映射会很好。谢谢
示例- 在 js 控制台中尝试一组 swappedAxis = true
并旋转颈部。