UPDATE 28/10/2015:
the problem is: to map the VR controls to an object ( not the camera ) that has a different axis configuration and keep the correct rotation rules.
Example of object axis:
- x - up
- y - depth
- z - side
//attach head tracker controller to object ( not camera )
controls = new THREE.VRControls( object );
Swapping the rotations by just
object .rotation.x = object .rotation.z
results that, after updating the controls, rotating to the side makes an undesired rotation after 45º.
The rotation rules for each axis are different :
- x rotates until PI and after that inverts signal and keeps changing in the same direction it was;
- y rotates until PI/2 and after inverts the direction (when increasing, starts decreasing)
- z is equal to x.
Changed webvr-polyfill.js
and got it fixed for keyboard/mouse with this:
MouseKeyboardPositionSensorVRDevice.prototype.getState = function() {
// this.euler.set(this.phi, this.theta, 0, 'YXZ');
this.euler.set( this.theta , 0, - this.phi, 'YXZ');
But no way similar line to other controllers (HMD, cardboard, etc.).
Maybe it would be nice the rotation order and mapping could be available to the user.
Thanks
INITIAL QUESTION:
Hi,
I'm using your webvr-boilerplate and trying to map it to a human face mesh.
The way I do is is:
- attach the camera to an eye bone and the neck bone to the VRControls
main js script:
//attach head tracker controller to neck bone
controls = new THREE.VRControls( mesh.skeleton.bones[ neckVRControlBone ] );
//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);
- change the webvr-manager.js to update the neck bone ( passed as argument on initialization ) position and rotation and in index.php I swap the axis to match the HMD ones with the ones of the bone:
webvr-manager.js:
if ( state.orientation !== null ) {
object.quaternion.copy( state.orientation );
}
if ( state.position !== null ) {
//object.position.copy( state.position ).multiplyScalar( scope.scale );
}
main js script:
/* 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) ;
//rotates the mesh body with the neck
mesh.rotation.x = - mesh.skeleton.bones[ neckVRControlBone ].rotation.x; // UP - DOWN - PITCH
mesh.rotation.y = mesh.skeleton.bones[ neckVRControlBone ].rotation.y; // LEFT RIGHT - YAW
mesh.rotation.z = - mesh.skeleton.bones[ neckVRControlBone ].rotation.z; // INCLINE - ROLL
The problem is that there is a rotation restriction on the up HMD axis, that, after swapping the left/right bone axis with up/down HMD axis, constrains the left/right bone movement.
I've been looking at your files and I've seen this in webvr-polyfill.js
:
// Prevent looking too far up or down.
//this.phi = this.clamp_(this.phi, -Math.PI/2, Math.PI/2);
However commenting this seems to me to have no effect.
Is this the right place?
Where can I change that? thanks!
Example