Skip to Content
🎉 @playcanvas/react 0.3.0! Now with React 19 support. Read more →
DocsAPIComponentsCamera

Camera

In order to view a scene, you need a camera. The Camera component enables an Entity to render a scene. You can use the entity’s position and rotation to control the camera.

Usage

A Camera is a component, so you attach it to an Entity and the camera will render the scene from the entity’s position and rotation.

import { Camera } from '@playcanvas/react/components' <Entity> <Camera fov={28} clearColor="rebeccapurple" /> </Entity>

Learn more about the Camera Component in the PlayCanvas documentation.

Props

The following props are based on PlayCanvas version 2.3.3. This documentation is automatically generated from the TypeScript types of the installed PlayCanvas package.

NameTypeDefault
onPostprocessingFunction | null

Custom function that is called when postprocessing should execute.

renderPassesRenderPass[]

Sets the render passes the camera uses for rendering, instead of its default rendering. Set this to null to return to the default behavior. Gets the render passes the camera uses for rendering, instead of its default rendering.

gammaCorrectionnumber

Sets the gamma correction to apply when rendering the scene. Can be:

  • GAMMA_NONE
  • GAMMA_SRGB

Defaults to GAMMA_SRGB. Gets the gamma correction used when rendering the scene.

toneMappingnumber

Sets the tonemapping transform to apply to the rendered color buffer. Can be:

  • TONEMAP_LINEAR
  • TONEMAP_FILMIC
  • TONEMAP_HEJL
  • TONEMAP_ACES
  • TONEMAP_ACES2
  • TONEMAP_NEUTRAL

Defaults to TONEMAP_LINEAR. Gets the tonemapping transform applied to the rendered color buffer.

fogFogParams

Sets the fog parameters. If this is not null, the camera will use these fog parameters instead of those specified on the Scene#fog . Gets a FogParams that defines fog parameters, or null if those are not set.

aperturenumber

Sets the camera aperture in f-stops. Default is 16. Higher value means less exposure. Gets the camera aperture in f-stops.

aspectRationumber

Sets the aspect ratio (width divided by height) of the camera. If aspectRatioMode is ASPECT_AUTO, then this value will be automatically calculated every frame, and you can only read it. If it’s ASPECT_MANUAL, you can set the value. Gets the aspect ratio (width divided by height) of the camera.

aspectRatioModenumber

Sets the aspect ratio mode of the camera. Can be:

  • ASPECT_AUTO: aspect ratio will be calculated from the current render target’s width divided by height.
  • ASPECT_MANUAL: use the aspectRatio value.

Defaults to ASPECT_AUTO. Gets the aspect ratio mode of the camera.

clearColorCssColor

Sets the camera component’s clear color. Defaults to [0.75, 0.75, 0.75, 1]. Gets the camera component’s clear color.

clearColorBufferboolean

Sets whether the camera will automatically clear the color buffer before rendering. Defaults to true. Gets whether the camera will automatically clear the color buffer before rendering.

clearDepthBufferboolean

Sets whether the camera will automatically clear the depth buffer before rendering. Defaults to true. Gets whether the camera will automatically clear the depth buffer before rendering.

clearStencilBufferboolean

Sets whether the camera will automatically clear the stencil buffer before rendering. Defaults to true. Gets whether the camera will automatically clear the stencil buffer before rendering.

cullFacesboolean

Sets whether the camera will cull triangle faces. If true, the camera will take material.cull into account. Otherwise both front and back faces will be rendered. Defaults to true. Gets whether the camera will cull triangle faces.

disablePostEffectsLayernumber

Sets the layer id of the layer on which the post-processing of the camera stops being applied to. Defaults to LAYERID_UI, which causes post-processing to not be applied to UI layer and any following layers for the camera. Set to undefined for post-processing to be applied to all layers of the camera. Gets the layer id of the layer on which the post-processing of the camera stops being applied to.

farClipnumber

Sets the distance from the camera after which no rendering will take place. Defaults to 1000. Gets the distance from the camera after which no rendering will take place.

