AR.js 尝试将场景同步到指南针北方

Question

我正在使用 AR.js 设置增强现实，并尝试在页面加载时让相机/场景朝向正北。

简短的例子是我正在尝试创建一个视图，该视图具有向用户显示北/东/南/西的虚拟指南针。

到目前为止，我已经让它在一定程度上工作，但校准有时似乎有点不对劲。我正在使用 MEAN 堆栈和 AR.js

这是我所拥有的：

view.html:

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
  <a-entity id="camera-entity" wasd-controls-enabled="false" position="0 -2 0" rotation="0 0 0" aframe-injected="">
    <a-camera></a-camera>
  </a-entity>
  <a-text font="kelsonsans" width="6" position="0 0 -3.5" rotation="0 0 0" text="" value="North"></a-text>
</a-scene>

angular 客户端控制器（此部分仅在初始化时运行一次）：

var compass = event.webkitCompassHeading;
document.querySelector('#camera-entity').object3D.rotation.y = THREE.Math.degToRad(-compassdir);

我在相机实体上设置旋转的方式有误吗？有一个更好的方法吗？有什么建议？

我有罗盘方位输出到我的开发显示器，并且硬件似乎正在正确获取罗盘读数。

硬件：iPhone X

参考： 此外，有关 aframe 在打开时如何定位到相对手机位置的参考，请参阅此内容： https://github.com/aframevr/aframe/issues/349 这是关于框架旋转的参考： https://aframe.io/docs/0.8.0/components/rotation.html

Answer 1

如果您希望标记上的项目按指南针方向定向，那么我建议您旋转场景，而不是弄乱相机

<a-marker>
  <a-entity id='parent' rotate-this-with-the-compass-readings>
    <!-- Everything you want to rotate northwise --!>
  </a-entity
</a-marker>

最好使用 aframe 组件，以确保元素准备就绪：

AFRAME.registerComponent("rotate-this-with-the-compass-readings", {
  init: function() {
      var compassdir // however you get the compass reading
      var pos = this.el.getAttribute('position')
      pos.y = THREE.Math.degToRad(-compassdir);
      this.el.setAttribute('position', pos)
  }
})