Merge pull request #187 from supermedium/recenter

recenter

src/components/recenter.js

@@ -1,76 +1,48 @@
 /**
- * Pivot the scene when user enters VR to face the links.
+ * Recenter camera back to facing down negative Z axis at 0, 0, 0.
  */
 AFRAME.registerComponent('recenter', {
   schema: {
-    enabled: {default: true},
-    target: {default: ''}
+    enabled: {default: true}
   },
 
   init: function () {
     var sceneEl = this.el.sceneEl;
-    this.matrix = new THREE.Matrix4();
-    this.frustum = new THREE.Frustum();
-    this.rotationOffset = 0;
-    this.euler = new THREE.Euler();
-    this.euler.order = 'YXZ';
-    this.menuPosition = new THREE.Vector3();
     this.recenter = this.recenter.bind(this);
-    this.checkInViewAfterRecenter = this.checkInViewAfterRecenter.bind(this);
-    this.target = document.querySelector(this.data.target);
 
-    // Delay to make sure we have a valid pose.
-    sceneEl.addEventListener('enter-vr', () => setTimeout(this.recenter, 100));
-    // User can also recenter the menu manually.
-    sceneEl.addEventListener('menudown', this.recenter);
-    sceneEl.addEventListener('thumbstickdown', this.recenter);
-    window.addEventListener('vrdisplaypresentchange', this.recenter);
+    document.querySelectorAll('[tracked-controls]').forEach(controlEl => {
+      controlEl.addEventListener('menudown', this.recenter);
+      controlEl.addEventListener('thumbstickdown', this.recenter);
+    });
   },
 
-  recenter: function () {
-    var euler = this.euler;
-    if (!this.data.enabled) { return; }
-    euler.setFromRotationMatrix(this.el.sceneEl.camera.el.object3D.matrixWorld, 'YXZ');
-    this.el.object3D.rotation.y = euler.y + this.rotationOffset;
-    // Check if the menu is in camera frustum in next tick after a frame has rendered.
-    setTimeout(this.checkInViewAfterRecenter, 0);
-  },
-
-  /*
-   * Sometimes the quaternion returns the yaw in the [-180, 180] range.
-   * Check if the menu is in the camera frustum after recenter it to
-   * decide if we apply an offset or not.
-   */
-  checkInViewAfterRecenter: (function () {
-    var bottomVec3 = new THREE.Vector3();
-    var topVec3 = new THREE.Vector3();
+  recenter: (function () {
+    var euler = new THREE.Euler();
+    var matrix = new THREE.Matrix4();
+    var rotationMatrix = new THREE.Matrix4();
+    var translationMatrix = new THREE.Matrix4();
 
     return function () {
-      var camera = this.el.sceneEl.camera;
-      var frustum = this.frustum;
-      var menuPosition = this.menuPosition;
+      const el = this.el;
 
-      camera.updateMatrix();
-      camera.updateMatrixWorld();
-      frustum.setFromMatrix(this.matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+      if (!this.data.enabled) { return; }
 
-      // Check if menu position (and its bounds) are within the frustum.
-      // Check bounds in case looking angled up or down, rather than menu central.
-      menuPosition.setFromMatrixPosition(this.target.object3D.matrixWorld);
-      bottomVec3.copy(menuPosition).y -= 3;
-      topVec3.copy(menuPosition).y += 3;
+      const camera = el.sceneEl.camera.el.object3D;
 
-      if (frustum.containsPoint(menuPosition) ||
-          frustum.containsPoint(bottomVec3) ||
-          frustum.containsPoint(topVec3)) { return; }
+      // Reset matrix.
+      matrix.identity();
 
-      this.rotationOffset = this.rotationOffset === 0 ? Math.PI : 0;
-      // Recenter again with the new offset.
-      this.recenter();
+      // Create matrix to reset Y rotation.
+      euler.set(0, -1 * camera.rotation.y, 0);
+      rotationMatrix.makeRotationFromEuler(euler);
+
+      // Create matrix to zero position.
+      translationMatrix.makeTranslation(-1 * camera.position.x, 0, -1 * camera.position.z);
+
+      // Multiply and decompose back to object3D.
+      matrix.multiply(rotationMatrix).multiply(translationMatrix);
+      matrix.decompose(el.object3D.position, el.object3D.quaternion, el.object3D.scale);
+      el.object3D.updateMatrixWorld(true);
     };
-  })(),
-
-  remove: function () {
-    this.el.sceneEl.removeEventListener('enter-vr', this.recenter);
-  }
+  })()
 });