Search code examples
javascriptaugmented-realityaframear.js

How to dynamically change object coordinates in ar.js?

I use for augmented reality AR.js https://github.com/AR-js-org/AR.js (Location Based AR AFRAME version).

I am trying to use this:

document.getElementById('main_model').setAttribute('gps-entity-place', {
 latitude: new_latitude,
 longitude: new_longitude
});

<a-scene vr-mode-ui="enabled: false" arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;">
 <a-camera gps-camera rotation-reader> </a-camera>
 <a-entity id="main_model" gltf-model="gltf/my_model.gltf" rotation="0 0 0" scale="3 3 3" gps-entity-place="longitude: xx.xxxx; latitude: yy.yyyy;" animation-mixer/>
</a-scene>

But the object's position is not changed.

To control the UI event use this (it works perfectly):

var gltf = document.getElementById('main_model');
 console.log("Before ", gltf_1);
and 
 console.log("After ", gltf_1);
and 
 console.log(gltf.getDOMAttribute('gps-entity-place'));
Solution

  • Seems like the gps-entity-place component doesn't handle updates by itself - there is no update function in the component body.

    Looks like you have to call _updatePosition() after your setAttribute() call, because it seems to be responsible for translating coordintes to the scene space:

    const model = document.getElementById('main_model')
model .setAttribute('gps-entity-place', {
 latitude: new_latitude,
 longitude: new_longitude
});
model.components["gps-entity-place"]._updatePosition();

    If it won't help, I'm afraid You'll need to remove the component each time you want to set the new coordinates.