1

私は 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と正常に機能しますが、init 関数であるため、シーンの開始時に一度だけ更新されます。なんらかの理由で、tickすべてを使用すると壊れます。私はそれを間違って使用していますか？その位置を継続的に更新するには、何か違うことをする必要がありますか?

前もって感謝します！

編集：目標は、何かをフォローすることですが、ビューに固定することではありません。時のオカリナのナビだと思います。

4

1 に答える 1

3

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

そして、それはうまくいきました！

于 2016-11-11T18:52:49.443 に答える