Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/368.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在a帧中使用勾号功能根据相机位置更新对象位置_Javascript_Three.js_Aframe_Webvr - Fatal编程技术网

Javascript 在a帧中使用勾号功能根据相机位置更新对象位置

Javascript 在a帧中使用勾号功能根据相机位置更新对象位置,javascript,three.js,aframe,webvr,Javascript,Three.js,Aframe,Webvr,我使用的是A-Frame,希望一个对象随相机移动。为此,我放置了一个组件,该组件基于摄影机位置更新对象的位置: AFRAME.registerComponent('follow', { schema: { distance: {type: 'vec3'}, target: {type: 'selector'} }, tick: function() { const targetItem = this.data.target

我使用的是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函数,所以它只在场景开始时更新一次。由于某种原因,当我使用
勾选
时,一切都会中断。我用错了吗?我应该做些不同的事情来不断更新它的位置吗

提前谢谢


编辑:我应该提到的是,我们的目标是让一些东西跟进,但不是固定在您的观点上。想想《时代的陶笛》中的纳维吧。

从外部获得了解决方案,所以:

我需要将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
          });