Search code examples
javascriptjquerythree.jsaframewebvr

A-frame let gltf model follow slightly in front of player at all times


I am wondering how I can create something in A-frame (https://aframe.io) where a gltf model in my scene follows the camera slightly in front and eye level to the camera. How can I take a model in my scene and add a feature where the gltf model will always be following the player in front of the player and at eye level. This means that if the player moves, the gltf will move with the player so that's its always in front and eye level to the player. How can this be done? Code for the gltf model:

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

<a-scene>
    <a-gltf-model src="https://cdn.glitch.com/bb5471f0-16f5-4309-8c7c-52310dc4ff58%2Frobot.glb?v=1625516682023" position="0 0 -1" scale="0.02 0.02 0.02"></a-gltf-model>
<a-camera position="0 0 0"></a-camera>
</a-scene>

Solution

  • Make the model a child of the camera:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene background="color: #ECECEC">
          <a-assets>
            <a-asset-item id="avocado" src="https://cdn.glitch.com/ddafb83b-7516-4b05-b0a8-df38b8c55bad%2FAvocado.glb?v=1625549309364"></a-asset-item>
          </a-assets>
          <a-camera>
            <a-entity position="0 0 -0.2" gltf-model="#avocado"></a-entity>
          </a-camera>
          <a-plane position="0 0 -2" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
        </a-scene>
      </body>
    </html>
    

    Working example on glitch