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>

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

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

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

我的指南针方位输出到我的开发显示器上，并且看来硬件正在正确获取指南针读数。

硬件：iPhone X

参考：另外，请参阅以下内容以获取有关打开时框架如何相对于手机的相对位置的参考： https://github.com/aframevr/aframe/issues/349 这是有关A帧旋转的参考： 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)
  }
})

AR.js尝试将场景同步到北向

1 个答案: