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

Я использую A-Frame и хочу, чтобы объект двигался вместе с камерой. Для этого я собрал компонент, который обновляет положение объекта в зависимости от положения камеры:

      AFRAME.registerComponent('follow', {
    schema: {
      distance: {type: 'vec3'},
      target: {type: 'selector'}
    },

    tick: function() {
      const targetItem = this.data.target;
      const relativePosition = this.data.distance

      var tempPos = targetItem.getAttribute("position").split(" ").map(Number);

      targetPos = new THREE.Vector3(relativePosition.x + tempPos[0], relativePosition.y + tempPos[1], relativePosition.z + tempPos[2]);

      this.el.setAttribute('position', targetPos)
    }
  });

Это отлично работает, когда я использую init вместо tick, но поскольку это функция инициализации, она обновляет ее только один раз в начале сцены. Почему-то при использовании tick все ломается. Я неправильно это использую? Должен ли я делать что-то другое, чтобы постоянно обновлять его положение?

Заранее спасибо!

Изменить: я должен упомянуть, что цель состоит в том, чтобы что-то отслеживать, но не привязано к вашему представлению. Вспомните Navi из Ocarina of Time.


javascript three.js aframe webvr
person Nat    schedule 11.11.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Получено решение извне SO:

Мне нужно было установить контроллер WASD на объект, содержащий камеру:

<a-entity id="character" position="0 2 3"  wasd-controls look-controls>
  <a-entity id="camera" camera>
    <a-ring radius-outer="0.03" radius-inner="0.02"
            position="0 0 -1"
            material="color: cyan; shader: flat"
            cursor="fuse: true; fuseTimeout: 500">
    </a-ring>
    </a-camera>
</a-entity>

Затем мне нужно было изменить функцию:

 tick() {
          const targetItem = this.data.target;
          var distance = this.data.distance;
          var targetPosition = targetItem.getAttribute('position');
          this.el.setAttribute('position',{
            x: targetPosition.x + distance.x,
            y: targetPosition.y + distance.y,
            z: targetPosition.z + distance.z
          });

И тогда это сработало!

person Nat    schedule 11.11.2016