> ## 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.

# OpenThree

> OpenThree is a ready viewer.

It gives you a scene, a camera, a renderer, lights, a grid and a render loop. Use it when you do not have a Three.js scene of your own.

## Import

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

## Example

```typescript theme={null}
import { OpenThree, CameraMode } from '@opengeometry/floorkit';

export function mountViewer(container: HTMLElement): () => void {
  const viewer = new OpenThree(container, () => {});
  viewer.planCamera.CameraMode = CameraMode.Model;
  viewer.toggleGrid(false);
  return () => viewer.dispose();
}
```

## Notes

* The container must have a width and a height.
* The constructor starts the render loop. Do not add a second loop.
* Start the geometry kernel separately, before you create elements.
* `dispose()` stops the loop and removes the canvas.

## Constructor

```typescript theme={null}
constructor(container: HTMLElement, callback: any);
```

## Properties

<ResponseField name="scene" type="THREE.Scene" />

<ResponseField name="renderer" type="THREE.WebGLRenderer" />

<ResponseField name="planCamera" type="PlanCamera" />

<ResponseField name="threeCamera" type="THREE.PerspectiveCamera" />

<ResponseField name="container" type="HTMLElement" />

<ResponseField name="theme" type="ICanvasTheme" />

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

<ResponseField name="openGrid" type="THREE.GridHelper | undefined" />

## Methods

### generateTheme

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

### toggleTheme

```typescript theme={null}
toggleTheme(name: activeTheme): void;
```

### setup

```typescript theme={null}
setup(): Promise<void>;
```

### toggleGrid

```typescript theme={null}
toggleGrid(show: boolean): void;
```

### hexToRgb

```typescript theme={null}
hexToRgb(hex: number): THREE.Vector3;
```

### captureView

```typescript theme={null}
captureView(options: {
    width: number;
    height: number;
    camera: THREE.Camera;
    transparent?: boolean;
}): string;
```

Render the scene from `camera` to a PNG data-URL, off-screen at an arbitrary resolution.

### enableAnalyticLod

```typescript theme={null}
enableAnalyticLod(options: AnalyticWorkerOptions & AnalyticLodOptions): Promise<void>;
```

Configure public SDK worker assets; model registration is independent of camera requests and scene snapshots.

### disableAnalyticLod

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

### syncAnalyticLod

```typescript theme={null}
syncAnalyticLod(): Promise<void>;
```

Call after authored tree changes; unchanged bodies never resend their serialized models.

### refineAnalyticView

```typescript theme={null}
refineAnalyticView(deflection: number): Promise<void>;
```

Await this before synchronous image capture to require a world-space chord error.

### dispose

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

### animate

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

## Types

### ICanvasTheme

```typescript theme={null}
interface ICanvasTheme {
  [key: string]: {
    background: string;
    color: string;
    gridColor: number;
  };
}
```

### activeTheme

```typescript theme={null}
type activeTheme = 'light' | 'dark' | 'darkBlue';
```

## Related

* [`PlanCamera`](/floorkit/api/views/plan-camera)


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