如何在A-Frame中聆听相机的世界位置？

Question

如何获取相机的当前位置？这样我就可以旋转我的天空实体.

假设我有:

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

Answer 1

要获得相机的位置:

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

为了获得相机的世界位置,我们可以转换相机的本地位置:

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

要收听更改,请使用componentchanged事件:

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

更高效的可能是民意调查:

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

    // Do something.
  }
});