Add WebXR controller support

Author: dmarcos

package.json

@@ -48,7 +48,7 @@
     "present": "0.0.6",
     "promise-polyfill": "^3.1.0",
     "style-attr": "^1.0.2",
-    "three": "dmarcos/three.js#poseTarget",
+    "three": "dmarcos/three.js#webXRSupport",
     "three-bmfont-text": "^2.1.0",
     "webvr-polyfill": "^0.10.8"
   },

src/components/hand-controls.js

@@ -78,11 +78,12 @@ module.exports.Component = registerComponent('hand-controls', {
     this.onBorYTouchEnd = function () { self.handleButton('BorY', 'touchend'); };
     this.onSurfaceTouchStart = function () { self.handleButton('surface', 'touchstart'); };
     this.onSurfaceTouchEnd = function () { self.handleButton('surface', 'touchend'); };
-    this.onControllerConnected = function () { self.setModelVisibility(true); };
-    this.onControllerDisconnected = function () { self.setModelVisibility(false); };
 
     el.addEventListener('controllerconnected', this.onControllerConnected);
     el.addEventListener('controllerdisconnected', this.onControllerDisconnected);
+
+    // Hidden by default.
+    el.object3D.visible = false;
   },
 
   play: function () {
@@ -182,8 +183,6 @@ module.exports.Component = registerComponent('hand-controls', {
         el.setObject3D('mesh', mesh);
         mesh.position.set(0, 0, 0);
         mesh.rotation.set(0, 0, 0);
-        // hidden by default
-        mesh.visible = false;
         el.setAttribute('vive-controls', controlConfiguration);
         el.setAttribute('oculus-touch-controls', controlConfiguration);
         el.setAttribute('windows-motion-controls', controlConfiguration);
@@ -341,12 +340,6 @@ module.exports.Component = registerComponent('hand-controls', {
     fromAction.play();
     toAction.play();
     fromAction.crossFadeTo(toAction, 0.15, true);
-  },
-
-  setModelVisibility: function (visible) {
-    var model = this.el.getObject3D('mesh');
-    if (!model) { return; }
-    model.visible = visible;
   }
 });
 

src/components/index.js

@@ -24,6 +24,8 @@ require('./shadow');
 require('./sound');
 require('./text');
 require('./tracked-controls');
+require('./tracked-controls-webvr');
+require('./tracked-controls-webxr');
 require('./visible');
 require('./vive-controls');
 require('./vive-focus-controls');

src/components/look-controls.js

@@ -26,6 +26,10 @@ module.exports.Component = registerComponent('look-controls', {
     this.previousHMDPosition = new THREE.Vector3();
     this.hmdQuaternion = new THREE.Quaternion();
     this.hmdEuler = new THREE.Euler();
+    this.poseMatrix = new THREE.Matrix4();
+    this.posePosition = new THREE.Vector3();
+    this.poseRotation = new THREE.Quaternion();
+    this.poseScale = new THREE.Vector3();
     this.position = new THREE.Vector3();
     // To save / restore camera pose
     this.savedRotation = new THREE.Vector3();
@@ -38,6 +42,7 @@ module.exports.Component = registerComponent('look-controls', {
     this.pointerLocked = false;
     this.setupMouseControls();
     this.bindMethods();
+    this.el.object3D.matrixAutoUpdate = false;
 
     this.savedPose = {
       position: new THREE.Vector3(),
@@ -180,11 +185,26 @@ module.exports.Component = registerComponent('look-controls', {
    * Mouse-drag only enabled if HMD is not active.
    */
   updateOrientation: function () {
-    var el = this.el;
     var hmdEuler = this.hmdEuler;
+    var object3D = this.el.object3D;
     var pitchObject = this.pitchObject;
     var yawObject = this.yawObject;
     var sceneEl = this.el.sceneEl;
+    var poseMatrix = this.poseMatrix;
+    var posePosition = this.posePosition;
+    var poseRotation = this.poseRotation;
+    var poseScale = this.poseScale;
+
+    // WebXR API updates applies headset pose to the object3D matrixWorld internally.
+    // Reflect values back on position, rotation, scale so setAttribute returns expected values.
+    if (sceneEl.is('vr-mode') && utils.device.isWebXRAvailable) {
+      poseMatrix.elements = sceneEl.renderer.vr.getCameraPose().poseModelMatrix;
+      poseMatrix.decompose(posePosition, poseRotation, poseScale);
+      object3D.position.copy(posePosition);
+      object3D.quaternion.copy(poseRotation);
+    } else {
+      object3D.updateMatrix();
+    }
 
     // In VR mode, THREE is in charge of updating the camera rotation.
     if (sceneEl.is('vr-mode') && sceneEl.checkHeadsetConnected()) { return; }
@@ -193,8 +213,8 @@ module.exports.Component = registerComponent('look-controls', {
     hmdEuler.setFromQuaternion(this.polyfillObject.quaternion, 'YXZ');
 
     // On mobile, do camera rotation with touch events and sensors.
-    el.object3D.rotation.x = hmdEuler.x + pitchObject.rotation.x;
-    el.object3D.rotation.y = hmdEuler.y + yawObject.rotation.y;
+    object3D.rotation.x = hmdEuler.x + pitchObject.rotation.x;
+    object3D.rotation.y = hmdEuler.y + yawObject.rotation.y;
   },
 
   /**
@@ -323,6 +343,8 @@ module.exports.Component = registerComponent('look-controls', {
    */
   onEnterVR: function () {
     this.saveCameraPose();
+    this.el.object3D.position.set(0, 0, 0);
+    this.el.object3D.updateMatrix();
   },
 
   /**

src/components/oculus-touch-controls.js

@@ -129,6 +129,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.el.setAttribute('tracked-controls', {
       id: data.hand === 'right' ? 'Oculus Touch (Right)' : 'Oculus Touch (Left)',
       controller: 0,
+      hand: data.hand,
       orientationOffset: data.orientationOffset
     });
     this.loadModel();