Improve pico-controls on third-party browsers such as Wolvic (#5534)

* Improve pico-controls on third-party browsers such as Wolvic

It appears that Pico Browser applies some adjustments on controllers to somewhat mimic an Oculus controller. On a neutral browser such as Wolvic, these adjustments are not applied. The end result is that turning and gestures do not work on Wolvic when using hand-controls.

The following changes make the mappings on a pico controller more similar to those on the oculus controller, which seems to improve the situation.

* Apply a PI/4 offset on the hands models when using pico4 controller

* Refactor logics to determine hand model offset

It will now happen when controller is connected, rather than at model load.

This allows to apply controller-specific offsets, as the actual model is known.

Author: Elettrotecnica

src/components/hand-controls.js

@@ -112,8 +112,28 @@ module.exports.Component = registerComponent('hand-controls', {
     mesh.mixer.update(delta / 1000);
   },
 
-  onControllerConnected: function () {
-    this.el.object3D.visible = true;
+  onControllerConnected: function (evt) {
+    var el = this.el;
+    var hand = this.data.hand;
+    var mesh = this.el.getObject3D('mesh');
+
+    el.object3D.visible = true;
+
+    var handModelOrientationZ = hand === 'left' ? Math.PI / 2 : -Math.PI / 2;
+    // The WebXR standard defines the grip space such that a cylinder held in a closed hand points
+    // along the Z axis. The models currently have such a cylinder point along the X-Axis.
+    var handModelOrientationX = el.sceneEl.hasWebXR ? -Math.PI / 2 : 0;
+
+    // Pico4, at least on Wolvic, needs a different rotation offset
+    // for the hand model. Pico Browser claims to use oculus
+    // controllers instead; will load oculus-touch-controls and does
+    // not require this adjustment.
+    if (evt.detail.name === 'pico-controls') {
+      handModelOrientationX += Math.PI / 4;
+    }
+
+    mesh.position.set(0, 0, 0);
+    mesh.rotation.set(handModelOrientationX, 0, handModelOrientationZ);
   },
 
   onControllerDisconnected: function () {
@@ -199,19 +219,13 @@ module.exports.Component = registerComponent('hand-controls', {
       var handmodelUrl = MODEL_URLS[handModelStyle + hand.charAt(0).toUpperCase() + hand.slice(1)];
       this.loader.load(handmodelUrl, function (gltf) {
         var mesh = gltf.scene.children[0];
-        var handModelOrientationZ = hand === 'left' ? Math.PI / 2 : -Math.PI / 2;
-        // The WebXR standard defines the grip space such that a cylinder held in a closed hand points
-        // along the Z axis. The models currently have such a cylinder point along the X-Axis.
-        var handModelOrientationX = el.sceneEl.hasWebXR ? -Math.PI / 2 : 0;
         mesh.mixer = new THREE.AnimationMixer(mesh);
         self.clips = gltf.animations;
         el.setObject3D('mesh', mesh);
         mesh.traverse(function (object) {
           if (!object.isMesh) { return; }
           object.material.color = new THREE.Color(handColor);
         });
-        mesh.position.set(0, 0, 0);
-        mesh.rotation.set(handModelOrientationX, 0, handModelOrientationZ);
         el.setAttribute('magicleap-controls', controlConfiguration);
         el.setAttribute('vive-controls', controlConfiguration);
         el.setAttribute('oculus-touch-controls', controlConfiguration);

src/components/pico-controls.js

@@ -26,12 +26,12 @@ var PICO_MODEL_GLB_BASE_URL = AFRAME_CDN_ROOT + 'controllers/pico/pico4/';
  */
 var INPUT_MAPPING_WEBXR = {
   left: {
-    axes: {touchpad: [2, 3]},
-    buttons: ['trigger', 'squeeze', 'none', 'thumbstick', 'xbutton', 'ybutton']
+    axes: {thumbstick: [2, 3]},
+    buttons: ['trigger', 'grip', 'none', 'thumbstick', 'xbutton', 'ybutton']
   },
   right: {
-    axes: {touchpad: [2, 3]},
-    buttons: ['trigger', 'squeeze', 'none', 'thumbstick', 'abutton', 'bbutton']
+    axes: {thumbstick: [2, 3]},
+    buttons: ['trigger', 'grip', 'none', 'thumbstick', 'abutton', 'bbutton']
   }
 };
 
@@ -118,6 +118,7 @@ module.exports.Component = registerComponent('pico-controls', {
       hand: data.hand,
       controller: this.controllerIndex
     });
+
     // Load model.
     if (!this.data.model) { return; }
     this.el.setAttribute('gltf-model', PICO_MODEL_GLB_BASE_URL + this.data.hand + '.glb');
@@ -161,6 +162,6 @@ module.exports.Component = registerComponent('pico-controls', {
   },
 
   onAxisMoved: function (evt) {
-    emitIfAxesChanged(this, this.mapping.axes, evt);
+    emitIfAxesChanged(this, this.mapping[this.data.hand].axes, evt);
   }
 });