flipFacesboolean

Sets whether the camera will flip the face direction of triangles. If set to true, the camera will invert front and back faces. Can be useful for reflection rendering. Defaults to false. Gets whether the camera will flip the face direction of triangles.

fovnumber

Sets the field of view of the camera in degrees. Usually this is the Y-axis field of view, see CameraComponent#horizontalFov . Used for PROJECTION_PERSPECTIVE cameras only. Defaults to 45. Gets the field of view of the camera in degrees.

frustumCullingboolean

Sets whether frustum culling is enabled. This controls the culling of mesh instances against the camera frustum, i.e. if objects outside of the camera’s frustum should be omitted from rendering. If false, all mesh instances in the scene are rendered by the camera, regardless of visibility. Defaults to false. Gets whether frustum culling is enabled.

horizontalFovboolean

Sets whether the camera’s field of view (fov) is horizontal or vertical. Defaults to false (meaning it is vertical be default). Gets whether the camera’s field of view (fov) is horizontal or vertical.

layersnumber[]

Sets the array of layer IDs (Layer#id ) to which this camera should belong. Don’t push, pop, splice or modify this array, if you want to change it, set a new one instead. Defaults to [LAYERID_WORLD, LAYERID_DEPTH, LAYERID_SKYBOX, LAYERID_UI, LAYERID_IMMEDIATE]. Gets the array of layer IDs (Layer#id ) to which this camera belongs.

jitternumber

Sets the jitter intensity applied in the projection matrix. Used for jittered sampling by TAA. A value of 1 represents a jitter in the range of [-1, 1] of a pixel. Smaller values result in a crisper yet more aliased outcome, whereas increased values produce a smoother but blurred result. Defaults to 0, representing no jitter. Gets the jitter intensity applied in the projection matrix.

nearClipnumber

Sets the distance from the camera before which no rendering will take place. Defaults to 0.1. Gets the distance from the camera before which no rendering will take place.

orthoHeightnumber

Sets the half-height of the orthographic view window (in the Y-axis). Used for PROJECTION_ORTHOGRAPHIC cameras only. Defaults to 10. Gets the half-height of the orthographic view window (in the Y-axis).

prioritynumber

Sets the priority to control the render order of this camera. Cameras with a smaller priority value are rendered first. Defaults to 0. Gets the priority to control the render order of this camera.

projectionnumber

Sets the type of projection used to render the camera. Can be:

  • PROJECTION_PERSPECTIVE: A perspective projection. The camera frustum resembles a truncated pyramid.
  • PROJECTION_ORTHOGRAPHIC: An orthographic projection. The camera frustum is a cuboid.

Defaults to PROJECTION_PERSPECTIVE. Gets the type of projection used to render the camera.

rect[number, number, number, number]

Sets the rendering rectangle for the camera. This controls where on the screen the camera will render in normalized screen coordinates. Defaults to [0, 0, 1, 1]. Gets the rendering rectangle for the camera.

renderSceneColorMapboolean
renderSceneDepthMapboolean
renderTargetRenderTarget

Sets the render target to which rendering of the camera is performed. If not set, it will render simply to the screen. Gets the render target to which rendering of the camera is performed.

scissorRect[number, number, number, number]

Sets the scissor rectangle for the camera. This clips all pixels which are not in the rectangle. The order of the values is [x, y, width, height]. Defaults to [0, 0, 1, 1]. Gets the scissor rectangle for the camera.

sensitivitynumber

Sets the camera sensitivity in ISO. Defaults to 1000. Higher value means more exposure. Gets the camera sensitivity in ISO.

shutternumber

Sets the camera shutter speed in seconds. Defaults to 1/1000s. Longer shutter means more exposure. Gets the camera shutter speed in seconds.

systemComponentSystem

The ComponentSystem used to create this Component.

entityEntity

The Entity that this Component is attached to.

enabledboolean

Sets the enabled state of the component. Gets the enabled state of the component.

Last updated on