# CameraGizmo

Class · extends [`HandleGizmo`](https://api.playcanvas.com/engine/classes/HandleGizmo.md) · category: Gizmo

Source: https://github.com/playcanvas/engine/blob/64089771243fe28a9b9d2b4de538b99b07c75097/src/extras/gizmo/handle/camera-gizmo.js#L55

Draws the view frustum of each attached camera entity, with a triangle marking its up direction.
Handles drag the near and far clip planes and the field of view or orthographic height. The
camera viewing the gizmo and disabled entities are skipped, but a disabled camera component is
still drawn.

```javascript
const layer = Gizmo.createLayer(app, 'Overlays', undefined, true);
const gizmo = new CameraGizmo(cameraComponent, layer);
gizmo.attach([otherCameraEntity]);
```

Relevant Engine API examples:

- [Camera Gizmo](https://playcanvas.github.io/#/gizmos/camera)

## Constructors

### constructor

```ts
new CameraGizmo(camera: CameraComponent, layer: Layer)
```

Creates a new CameraGizmo object.

**Parameters**

- `camera` ([`CameraComponent`](https://api.playcanvas.com/engine/classes/CameraComponent.md)): The camera component.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md)): The render layer.

**Example**

```ts
const gizmo = new CameraGizmo(camera, layer);
```

## Methods

### _drawShapes

```ts
protected _drawShapes(): void
```

Places the frustums of the attached cameras.

### _moveHandle

```ts
protected _moveHandle(handle: GizmoHandle, point: Vec3): void
```

Edits the clip range, field of view or orthographic height of the dragged camera.

**Parameters**

- `handle` (`GizmoHandle`): The dragged handle.
- `point` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): Where the handle is dragged to.

## Inherited from [HandleGizmo](https://api.playcanvas.com/engine/classes/HandleGizmo.md)

- `protected _app: AppBase`
- `protected _camera: CameraComponent`
- `protected _coordSpace: GizmoSpace = 'world'`
- `protected _device: GraphicsDevice`
- `protected _drag: GizmoHandle`
- `protected _dragging: boolean = false`
- `protected _handles: EventHandle[] = []`
- `protected _layer: Layer`
- `protected _mouseButtons: [boolean, boolean, boolean]`
- `protected _renderer: OverlayRenderer`
- `protected _scale: number = 1`
- `protected _theme: HandleGizmoTheme`
- `handles: boolean = true`
- `icon: boolean = true`
- `intersectShapes: Shape[] = []`
- `nodes: GraphNode[] = []`
- `preventDefault: boolean = true`
- `readout: boolean = true`
- `root: Entity`
- `snap: boolean = false`
- `snapAngleIncrement: number = 5`
- `protected get _requiresNodes(): boolean`
- `get camera(): CameraComponent` · `set camera(camera: CameraComponent)`
- `protected get cameraDir(): Vec3`
- `get coordSpace(): GizmoSpace` · `set coordSpace(value: GizmoSpace)`
- `get enabled(): boolean` · `set enabled(state: boolean)`
- `protected get facingDir(): Vec3`
- `get handleSize(): number` · `set handleSize(value: number)`
- `get iconSize(): number` · `set iconSize(value: number)`
- `get layer(): Layer` · `set layer(layer: Layer)`
- `get lineThickness(): number` · `set lineThickness(value: number)`
- `get mouseButtons(): [boolean, boolean, boolean]`
- `get size(): number` · `set size(value: number)`
- `get snapIncrement(): number` · `set snapIncrement(value: number)`
- `get theme(): HandleGizmoTheme`
- `protected _active(node: GraphNode | null, name: string, index: number): boolean`
- `protected _boxCorners(center: Vec3, rotation: Quat, halfExtents: Vec3): Vec3[]`
- `protected _boxHandles(center: Vec3, halfExtents: Vec3, options: BoxHandleOptions, pad?: number): void`
- `protected _createRay(mouseWPos: Vec3): Ray`
- `protected _detailed(center: Vec3, radius: number): boolean`
- `protected _getScreenScale(pos: Vec3): number`
- `protected _handle(position: Vec3, color: Color, node: GraphNode | null, name: string, index: number, origin: Vec3, dir: Vec3, inPlane?: boolean, guide?: boolean): boolean`
- `protected _icon(kind: OverlayIcon, position: Vec3, node: GraphNode): void`
- `protected _labelMarkup(text: string, color: Color): string`
- `protected _lineNormal(dir: Vec3, facing: Vec3, out: Vec3): boolean`
- `protected _readoutAt(position: Vec3, label: string, color: Color, value: number, unit?: string): void`
- `protected _readoutHtmlAt(position: Vec3, html: string): void`
- `protected _readoutValue(label: string, color: Color, value: number, unit?: string): string`
- `protected _resizeBox(handle: GizmoHandle, point: Vec3, rotation: Quat, startPosition: Vec3, startHalfExtents: Vec3, options: BoxHandleOptions, pad: number, position: Vec3, halfExtents: Vec3): void`
- `protected _snapAngle(value: number): number`
- `protected _snapLength(value: number): number`
- `protected _snapValue(value: number, increment: number): number`
- `protected _snapVector(vec: Vec3, increment: number): Vec3`
- `protected _sphereHandles(center: Vec3, rotation: Quat, radius: number, node: GraphNode | null, name: string): void`
- `protected _sphereOutline(center: Vec3, rotation: Quat, radius: number): void`
- `protected _sphereRings(center: Vec3, rotation: Quat, radius: number, weight?: number, alpha?: number): void`
- `protected _sphereSilhouette(center: Vec3, radius: number, out: Vec3): number`
- `protected _startHandle(handle: GizmoHandle): void`
- `protected _updatePosition(): void`
- `_updateRotation(): void`
- `_updateScale(): void`
- `attach(nodes?: GraphNode | GraphNode[]): void`
- `destroy(): void`
- `detach(): void`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `prerender(): void`
- `setTheme(partial: Partial<HandleGizmoTheme>): void`
- `update(): void`
- `static createLayer(app: AppBase, layerName?: string, layerIndex?: number, depth?: boolean): Layer`
- `static EVENT_HANDLEEND: string = 'handle:end'`
- `static EVENT_HANDLEMOVE: string = 'handle:move'`
- `static EVENT_HANDLESTART: string = 'handle:start'`
- `static EVENT_ICONSELECT: string = 'icon:select'`
- `static EVENT_NODESATTACH: string = 'nodes:attach'`
- `static EVENT_NODESDETACH: string = 'nodes:detach'`
- `static EVENT_POINTERDOWN: string = 'pointer:down'`
- `static EVENT_POINTERMOVE: string = 'pointer:move'`
- `static EVENT_POINTERUP: string = 'pointer:up'`
- `static EVENT_POSITIONUPDATE: string = 'position:update'`
- `static EVENT_RENDERUPDATE: string = 'render:update'`
- `static EVENT_ROTATIONUPDATE: string = 'rotation:update'`
- `static EVENT_SCALEUPDATE: string = 'scale:update'`