# ThreeStart (/docs/api/three-start)





`ThreeStart` is the entry point of every three-start project. It creates a [`ThreeContext`](/docs/api/three-context), accepts [`ContextModule`](/docs/api/context-module) instances, and bootstraps the entire scene in a defined order when `start()` is called.

```ts
import { ThreeStart } from "three-start";

const starter = new ThreeStart();
starter.addModules({ ... });
starter.start();

starter.mount(document.getElementById("three")!);
```

<Callout type="warn">
  `addModules()` must be called **before** `start()`. Modules participate in the bootstrap lifecycle (`onAwake` → `onStart`), so registering after `start()` throws.
</Callout>

<Callout type="info">
  `mount()` / `unmount()` can be called any number of times across the instance's lifetime — by default each pair starts and stops the render loop automatically. Pass `manageLoopManually: true` in [`ThreeStartOptions`](#threestartoptions) to disable this and control the loop yourself via `runLoop()` / `stopLoop()`.
</Callout>

Initialization [#initialization]

```ts
new ThreeStart(options?: ThreeStartOptions)
```

**`ThreeStartOptions`**

| Field | Type | Default | Description |
|---|---|---|---|
| `renderer?` | `THREE.Renderer` | — | The Three.js renderer to use. Defaults to a `WebGPURenderer` with antialiasing. |
| `camera?` | `THREE.PerspectiveCamera` | — | Override the default `PerspectiveCamera`. If not provided, one is created automatically and added to the scene. |
| `scene?` | `THREE.Scene` | — | Override the default `Scene`. If not provided, an empty scene is created. |
| `manageLoopManually?` | `boolean` | `false` | When `true`, the render loop is NOT started automatically on `mount()`. Call `starter.runLoop()` / `starter.stopLoop()` manually. |
| `autoInitRenderer?` | `boolean` | `true` | When `true`, calls `renderer.init()` inside the constructor. |

Properties [#properties]

| Name | Type | Description |
|---|---|---|
| `isStarted` | `boolean` | `true` once `start()` has been called. After this, modules can no longer be registered. |
| `ctx` | `ThreeContext` | The shared [`ThreeContext`](/docs/api/three-context) runtime (renderer, scene, camera, modules, events). Created in the constructor. |

Methods [#methods]

| Name | Type | Description |
|---|---|---|
| `start` | `() => this` | Bootstrap the scene: awaken registered [`ContextModule`](/docs/api/context-module)s, attach the context to the scene graph, and activate [`Object3DBehaviour`](/docs/api/object3d-behaviour) instances on every existing object. After `start()`, any objects added to the scene get bootstrapped automatically. No more modules can be registered after this call. |
| `addModules` | `(modules: Partial<ThreeStartModules>) => this` | Register [`ContextModule`](/docs/api/context-module) instances on the context. Can be called multiple times to register them incrementally — one at a time, in groups, or all at once. The same key cannot be registered twice (subsequent attempts are skipped with a warning). **Must be called before `start()`** — modules participate in the bootstrap lifecycle (`onAwake` → `onStart`), so registering after it throws. |
| `mount` | `(container: HTMLDivElement) => this` | Append the renderer canvas to a container and wire up resize + render loop (unless `manageLoopManually` is set). Fires `Mount`. |
| `unmount` | `() => this` | Remove the renderer canvas from DOM, disconnect resize observer. Fires `Unmount`. |
| `runLoop` | `() => this` | Start the render loop. Resumable after `stopLoop()`. |
| `stopLoop` | `() => this` | Stop the render loop. Resumable via `runLoop()`. |
| `dispose` | `() => this` | Tear everything down: unmount, stop loop, dispose renderer and timer. |