A-frame consitatnly animate gltf to go to position of camera A-frame

Question

I am creating a vr scene using A-frame (https://aframe.io) and I am wondering how can I animate a gltf model to always follow the camera. For example, I would like the use the animation property of A-frame and position my model so that it always follows the player. If the player moves 10 meters forwards, the gltf will animate 10 space forwards. If the player moves 10 spaces to the left, the camera will follow the player no matter where the player moves. I want to gltf model to always follow the camera. How can this be done? Code for my gltf model:

      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

<a-scene>
                   <a-gltf-model class="cube" mixin="cube" animation='   property: position; dur: 2500; from: 0 2.3 -1; to: 0 2.5 -1; dir: alternate; autoplay: true; easing: linear; loop: true;' src="https://cdn.glitch.com/bb5471f0-16f5-4309-8c7c-52310dc4ff58%2FRobotfr.glb?v=1625527911166"  position="0 2.3 -1"scale="1.2 1.2 1.2"  speech-command__show="command: assistant; type: attribute; attribute: visible; value: true;"speech-command__hide="command: hide; type: attribute; attribute: visible; value: false;"></a-gltf-model>

</a-scene>

Answer 1

Actually you are asking something related to third person perspective of camera movement. This can easily done by reparenting your camera, and you need to add some offset to camera so it looks in front of camera always

 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-entity gltf-model="./scene.gltf" position="0 0 -0.5"></a-entity>
 </a-camera> 

if this doesn't work try creating and using a component like this

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
        const tmpv = new THREE.Vector3();
        return function(t, dt) {
        if (!this.data.target) return; 
        const target = this.data.target.getObject3D("mesh"); 
        const position = target.getWorldPosition(tmpv); 
        this.el.object3D.position.lerp(tmpv, 0.5) 
      }
    })()
  })
  
</script>
<a-scene>
  

  <!-- camera  -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>
    
  <a-entity id="player" gltf-model="./scene.gltf" wasd-controls="speed: 35" ></a-entity>
  
  
</a-scene>