Get camera position javascript

Question

I want to get the position of the camera in my Aframe app, but it is always 0, despite I move the camera around.

I tried both an event listener and a regular retrieval of the position, but don't get updated values.

Here Is the scene:

<a-scene>
  <a-entity id="cameraWrapper" position="0 2 10" rotation="0 0 0">
    <a-camera near="0.1" user-height="0" id="camera"></a-camera>
  </a-entity>
  <a-plane position="0 4 4" rotation="-90 0 -90" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Here is the javascript code for monitoring the position of the camera:

  <script>
    window.onload = function () {
      var pos = 
    document.querySelector('#camera').getAttribute('position');
    document.querySelector('[camera]').addEventListener('componentchanged', function (evt) {
        console.log('CAMERA x/y:', pos.x, pos.y);
        if (evt.name === 'position') { 
          console.log('Entity has moved from POSITION', evt.oldData, 'to', evt.newData, '!');
          return; 
        }
          return; 
      });
    };
  </script>

But the condition if (evt.name === 'position') is never true, and the camera position remains 0, even when moving around the camera position with keyboard inputs. How can I get the camera position continuously?

Answer 1

I think it's evt.detail.name === 'position'.

I also recommend using an A-Frame component rather than loose JavaScript:

AFRAME.registerComponent('listener', {
  tick: function () {
    console.log(this.el.getAttribute('position'));
  }
});

HTML:

<a-camera listener></a-camera>