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

# Use your Three.js scene

> Show Floorkit geometry in the scene, camera and renderer that you own.

export const LiveExample = ({path, title = 'Live example', height = 460}) => {
  return <Frame>
      <iframe src={`https://floorkit-examples.ploterr.com/floorkit/${path}?embed=1`} ref={frame => {
    if (!frame || !['localhost', '127.0.0.1'].includes(window.location.hostname)) return;
    const local = `http://localhost:5555/${path}?embed=1`;
    if (frame.src !== local) frame.src = local;
  }} title={title} loading="lazy" allow="fullscreen" style={{
    width: '100%',
    height: `${height}px`,
    border: 0,
    display: 'block'
  }} />
    </Frame>;
};

Floorkit does not take over your 3D view. It makes Three.js objects, and you add them to your scene. Your lights, your camera and your render loop stay as they are.

<LiveExample path="guides/use-your-threejs-scene" />

For an application with views, sheets, and saving, use [ProjectManager](/floorkit/api/editor/project-manager) as described in [How Floorkit works](/floorkit/concepts/architecture). This guide shows the direct `BuildingSession` route.

## Before you start

You did the [installation](/floorkit/installation).

## The sequence

<Steps>
  <Step title="Make your scene">
    Make the scene, the camera, the renderer and the camera controls. Put the canvas in an element
    that has a width and a height.
  </Step>

  <Step title="Start the kernel">
    Await `new Floorkit().setupOpenGeometry(wasmURL)` one time. Do this before you create geometry.
  </Step>

  <Step title="Add the building">
    Create a `BuildingSession` and add `session.root` to the scene.
  </Step>

  <Step title="Render">Render the scene in your loop, as you do for other objects.</Step>
</Steps>

```typescript theme={null}
import * as THREE from 'three';
import { BuildingSession, Floorkit, type BuildingModel } from '@opengeometry/floorkit';

export async function showBuilding(
  scene: THREE.Scene,
  wasmURL: string,
  model: BuildingModel,
): Promise<BuildingSession> {
  await new Floorkit().setupOpenGeometry(wasmURL);
  const session = new BuildingSession(model);
  scene.add(session.root);
  return session;
}
```

## Find an element in the scene

After a build, you can get the 3D object of an element by its id in the model.

```typescript theme={null}
export function elementObject(session: BuildingSession, id: string): THREE.Object3D | undefined {
  return session.currentBuild.elementsById.get(id);
}
```

Read the object again by its id after an edit. A changed element can be a new object; unchanged elements keep their objects. See [Editing and history](/floorkit/concepts/editing-and-history#keep-an-edit-fast).

## Text labels

Datums, dimensions and room labels draw text. Before you create them, give Floorkit your scene and a perspective camera:

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

export async function prepareText(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
  await setGlyphScene(scene, camera);
}
```

## Clean up

When the view closes, release things in this sequence:

1. Stop your render loop and remove your listeners.
2. Dispose the editors, if you use them.
3. Remove `session.root` from the scene and call `session.dispose()`.
4. Dispose your controls and your renderer.

## Rules

* Do not move, turn or delete the objects below `session.root`. Use an [edit command](/floorkit/concepts/editing-and-history).
* The storey groups belong to the session. An object that you add to a storey group is not kept when the session builds that storey again.
* Do not put your own object in place of an entry of `session.currentBuild.elementsById`. The session removes and disposes that object when it replaces the element.
* Use one copy of Three.js for your app and for Floorkit.
* If you do not have a scene, [`OpenThree`](/floorkit/api/views/open-three) gives you a ready viewer.

## Next

<CardGroup cols={2}>
  <Card title="Add a 3D editor" icon="cube" href="/floorkit/guides/add-a-3d-editor">
    Let users edit in this scene.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/floorkit/troubleshooting">
    Fix a blank canvas.
  </Card>
</CardGroup>


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