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:
Contact Us