Search code examples
aframe

Multiple Distinct Cameras in A-Frame

I am working on a scene with multiple cameras set at distinct predefined positions and rotations. I noticed when I look around using the mouse (or in VR mode), the camera rotation is linked between cameras. So I thought this could be avoided by using the attribute active: false but both cameras still rotate together. Below is an example scene where both cameras are at the same position and feature an <a-box> in their field of view, notice that when you look around the scene box cubes (children of two separate cameras) move in unison. Is there a way to prevent the inactive camera from following the rotation of the active camera so that the blue cube (with the inactive camera) would stay stationary?

Also, there are no console errors related to A-Frame in this script. Your assistance is greatly appreciated, many thanks in advance for your time.

<!DOCTYPE html>
<html>

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

<body>
    <a-scene>
        <a-camera active="true" look-controls>
            <a-box color="red" position="-2 0 -10"></a-box>
        </a-camera>
        <a-camera active="false" look-controls>
            <a-box color="blue" position="2 0 -10"></a-box>
        </a-camera>
        <a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
    </a-scene>
</body>

</html>
Solution

  • A viable solution for this is to enable and disable the look-controls on the cameras when switching between them. This can be done in JavaScript with :
    newCameraElement.setAttribute('look-controls', 'enabled', true); and
    oldCameraElement.setAttribute('look-controls', 'enabled', false);
    Here's a revised version of the question's example that initially disables the other camera's look-controls to provide the desired behaviour of having distinct cameras:

    <!DOCTYPE html>
<html>

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

<body>
    <a-scene>
        <a-camera active="true" look-controls>
            <a-box color="red" position="-2 0 -10"></a-box>
        </a-camera>
        <a-camera active="false" look-controls="enabled: false">
            <a-box color="blue" position="2 0 -10"></a-box>
        </a-camera>
        <a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
    </a-scene>
</body>

</html>