CODEWITHSUNDEEP
three.jsaframear.js
Greg Micek II
Greg Micek II

Reputation: 313

AR.js trying to synchronize scene to compass north

I'm setting up augmented reality with AR.js, and I'm trying to get the camera/scene to be oriented to due North when the page loads.

Short example is that I'm trying to create a view that has a virtual compass with North/East/South/West displayed to the user.

I've got it working to a certain extent so far, but the calibration seems a little off at times. I'm using a MEAN stack and AR.js

Here's what I have:

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 client controller (this section running only once on initialization):

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

Am I doing something incorrect with how I'm setting rotation on the camera-entity? Is there a better way to do this? Any suggestions?

I have compass bearing outputting to my development display, and it appears that the hardware is getting compass readings correctly.

Hardware: iPhone X

Reference: Also, see this for reference regarding how aframe orients to relative phone position when opening: https://github.com/aframevr/aframe/issues/349 And this for reference about a-frame rotation: https://aframe.io/docs/0.8.0/components/rotation.html

Upvotes: 1

Views: 1058

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

If you want your items on the marker to be oriented compass-wise, then I'd suggest rotating the scene, not messing with the camera

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

Preferably, with a aframe component, to be sure the element is ready:

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

Upvotes: 1

Related Questions