> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ploterr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PlanCamera

> PlanCamera changes one camera between a top-down plan view and a 3D model view.

## Import

```typescript theme={null}
import { PlanCamera } from '@opengeometry/floorkit';
```

## Example

```typescript theme={null}
import * as THREE from 'three';
import CameraControls from 'camera-controls';
import { PlanCamera, CameraMode } from '@opengeometry/floorkit';

export function configureCamera(
  camera: THREE.PerspectiveCamera,
  container: HTMLElement,
): PlanCamera {
  CameraControls.install({ THREE });
  const navigation = new PlanCamera(camera, container);
  navigation.CameraMode = CameraMode.Plan;
  return navigation;
}
```

## Notes

* Call `update()` in each frame.
* A change of mode resets the position and the target of the camera.
* In Plan mode, the left mouse button pans. In Model mode, it rotates.
* Await `fitToElement` before work that depends on the new camera position.
* If you own the camera, update its projection when the size changes, and dispose `navigation.controls` at the end. `OpenThree` does this for its own camera.

## Constructor

```typescript theme={null}
constructor(camera: THREE.PerspectiveCamera | THREE.OrthographicCamera, container: HTMLElement);
```

## Properties

<ResponseField name="controls" type="CameraControls" />

<ResponseField name="clock" type="THREE.Clock" />

<ResponseField name="CameraMode" type="CameraMode" />

<ResponseField name="position" type="THREE.Vector3">
  Read-only.
</ResponseField>

<ResponseField name="target" type="THREE.Vector3">
  Read-only.
</ResponseField>

## Methods

### setupCamera

```typescript theme={null}
setupCamera(): void;
```

### fitToElement

```typescript theme={null}
fitToElement(target: THREE.Object3D | THREE.Object3D[]): Promise<void>;
```

### update

```typescript theme={null}
update(): boolean;
```

## Types

### CameraMode

```typescript theme={null}
enum CameraMode {
  Plan = 0,
  Model = 1,
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.