将 iOS CMDeviceMotion 传递给 THREE.js 以旋转球形全景

编程问答 2022-05-29

问题描述

我需要将 iOS 应用运动数据传递给我的 WKWebView，它使用 THREE.js 加载球形全景图。 THREE.js 依赖于从 alpha、beta、gamma 计算的 四元数，但由于 CMDeviceMotion在 iOS 上不提供这些，但确实提供了 Quaternion，我决定将 Quaternion 传递给 Swift iOS 的 THREE.js 网络代码，如下所示：

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 })}}
}

现在，这是我的 THREE.js 网络视图代码的一部分，可以使用 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 );
        }
    };
})();

上述实现确实为我提供了一个功能，其中球形全景图根据传递的设备运动数据加载和旋转，但方向和初始方向完全关闭。全景图加载位置不正确（应该面向特定方向时可能面朝下），因此也会影响旋转方向。

对于确保 iOS 运动数据正确传递到由 THREE.js 驱动的球形全景图，我有什么建议？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cmmotionmanagereuler-anglesiosiosquaternionsthree.js