1

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

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

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

这是我所拥有的：

视图.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

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

4

1 回答 1

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)
  }
})
于 2018-11-24T23:01:47.690 回答