运行时的相机位置答案

【问题标题】：Camera position at runtime运行时的相机位置
【发布时间】：2016-12-01 08:12:23
【问题描述】：

我正在玩一个非常基本的 a-frame 场景。我正在寻找信息以在运行时获取相机位置。我应该使用 Component 和 three.js 代码吗？

我该怎么做？

【问题讨论】：

我有 RTFM。但我找不到从哪里开始。当我说“在运行时”时，我的意思是每次相机移动时。
我的意思是你到目前为止尝试过什么代码？
你能举个例子吗？指向 codepen 的链接可以使用 codepen.io/team/mozvr

获取相机位置：

 document.querySelector('[camera]').getAttribute('position')

标签： webvr aframe

【解决方案1】：

首先，获取相机实体 (https://aframe.io/docs/core/entity.html#Retrieving-an-Entity)。相机实体将具有作为 HTML 属性附加的 camera 组件。

document.querySelector('[camera]') 或 document.querySelector('a-scene').camera.el

然后使用getAttribute 抢占位置。这将返回一个 {X, Y, Z} 对象。

document.querySelector('[camera]').getAttribute('position')

要在每次相机更新其位置时得到通知，我们可以使用componentchanged 事件（https://aframe.io/docs/core/entity.html#Listening-for-Component-Changes）：

document.querySelector('[camera]').addEventListener('componentchanged', function (evt) {
  if (evt.detail.name === 'position') {
    console.log('Camera position went from', evt.detail.oldData, 'to', evt.detail.newData);
  }
});

【讨论】：

evt.name 保持未定义 :-(
固定，应该是evt.detail.name。
evt.detail.name 仍未定义。仅供参考，console.log(JSON.stringify(evt)) 显示：{"isTrusted":false}

【解决方案2】：

我终于采用了这个解决方案：

<script>
    AFRAME.registerComponent('acceleration', {
        tick: function() {
            var altitude = (this.el.getAttribute('position').z);
        }
    })
</script>
<a-scene>
    <a-entity position="0 0 150">
        <a-entity id="myCamera" camera acceleration look-controls keyboard-controls></a-entity>
    </a-entity>
</a-scene>

我的最后一个问题是我没有得到相机的绝对坐标，而是相对于相机初始位置的坐标。

【讨论】：