在 a-frame 中使用刻度函数根据相机位置更新对象位置答案

【问题标题】：Using tick function in a-frame to update object position based on camera position在 a-frame 中使用刻度函数根据相机位置更新对象位置
【发布时间】：2017-03-26 00:13:01
【问题描述】：

我正在使用 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。

【问题讨论】：

标签： javascript three.js aframe webvr

【解决方案1】：

从外部 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
          });

然后它起作用了！

【讨论】：