Pass iOS CMDeviceMotion to THREE.js to Rotate Spherical Panorama

Question

I need to pass iOS app motion data to my WKWebView that loads a spherical panorama using THREE.js. The THREE.js relies on Quaternion calculated from alpha, beta, gamma, but since CMDeviceMotion on iOS does not provide those, but does provide Quaternion, I decided to pass Quaternion to the THREE.js web code from Swift iOS like this:

func didUpdateMotion(data: CMDeviceMotion) {
  let quaternion = data.attitude.quaternion
  let js = "iosQuaternion={x:(quaternion.x),y:(quaternion.y),z:(quaternion.z),w:(quaternion.w)}"
  self.webView.evaluateJavaScript(js, completionHandler: {(result,error) in })}}
}

Now, here is a part of my web view code for THREE.js can uses Quaternion set by iOS:

function animate() {
    if(typeof iosQuaternion === "undefined") return;
    window.requestAnimationFrame( animate );
    updateWithQuaternion();
    renderer.render( scene, camera );
}

updateWithQuaternion = ( function () {
    var lastQuaternion = new THREE.Quaternion();
    return function () {
        if (typeof iosQuaternion === "undefined") return;
        scope.object.quaternion = new THREE.Quaternion(); 
        scope.object.quaternion.x = iosQuaternion.x;
        scope.object.quaternion.y = iosQuaternion.y;
        scope.object.quaternion.z = iosQuaternion.z;
        if ( 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
            lastQuaternion.copy( scope.object.quaternion );
            scope.dispatchEvent( changeEvent );
        }
    };
})();

The above implementation does give me a functionality where spherical panorama is loaded and rotates based on passed device motion data, but the direction and initial orientation are completely off. Panorama is loaded in incorrect position (may be facing down when it should face a specific direction) and rotation direction is also affected as a result.

What may be a recommendation for me to ensure iOS motion data is correctly passed to the spherical panorama driven by THREE.js?

Answer 1

等待大神解答