如何在 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.
  }
});

Answer 2

根据 Kevin Ngo 的回答，我定义了一个组件 camera-logger，它每秒将相机的位置和方向记录到 JavaScript 控制台。该组件可以添加到任何框架实体。

<!-- 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>

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

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

aframe