Search code examples
javascriptaframe

Aframe camera disconnects from rig when page is loaded

I am new to Aframe and I came to one problem which I cant solve. When my Glitch page is loaded, the camera sometimes somehow disconnects from rig (player) head. I was looking for what could possibly cause this problem and I only saw this happening when I added render cam child to main camera (because of minimap).

In console I have just one warning:

three.js:3184 THREE.Box3: .getCenter() target is now required
e.getCenter @ three.js:3184

I am using for 2nd cam (minimap) this component: https://github.com/jgbarah/aframe-playground/tree/master/camrender-01

Any tips or suggestions?

Thanks.

Code:

<a-assets>
   <canvas id="cam2" position="0 0 0"></canvas>
</a-assets>
<a-entity id="bodyOfPlayer"> 
         <a-entity   
                    id="rig"        
                    position = "0 0 0"
                    rotation="0 0 0"
                    movement-controls   
                    gaze-interaction  
                    kinematic-body
                    >
                  //this camera I always need to have active because it is main camera of player in first person
                  <a-entity
                            id="headOfPlayer"
                            camera 
                            position="0 1.6 0"
                            rotation="0 0 0"
                            look-controls="pointerLockEnabled:false"                          
                            >                  
                             
                             <a-sphere class="head" visible="true" random-color></a-sphere>
                    
                             <a-circle position="-1.2 0.58 -1" rotation="0 0 0" scale="0.2 0.2 0.2" width="0.41" height="0.41"
                             material="src:#cam2; opacity: .95" canvas-updater></a-circle>
                             <a-image src="#map" position="-1.2 0.58 -1" width="0.53" height="0.53"></a-image>
                        
                             <a-entity class="rayhead" cursor raycaster="objects: .clickable; showLine: true; far: 500" line="color: white; opacity: 1" position="0 0 0" visible="false"></a-entity> 
                            <a-entity cursor="fuse: false" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" position="0 0 -1"></a-entity> 
                  </a-entity>
          //this camera is just for minimap -> not active one, it is view from top on player in fixed canvas on screen
           <a-entity camera="active: false" camrender="cid: cam2" position="0 15 0" rotation="-90 0 0"></a-entity>
         </a-entity>
      </a-entity>
Solution

  • You're probably hitting this issue, where <template> or <script> tags between the <a-scene> and the camera entity interfere with the intended behaviour.

    It's quite easy to reproduce:

    enter image description here

    above, the default camera was injected, and you have two cameras. Now if you move it up:

    enter image description here

    there is no additional camera. As intended.

    Moving the camera up is pretty much a "workaround", you can also try preloading like ajai suggested, or removing the default camera after the scene loads (Diarmid McKenzies code from the linked issue):

    // grab the scene
const sceneEl = document.querySelector('a-scene')
// if the camera id is not matching our camera
if (sceneEl.camera.el.id !== 'headOfPlayer') {    
    console.log("Deleting unwanted A-Frame default camera")
    const wrongCameraEntity = this.el.sceneEl.camera.el;
    const cameraEntity = document.getElementById('headOfPlayer');
    cameraEntity.setAttribute('camera', 'active', true); // activate our camera
    wrongCameraEntity.parentEl.removeChild(wrongCameraEntity); // remove the other one
}