Слушатель событий, «компонент изменен», запускает только «вращение», а не «положение» - PullRequest
Новая
       5

Слушатель событий, «компонент изменен», запускает только «вращение», а не «положение»

0 голосов
/ 26 июня 2018

При попытке определить движение камеры с помощью прослушивателя событий componentchanged, я могу обнаружить поворот только при выводе evt.detail.name на консоль.

Для перемещения камеры в сцене с помощью клавиатуры я использую библиотеку A-Frame Extras .

Вот код, который я использую, который выводит только вращение ...

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>

Ответы [ 3 ]

0 голосов
/ 28 июня 2018

Используйте функцию галочки для проверки изменения положения на камере : 

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); 
}
0 голосов
/ 29 июня 2018

Согласитесь - ответ в виде галочки не является хорошим решением. Вместо того, чтобы вызывать код функции, когда происходит событие (в данном случае это изменение положения камеры), вы постоянно вызываете функцию тика (я угадываю через setInterval), что приводит к большой ненужной обработке. Это не только вызов функции тика в setInterval, но и любой код, который конечный разработчик помещает в эту функцию (да, вы можете это скрыть, сохраняя положение камеры в функции тика и постоянно сравнивая его с новым позиция, поэтому код выполняется только при смене позиции, но зачем вам все это, когда запуск события при фактическом изменении позиции избавляет вас от хлопот?)

У Keydown есть свои недостатки (очевидным является то, что AFrame на мобильном телефоне не использует keydown - вам придется заблокировать сенсорный запуск или что-то в этом роде), но это все же лучше, чем альтернатива.

0 голосов
/ 27 июня 2018

Мне удалось решить эту проблему. Вы можете сделать следующее ... 

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

Вы также хотите добавить идентификатор для вашей камеры ... 

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