Merge pull request #7 from ma2yama/marmot_iosfix-manual

ios fix (AR-js-org#466) applied manually to existing DeviceOrientationControls AR-js-org#657

Author: ma2yama

aframe/build/aframe-ar-new-location-only.js

@@ -3,6 +3,12 @@
 
 import { Euler, EventDispatcher, MathUtils, Quaternion, Vector3 } from "three";
 
+const isIOS =
+  navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
+  (/Macintosh/i.test(navigator.userAgent) &&
+    navigator.maxTouchPoints != null &&
+    navigator.maxTouchPoints > 1); // for iPad Safari
+
 const _zee = new Vector3(0, 0, 1);
 const _euler = new Euler();
 const _q0 = new Quaternion();
@@ -11,6 +17,11 @@ const _q1 = new Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 aro
 const _changeEvent = { type: "change" };
 
 class DeviceOrientationControls extends EventDispatcher {
+  /**
+   * Create an instance of DeviceOrientationControls.
+   * @param {Object} object - the object to attach the controls to
+   * (usually your Three.js camera)
+   */
   constructor(object) {
     super();
 
@@ -30,10 +41,11 @@ class DeviceOrientationControls extends EventDispatcher {
 
     this.enabled = true;
 
-    this.deviceOrientation = {};
+    this.deviceOrientation = null;
     this.screenOrientation = 0;
 
     this.alphaOffset = 0; // radians
+    this.initialOffset = null; // used in fix provided in issue #466, iOS related
 
     this.TWO_PI = 2 * Math.PI;
     this.HALF_PI = 0.5 * Math.PI;
@@ -44,8 +56,25 @@ class DeviceOrientationControls extends EventDispatcher {
 
     this.smoothingFactor = 1;
 
-    const onDeviceOrientationChangeEvent = function (event) {
-      scope.deviceOrientation = event;
+    const onDeviceOrientationChangeEvent = function ({
+      alpha,
+      beta,
+      gamma,
+      webkitCompassHeading,
+    }) {
+      if (isIOS) {
+        const ccwNorthHeading = 360 - webkitCompassHeading;
+        scope.alphaOffset = MathUtils.degToRad(ccwNorthHeading - alpha);
+        scope.deviceOrientation = { alpha, beta, gamma, webkitCompassHeading };
+      } else {
+        if (alpha < 0) alpha += 360;
+        scope.deviceOrientation = { alpha, beta, gamma };
+      }
+      window.dispatchEvent(
+        new CustomEvent("camera-rotation-change", {
+          detail: { cameraRotation: object.rotation },
+        }),
+      );
     };
 
     const onScreenOrientationChangeEvent = function () {
@@ -70,6 +99,10 @@ class DeviceOrientationControls extends EventDispatcher {
       quaternion.multiply(_q0.setFromAxisAngle(_zee, -orient)); // adjust for screen orientation
     };
 
+    /**
+     * Update the device orientation controls.
+     * Should be called from your three.js rendering/animation function.
+     */
     this.connect = function () {
       onScreenOrientationChangeEvent(); // run once on load
 
@@ -123,9 +156,11 @@ class DeviceOrientationControls extends EventDispatcher {
       );
 
       scope.enabled = false;
+      scope.initialOffset = false;
+      scope.deviceOrientation = null;
     };
 
-    this.update = function () {
+    this.update = function ({ theta = 0 } = { theta: 0 }) {
       if (scope.enabled === false) return;
 
       const device = scope.deviceOrientation;
@@ -143,45 +178,63 @@ class DeviceOrientationControls extends EventDispatcher {
           ? MathUtils.degToRad(scope.screenOrientation)
           : 0; // O
 
-        if (this.smoothingFactor < 1) {
-          if (this.lastOrientation) {
-            const k = this.smoothingFactor;
-            alpha = this._getSmoothedAngle(
+        if (isIOS) {
+          const currentQuaternion = new Quaternion();
+          setObjectQuaternion(currentQuaternion, alpha, beta, gamma, orient);
+          // Extract the Euler angles from the quaternion and add the heading angle to the Y-axis rotation of the Euler angles
+          // (If we replace only the alpha value of the quaternion without using Euler angles, the camera will rotate unexpectedly. This is because a quaternion does not represent rotation values individually but rather through a combination of rotation axes and weights.)
+          const currentEuler = new Euler().setFromQuaternion(
+            currentQuaternion,
+            "YXZ",
+          );
+          // Replace the current alpha value of the Euler angles and reset the quaternion
+          currentEuler.y = MathUtils.degToRad(
+            360 - device.webkitCompassHeading,
+          );
+          currentQuaternion.setFromEuler(currentEuler);
+          scope.object.quaternion.copy(currentQuaternion);
+        } else {
+          if (this.smoothingFactor < 1) {
+            if (this.lastOrientation) {
+              const k = this.smoothingFactor;
+              alpha = this._getSmoothedAngle(
+                alpha,
+                this.lastOrientation.alpha,
+                k,
+              );
+              beta = this._getSmoothedAngle(
+                beta + Math.PI,
+                this.lastOrientation.beta,
+                k,
+              );
+              gamma = this._getSmoothedAngle(
+                gamma + this.HALF_PI,
+                this.lastOrientation.gamma,
+                k,
+                Math.PI,
+              );
+            } else {
+              beta += Math.PI;
+              gamma += this.HALF_PI;
+            }
+
+            this.lastOrientation = {
               alpha,
-              this.lastOrientation.alpha,
-              k,
-            );
-            beta = this._getSmoothedAngle(
-              beta + Math.PI,
-              this.lastOrientation.beta,
-              k,
-            );
-            gamma = this._getSmoothedAngle(
-              gamma + this.HALF_PI,
-              this.lastOrientation.gamma,
-              k,
-              Math.PI,
-            );
-          } else {
-            beta += Math.PI;
-            gamma += this.HALF_PI;
+              beta,
+              gamma,
+            };
           }
-
-          this.lastOrientation = {
-            alpha: alpha,
-            beta: beta,
-            gamma: gamma,
-          };
+          setObjectQuaternion(
+            scope.object.quaternion,
+            alpha + theta,
+            this.smoothingFactor < 1 ? beta - Math.PI : beta,
+            this.smoothingFactor < 1 ? gamma - this.HALF_PI : gamma,
+            orient,
+          );
         }
 
-        setObjectQuaternion(
-          scope.object.quaternion,
-          alpha,
-          this.smoothingFactor < 1 ? beta - Math.PI : beta,
-          this.smoothingFactor < 1 ? gamma - this.HALF_PI : gamma,
-          orient,
-        );
-
+        // NB - NOT present in IOS fixed version issue #466
+        // Is it needed?
         if (8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
           lastQuaternion.copy(scope.object.quaternion);
           scope.dispatchEvent(_changeEvent);
@@ -218,10 +271,29 @@ class DeviceOrientationControls extends EventDispatcher {
       return newangle;
     };
 
+    // Provided in fix on issue #466 - iOS related
+    this.updateAlphaOffset = function () {
+      scope.initialOffset = false;
+    };
+
     this.dispose = function () {
       scope.disconnect();
     };
 
+    // provided with fix on issue #466
+    this.getAlpha = function () {
+      const { deviceOrientation: device } = scope;
+      return device && device.alpha
+        ? MathUtils.degToRad(device.alpha) + scope.alphaOffset
+        : 0;
+    };
+
+    // provided with fix on issue #466
+    this.getBeta = function () {
+      const { deviceOrientation: device } = scope;
+      return device && device.beta ? MathUtils.degToRad(device.beta) : 0;
+    };
+
     this.connect();
   }
 }