事件侦听器“componentchanged”仅针对“旋转”而不是“位置”触发

Question

当尝试使用componentchanged 事件侦听器检测相机位置的移动时，我只能在将evt.detail.name 输出到控制台时检测到旋转。

要使用键盘在场景中移动相机，我使用的是A-Frame Extras library。

这是我使用的仅输出旋转的代码...

Javascript：

document.addEventListener("DOMContentLoaded", function(event)
{
        document.querySelector("a-entity[camera]").addEventListener("componentchanged", function (evt)
        {
                // The console message outputs 'rotation' and never outputs 'position'
                console.log("Event name: " + evt.detail.name); 
            if(evt.detail.name === "position")
            {
                console.log("Camera has moved from " + evt.oldData + " to " + evt.newData); 
            }
            else
            {
                 console.log("position has not changed"); 
            }
        });
});

HTML：

<a-entity id="rig" movement-controls position="0 0 0">
      <a-entity camera position="0 1.6 0" look-controls="pointerLockEnabled:false"></a-entity>
</a-entity>

Answer 1

使用刻度功能检查相机装置上的位置变化：

tick: function () {
  var rigEl = this.el;
  var currentPosition = rigEl.object3D.position;
  // Compare to this.lastPosition (a vector3 you create)
  this.lastPosition.copy(rigEl.object3D.position); 
}

Answer 2

必须同意 - 勾选答案不是一个很好的解决方案。而不是在事件发生时调用函数代码（在这种情况下是更改相机位置），而是连续调用刻度函数（我猜是通过 setInterval）导致很多不必要的处理。这不仅仅是 setInterval 上的 tick 函数调用，还有最终开发人员在该函数中放置的任何代码（是的，您可以通过将相机的位置存储在 tick 函数中并不断将其与新的比较位置，所以代码只在位置变化时执行——但你为什么要为这一切烦恼，当在实际位置变化时触发事件可以为你省去麻烦？）

Keydown 有它自己的缺点（很明显，移动设备上的 AFrame 不使用 keydown - 你必须锁定 touchstart 或其他东西），但它仍然比替代方案更好。

Answer 3

我能够解决这个问题。您可以执行以下操作...

document.addEventListener("DOMContentLoaded", function(event)
{
    var cameraEl = document.querySelector("#camera");
    var worldPos = new THREE.Vector3();

    function getCameraPosition() 
    {
        worldPos.setFromMatrixPosition(cameraEl.object3D.matrixWorld);
        console.log("Position: " + worldPos.x + " " + worldPos.y + " " + worldPos.z);
    }

    document.addEventListener("keydown", function(evt) 
    {
        // check if keys pressed are W, A, S, D and Up, Down, Left, Right
        if (evt.keyCode == 87 || evt.keyCode == 65 || evt.keyCode == 83 || evt.keyCode == 63 || evt.keyCode == 38 || evt.keyCode == 37 || evt.keyCode == 39 || evt.keyCode == 40)
        {
            getCameraPosition();
        }
    });     
});

您还需要为您的相机添加一个 ID...

<a-entity id="rig" movement-controls position="0 0 0">
  <a-entity id="camera" camera position="0 1.6 0" look-controls="pointerLockEnabled:false"></a-entity>
</a-entity>