How to listen to camera's world position in A-Frame?

Question

How can I get the current position of a camera? Such that I can rotate my sky entity.

Assume I have:

<a-scene>
  <a-camera id="camera></a-camera>
  <a-sky id="mySky"></a-sky>
</a-scene>

Answer 1

To get the position of the camera:

var pos = document.querySelector('#camera').getAttribute('position');

To get the world position of the camera, we can convert the local position of the camera:

var cameraEl = document.querySelector('#camera');
var worldPos = new THREE.Vector3();
worldPos.setFromMatrixPosition(cameraEl.object3D.matrixWorld);
console.log(worldPos.x);

To listen to changes, use componentchanged event:

cameraEl.addEventListener('componentchanged', function (evt) {
  if (evt.detail.name !== 'position') { return; }
  console.log(evt.detail.newData);
});

More performant may be to poll:

AFRAME.registerComponent('camera-listener', {
  tick: function () {
    var cameraEl = this.el.sceneEl.camera.el;
    cameraEl.getAttribute('position');
    cameraEl.getAttribute('rotation');

    // Do something.
  }
});

Answer 2

Based on Kevin Ngo's answer, I defined a component camera-logger that logs position and orientation of the camera to the JavaScript Console once per second. The component can be added to any aframe entity.

<!-- define camera logger component -->
<script>
AFRAME.registerComponent('camera-logger', {

  schema: {
    timestamp: {type: 'int'},
    seconds: {type: 'int'} // default 0
  },

  log : function () {
    var cameraEl = this.el.sceneEl.camera.el;
    var rotation = cameraEl.getAttribute('rotation');
    var worldPos = new THREE.Vector3();
    worldPos.setFromMatrixPosition(cameraEl.object3D.matrixWorld);
    console.log("Time: " + this.data.seconds 
                + "; Camera Position: (" + worldPos.x.toFixed(2) + ", " + worldPos.y.toFixed(2) + ", " + worldPos.z.toFixed(2) 
                + "); Camera Rotation: (" + rotation.x.toFixed(2) + ", " + rotation.y.toFixed(2) + ", " + rotation.z.toFixed(2) + ")");        
  },

  play: function () {
    this.data.timestamp = Date.now();
    this.log();
  },

  tick: function () {  
    if (Date.now() - this.data.timestamp > 1000) {
      this.data.timestamp += 1000;
      this.data.seconds += 1;
      this.log();
    }
  },
});
</script>

...

<!-- add the logger to your camera -->
<a-entity camera camera-logger>