# CameraComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<CameraComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/b95efbfac5c64c11284a27e8e18224700d05fc77/src/components/camera-component.ts#L54

The CameraComponentElement interface provides properties and methods for manipulating
[`<pc-camera>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera/) elements.
The CameraComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

Engine component: [CameraComponent](https://api.playcanvas.com/engine/classes/CameraComponent.html) (`camera`).

**elementSummary** The `<pc-camera>` element renders the scene from its entity's transform, with
attributes for the projection, field of view, clip planes, clear color and tonemapping. Must be a
child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### arAvailable

```ts
get arAvailable(): boolean
```

Whether immersive AR is available. Independent of [vrAvailable](https://api.playcanvas.com/web-components/classes/CameraComponentElement.md#vravailable): a device can offer
either mode without the other.

### clearColor

```ts
get clearColor(): Color
set clearColor(value: Color)
```

Gets the clear color of the camera.

### clearColorBuffer

```ts
get clearColorBuffer(): boolean
set clearColorBuffer(value: boolean)
```

Gets the clear color buffer of the camera.

### clearDepth

```ts
get clearDepth(): number
set clearDepth(value: number)
```

Gets the depth value the depth buffer is cleared to.

### clearDepthBuffer

```ts
get clearDepthBuffer(): boolean
set clearDepthBuffer(value: boolean)
```

Gets the clear depth buffer of the camera.

### clearStencilBuffer

```ts
get clearStencilBuffer(): boolean
set clearStencilBuffer(value: boolean)
```

Gets the clear stencil buffer of the camera.

### component

```ts
get component(): CameraComponent | null
```

Gets the underlying PlayCanvas camera component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### cullFaces

```ts
get cullFaces(): boolean
set cullFaces(value: boolean)
```

Gets the cull faces of the camera.

### farClip

```ts
get farClip(): number
set farClip(value: number)
```

Gets the far clip distance of the camera.

### flipFaces

```ts
get flipFaces(): boolean
set flipFaces(value: boolean)
```

Gets the flip faces of the camera.

### fov

```ts
get fov(): number
set fov(value: number)
```

Gets the field of view of the camera.

### frustumCulling

```ts
get frustumCulling(): boolean
set frustumCulling(value: boolean)
```

Gets the frustum culling of the camera.

### gamma

```ts
get gamma(): "linear" | "srgb"
set gamma(value: "linear" | "srgb")
```

Gets the gamma correction of the camera.

### horizontalFov

```ts
get horizontalFov(): boolean
set horizontalFov(value: boolean)
```

Gets whether the camera's field of view (fov) is horizontal or vertical.

### nearClip

```ts
get nearClip(): number
set nearClip(value: number)
```

Gets the near clip distance of the camera.

### orthoHeight

```ts
get orthoHeight(): number
set orthoHeight(value: number)
```

Gets the orthographic height of the camera.

### priority

```ts
get priority(): number
set priority(value: number)
```

Gets the priority of the camera.

### projection

```ts
get projection(): "perspective" | "orthographic"
set projection(value: "perspective" | "orthographic")
```

Gets the projection of the camera.

### projectionOffset

```ts
get projectionOffset(): Vec2
set projectionOffset(value: Vec2)
```

Gets the offset of the projection window from the view direction.

### rect

```ts
get rect(): Vec4
set rect(value: Vec4)
```

Gets the rect of the camera.

### scissorRect

```ts
get scissorRect(): Vec4
set scissorRect(value: Vec4)
```

Gets the scissor rect of the camera.

### tonemap

```ts
get tonemap(): "linear" | "none" | "filmic" | "hejl" | "aces" | "aces2" | "neutral"
set tonemap(value: "linear" | "none" | "filmic" | "hejl" | "aces" | "aces2" | "neutral")
```

Gets the tone mapping of the camera.

### vrAvailable

```ts
get vrAvailable(): boolean
```

Whether immersive VR is available. Independent of [arAvailable](https://api.playcanvas.com/web-components/classes/CameraComponentElement.md#aravailable): a device can offer
either mode without the other.

## Methods

### endXr

```ts
endXr(): void
```

Ends the camera's XR mode.

### getInitialComponentData

```ts
protected getInitialComponentData(): { clearColor: Color; clearColorBuffer: boolean; clearDepth: number; clearDepthBuffer: boolean; clearStencilBuffer: boolean; cullFaces: boolean; farClip: number; flipFaces: boolean; fov: number; frustumCulling: boolean; gammaCorrection: 0 | 1; horizontalFov: boolean; nearClip: number; orthoHeight: number; priority: number; projection: number; projectionOffset: Vec2; rect: Vec4; scissorRect: Vec4; toneMapping: number }
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties.

**Returns** `{ clearColor: Color; clearColorBuffer: boolean; clearDepth: number; clearDepthBuffer: boolean; clearStencilBuffer: boolean; cullFaces: boolean; farClip: number; flipFaces: boolean; fov: number; frustumCulling: boolean; gammaCorrection: 0 | 1; horizontalFov: boolean; nearClip: number; orthoHeight: number; priority: number; projection: number; projectionOffset: Vec2; rect: Vec4; scissorRect: Vec4; toneMapping: number }`: The initial component data.

### startXr

```ts
startXr(type: "immersive-ar" | "immersive-vr", space: "bounded-floor" | "local" | "local-floor" | "unbounded" | "viewer"): void
```

Starts the camera in XR mode.

**Parameters**

- `type` (`"immersive-ar" | "immersive-vr"`): The type of XR mode to start.
- `space` (`"bounded-floor" | "local" | "local-floor" | "unbounded" | "viewer"`): The space to start the camera in.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `protected initComponent(): void`
- `ready(): Promise<CameraComponentElement>`