ThreeJs Cameras ArrayCamera

ArrayCamera in Three.js is a type of camera that enables multiple cameras to render scenes simultaneously. It allows the creation of an array of cameras with different perspectives, useful for split-screen or multi-view applications, rendering each view with a separate camera.

Constructor : ArrayCamera( array : Array )

The ArrayCamera constructor in Three.js takes an array of cameras as its parameter. It creates an array camera that can render scenes from multiple perspectives simultaneously, combining the views provided by the cameras in the array.

Methods

These are the following methods that ArrayCamera provides:

Methods name	Description
clearViewOffset():	Clears the view offset of the camera, resetting it to default values. Returns `undefined`. Useful to remove any previously set view offset.
getEffectiveFOV():	Returns the effective vertical field of view (FOV) of the camera, accounting for zoom and aspect ratio adjustments. Returns a float.
getFilmHeight():	Returns the height of the film/sensor in the camera. Useful for understanding the physical dimensions of the film. Returns a float.
getFilmWidth():	Returns the width of the film/sensor in the camera. Provides insight into the physical dimensions of the film. Returns a float.
getFocalLength():	Returns the focal length of the camera, influencing the perspective and depth of field. Returns a float representing the focal length in millimeters.
setFocalLength(focalLength: Float):	Sets the focal length of the camera to the specified value. Adjusting the focal length affects the perspective. Returns `undefined`.
setViewOffset(fullWidth: Float, fullHeight: Float, x: Float, y: Float, width: Float, height: Float):	Sets a view offset, allowing rendering only a portion of the camera’s view. Parameters define the full and offset dimensions. Returns `undefined`.
updateProjectionMatrix():	Updates the camera’s projection matrix based on its current properties. Essential after any changes to camera parameters. Returns `undefined`.
toJSON(meta: Object): Object:	Serializes the camera to a JSON object. Optionally takes a metadata object. Useful for saving camera configurations. Returns a JSON representation of the camera.

Properties

These are the following properties of ArrayCamera:

Properties name	Description
.aspect : Float	The .aspect property in Three.js represents the aspect ratio of a camera. It is a float value calculated as the width of the camera’s view divided by its height.
.far : Float :	The .far property in Three.js is a float value representing the far clipping plane of a camera. It determines the maximum distance from the camera at which objects are visible.
.filmGauge : Float	The .filmGauge property in Three.js is a float value representing the physical width of the film/sensor in a camera. It influences the field of view and depth of field calculations.
.filmOffset : Float	The .filmOffset property in Three.js is a float value representing the offset of the film/sensor from the center. It is used to shift the film/sensor position within the camera.
.focus : Float	The .focus property in Three.js is a float value representing the focus distance of a camera. It determines the distance from the camera at which objects are sharply in focus.
.fov : Float	The .fov property in Three.js is a float value representing the vertical field of view of a camera. It determines the extent of the scene visible to the camera vertically.
.isPerspectiveCamera : Boolean	The .isPerspectiveCamera property in Three.js is a boolean value indicating whether a camera is of type PerspectiveCamera. It helps identify the camera type within the framework.
.near : Float	The .near property in Three.js is a float value representing the near clipping plane of a camera. It determines the minimum distance from the camera at which objects are visible.
.view : Object	The .view property in Three.js is an object representing the viewport of a camera. It contains properties like `fullX`, `fullY`, `width`, and `height` defining the camera’s view.
.zoom : number	The .zoom property in Three.js is a number representing the zoom factor of a camera. It influences the magnification level, affecting the size of objects in the scene when rendered.

Example: We have used Three.js to create a scene with two rotating cubes viewed from separate cameras. The cameras and scene respond to window resizing, providing a simple example of multiple cameras in Three.js.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Three.js Multiple Cameras Example</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from
'https://threejs.org/build/three.module.js';

        // Create scene
        const scene = new THREE.Scene();

        // Create cameras
        const camera1 = new THREE.PerspectiveCamera(75,
            window.innerWidth
            / window.innerHeight, 0.1, 1000);
        const camera2 = new THREE.PerspectiveCamera(75,
            window.innerWidth
            / window.innerHeight, 0.1, 1000);

        // Position cameras
        camera1.position.set(0, 0, 5);
        camera2.position.set(0, 0, -5);

        // Create renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Create cube
        const geometry = new THREE.BoxGeometry();
        const material =
                  new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Handle window resize
        window.addEventListener('resize', () => {
            const newWidth = window.innerWidth;
            const newHeight = window.innerHeight;

            camera1.aspect = newWidth / newHeight;
            camera1.updateProjectionMatrix();

            camera2.aspect = newWidth / newHeight;
            camera2.updateProjectionMatrix();

            renderer.setSize(newWidth, newHeight);
        });

        // Animation loop
        const animate = () => {
            requestAnimationFrame(animate);

            // Rotate cube
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            // Render scene with both cameras
            renderer.setViewport(0, 0, window.innerWidth / 2,
                window.innerHeight);
            renderer.setScissor(0, 0, window.innerWidth / 2,
                window.innerHeight);
            renderer.setScissorTest(true);
            renderer.render(scene, camera1);

            renderer.setViewport(window.innerWidth / 2,
                0, window.innerWidth / 2, window.innerHeight);
            renderer.setScissor(window.innerWidth / 2,
                0, window.innerWidth / 2, window.innerHeight);
            renderer.render(scene, camera2);
        };

        // Start animation loop
        animate();
    </script>
</body>

</html>

Output:

Example 2: This exampleshows that we are using Three.js to create a rotating cube in a scene viewed through a single PerspectiveCamera. The code handles window resizing, ensuring the camera’s aspect ratio is updated accordingly. The cube rotates continuously within the specified camera perspective.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Three.js ArrayCamera Example</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from
'https://threejs.org/build/three.module.js';

        // Create scene
        const scene = new THREE.Scene();

        // Create a PerspectiveCamera
        const mainCamera = new THREE.PerspectiveCamera(75,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        mainCamera.position.set(0, 0, 5);

        // Create renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Create cube
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.
            MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Handle window resize
        window.addEventListener('resize', () => {
            const newWidth = window.innerWidth;
            const newHeight = window.innerHeight;

            mainCamera.aspect = newWidth / newHeight;
            mainCamera.updateProjectionMatrix();

            renderer.setSize(newWidth, newHeight);
        });

        // Animation loop
        const animate = () => {
            requestAnimationFrame(animate);

            // Rotate cube
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            // Render scene with main camera
            renderer.setViewport(0, 0,
                window.innerWidth, window.innerHeight);
            renderer.setScissor(0, 0,
                window.innerWidth, window.innerHeight);
            renderer.setScissorTest(true);
            renderer.render(scene, mainCamera);
        };

        // Start animation loop
        animate();
    </script>
</body>

</html>

Output: