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

必须同意-滴答答答不是一个很好的解决方案。而不是一旦事件发生就调用函数代码（在这种情况下，是更改摄像机的位置），而是连续调用tick函数（我猜是通过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>

事件监听器“ componentchanged”仅触发“旋转”，而不触发“位置”

3 个答案: