如何在A-Frame中聆听相机的世界位置？ [英] How to listen to camera's world position in A-Frame?

问题描述

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

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

假设我有：

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

推荐答案

获取位置相机：

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);

要收听更改，请使用 componentchanged 事件：

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

这篇关于如何在A-Frame中聆听相机的世界位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！