A-Frame Camera Anchoring

🧑‍💻 Technical Support
1

Hey all so I am trying to build an aframe scene with a fps view. I have made the gun-model the child of the player-model to create an avatar template. My idea was to attach the camera to the avatar using , and then updating the position of the avatar with the camera using .getAttribute(‘position’). Would this work? Im having trouble keeping the avatar’s position constant with the camera. Here’s my body.html for reference:

<!-- Copyright (c) 2023 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
<a-scene
  networked-scene="adapter: sharedar; connectOnLoad: true"
  lobby-handler
  lobby-pages
  xrextras-loading
  xrextras-runtime-error
  xrextras-gesture-detector>
  <a-assets>

    <a-asset-item id="player-model" src="./assets/models/player.glb"></a-asset-item>
    <a-asset-item id="gun-model" src="./assets/models/gun.glb"></a-asset-item>

    <template id="avatar-template">
      <a-entity health-controller basic-collider character-animator death-animation>
        <a-entity 
          gltf-model="#player-model" 
          scale="2.5 2.5 2.5"
          position="0 0 0"
          rotation="0 180 0">
          <a-entity 
            gltf-model="#gun-model" 
            scale="1 1 1" 
            position=".3 1.5 0.5" 
            rotation="0 -90 0">
          </a-entity>
        </a-entity>
      </a-entity>
    </template>

  </a-assets>
  
  <a-camera
    id="camera"
    position="0 4.3 -.5"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <a-entity 
    id="player"
    networked="template: #avatar-template; attachTemplateToLocal: false"
    position="0 0 0"
    player-logic>
    <a-camera
      position="0 4.3 -.5"
      raycaster="objects: .cantap"
      cursor="fuse: false; rayOrigin: mouse;"
      camera-sync>
      <a-entity id="health-bar" position="0 -0.5 -1">
        <a-plane width="0.5" height="0.1" color="yellow">
          <a-text value="Health" color="red" align="center" position="0 0.05 0.1" scale="0.4 0.4 0.4"></a-text>
        </a-plane>
      </a-entity>
    </a-camera>
  </a-entity>

</a-scene>
2

You can certainly attach the camera to your game character. We do this in our nav mesh sample proejct here which you can test:

In our responsive immersive script (when experience is opened on desktop 3D) the camera is attached to character. You wouldn’t want to do this for AR.

3

Hey Ian,
Thank you for your quick response, just for my clarification…the scene starts correctly how i want it to look. It is positioned slightly in front of the player-models head, with only the gun visible to the player but the avatar is still there behind for other players to see (image 1). The problem is that once you start moving this camera postion in relation to the avatar moves(image 2). Is the way to prevent that, by using the responsiveImmersiveComponent in the project you sent?
Image 1:

Screenshot 2024-05-22 at 12.29.44 PM
Screenshot 2024-05-22 at 12.29.44 PM2343×1623 494 KB

4

Image 2:

Screenshot_20240522-122746
Screenshot_20240522-1227461080×2280 109 KB

Also thanks for the assistance, still trying to figure out coding in the 3D space with JS lol.

5

For AR-based experiences, the camera position is controlled by the user’s movements with their device, so it should not be manually adjusted.

For example, unlike in a desktop 3D experience where you can freely move the virtual camera, the real-world camera in AR is inherently different due to its reliance on user movement. Therefore, it’s important to consider how the game mechanics will differ between these two contexts.

In AR, you might attach the assets to the camera, allowing them to move with the user’s device. Conversely, in a desktop 3D environment, you can attach the camera to the assets to follow their movements.