### setup() Method

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/interfaces/Configurable.md

Details on how to use the setup method to configure a component implementing the Configurable interface.

```APIDOC
## setup()

> **setup**: (`config`?) => `void` | `Promise`<`void`>

Use the provided configuration to set up the tool.

### Parameters

#### Path Parameters

- **config** (`Partial`<`U`>)? - Optional - The configuration object for setup.

### Returns

`void` | `Promise`<`void`>
```

--------------------------------

### Setup Simple Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Components/Core/Worlds.mdx

Use the `setup` method of `SimpleScene` to add basic elements like lights to the scene.

```javascript
world.scene.setup();
```

--------------------------------

### setup(config?)

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/ShadowedScene/index.html

Sets up the component with a configuration object. This method implements the setup from Configurable and overrides the one from SimpleScene.

```APIDOC
## setup(config?)

### Description
Sets up the component with a configuration object.

### Method
`setup`

### Parameters
#### Path Parameters
- **config** (Partial<ShadowedSceneConfig>) - Optional - Configuration object for the ShadowedScene.

### Returns
`void`
```

--------------------------------

### Install UI Components

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/UserInterface/index.html

Install the core library using npm. This is the first step to using the UI components.

```bash
npm i @thatopen/ui
```

--------------------------------

### Setup Simple Scene with OBC

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/UserInterface/OBC/ModelsList/index.html

Initializes OBC components and creates a basic scene with a camera and renderer. Ensure you have a Worlds tutorial setup if unfamiliar.

```javascript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<OBC.SimpleScene, OBC.SimpleCamera, OBC.SimpleRenderer>();
world.name = "main";
const sceneComponent = new OBC.SimpleScene(components);
sceneComponent.setup();
world.scene = sceneComponent;
const viewport = document.createElement("bim-viewport");
const rendererComponent = new OBC.SimpleRenderer(components, viewport);
world.renderer = rendererComponent;
const cameraComponent = new OBC.SimpleCamera(components);
world.camera = cameraComponent;
viewport.addEventListener("resize", () => {
  rendererComponent.resize();
  cameraComponent.updateAspect();
});
const viewerGrids = components.get(OBC.Grids);
viewerGrids.create(world);
components.init();
```

--------------------------------

### Setup UI Elements

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Fragments/Fragments/IfcImporter/HelloWorldSchema.mdx

Initialize the UI manager and get references to UI elements such as the JSON viewer, expand/collapse buttons, and file loading buttons.

```javascript
BUI.Manager.init();

const jsonViewer = document.getElementById("json-viewer") as any;

const expandBtn = document.getElementById("expand-btn")!;
expandBtn.addEventListener("click", () => {
  jsonViewer.expanded = true;
});

const collapseBtn = document.getElementById("collapse-btn")!;
collapseBtn.addEventListener("click", () => {
  jsonViewer.expanded = false;
});

const loadFileBtn = document.getElementById("load-file-btn")!;
const loadWallBtn = document.getElementById("load-wall-btn")!;
const downloadBtn = document.getElementById("download-btn")!;
```

--------------------------------

### Setup Simple Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/UserInterface/OBC/ModelsList.mdx

Create a basic scene with a camera and renderer. This setup is essential for rendering your BIM models.

```javascript
const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();
world.name = "main";

const sceneComponent = new OBC.SimpleScene(components);
sceneComponent.setup();
world.scene = sceneComponent;

const viewport = document.createElement("bim-viewport");
const rendererComponent = new OBC.SimpleRenderer(components, viewport);
world.renderer = rendererComponent;

const cameraComponent = new OBC.SimpleCamera(components);
world.camera = cameraComponent;

viewport.addEventListener("resize", () => {
  rendererComponent.resize();
  cameraComponent.updateAspect();
});

const viewerGrids = components.get(OBC.Grids);
viewerGrids.create(world);

components.init();
```

--------------------------------

### Run Local Server

Source: https://github.com/thatopen/engine_docs/blob/main/docs/contributing.md

Start a local development server to view changes in real-time. This command is useful for testing modifications to example files.

```bash
yarn dev
```

--------------------------------

### Install @thatopen/components

Source: https://github.com/thatopen/engine_docs/blob/main/docs/components/getting-started.md

Install the main components library using npm. Ensure you are using a compatible version with other libraries.

```bash
npm i @thatopen/components
```

--------------------------------

### Configure and Initialize World

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/Worlds/index.html

Set the scene, renderer, and camera for the world, then initialize the components to start the rendering process. The SimpleScene's setup method can add lights.

```typescript
world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
components.init();
world.scene.setup();
```

--------------------------------

### Install That Open Components

Source: https://github.com/thatopen/engine_docs/blob/main/build/components/getting-started/index.html

Install the main That Open components library using npm. Ensure you also install the correct versions of Three.js and peer dependencies like @thatopen/fragments and web-ifc.

```bash
npm i @thatopen/components
```

```bash
npm i three
```

```bash
npm i @thatopen/fragments
```

```bash
npm i web-ifc
```

--------------------------------

### Configurable.setup

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/classes/SimpleScene.md

Implements the setup method from the Configurable interface.

```APIDOC
## Configurable.setup

### Description
Sets up the scene with provided configuration.

### Method
setup

### Parameters
This method does not explicitly list parameters in the source. Refer to the Configurable interface for details.

### Request Example
```typescript
// Example usage would depend on the specific implementation of SimpleScene
// and the configuration object expected by the setup method.
```

### Response
This method does not explicitly define a return value in the source. Refer to the Configurable interface for details.
```

--------------------------------

### Install Fragments Library

Source: https://github.com/thatopen/engine_docs/blob/main/docs/fragments/getting-started.md

Install the Fragments library using npm. Ensure you also install Three.js and peer dependencies like web-ifc, matching the versions used by the library.

```bash
npm i @thatopen/fragments
```

```bash
npm i three
```

```bash
npm i web-ifc
```

--------------------------------

### Setup Simple Scene with Camera and Renderer

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/UserInterface/OBC/SpatialTree/index.html

Initializes a basic 3D scene, camera, and renderer. Ensure you have a Worlds tutorial setup if unfamiliar with scene creation.

```typescript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer>();
world.name = "main";
const sceneComponent = new OBC.SimpleScene(components);
sceneComponent.setup();
world.scene = sceneComponent;
const viewport = document.createElement("bim-viewport");
const rendererComponent = new OBC.SimpleRenderer(components, viewport);
world.renderer = rendererComponent;
const cameraComponent = new OBC.SimpleCamera(components);
world.camera = cameraComponent;
viewport.addEventListener("resize", () => {
  rendererComponent.resize();
  cameraComponent.updateAspect();
});
const viewerGrids = components.get(OBC.Grids);
viewerGrids.create(world);
components.init();
```

--------------------------------

### Install web-ifc

Source: https://github.com/thatopen/engine_docs/blob/main/build/fragments/getting-started/index.html

Install the web-ifc library, a peer dependency for Fragments. Ensure it matches the version used by the Fragments libraries.

```bash
npm i web-ifc
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/thatopen/engine_docs/blob/main/README.md

Install all project dependencies using Yarn. This command should be run after cloning the repositories and before setting up the documentation.

```bash
yarn install
```

--------------------------------

### Install Fragments Library

Source: https://github.com/thatopen/engine_docs/blob/main/build/fragments/getting-started/index.html

Use npm to install the Fragments library into your project. This is the first step to integrating Fragments into your workflow.

```bash
npm i @thatopen/fragments
```

--------------------------------

### Install Three.js

Source: https://github.com/thatopen/engine_docs/blob/main/build/fragments/getting-started/index.html

Install the Three.js library, a core dependency for Fragments. Ensure it matches the version used by the Fragments libraries.

```bash
npm i three
```

--------------------------------

### Setup Fragments Library

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Fragments/Fragments/IfcImporter/index.html

Initializes the Fragments library, fetching the appropriate worker. This setup is necessary for loading and manipulating Fragment models.

```typescript
// `FragmentsModels.getWorker()` fetches the matching worker for this library version from unpkg and returns a blob URL.
// You can also pass your own URL to `new FragmentsModels(...)` if you'd rather host the worker yourself.
const workerUrl = await FRAGS.FragmentsModels.getWorker();
const fragments = new FRAGS.FragmentsModels(workerUrl);
world.camera.controls.addEventListener("update", () => fragments.update());
// Remove z fighting
fragments.models.materials.list.onItemSet.add(({ value: material }) => {
  if (!("isLodMaterial" in material && material.isLodMaterial)) {
    material.polygonOffset = true;
    material.polygonOffsetUnits = 1;
    material.polygonOffsetFactor = Math.random();
  }
});
```

--------------------------------

### Setup for Interactive Line Preview

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/TechnicalDrawings/DrawingLayers/index.html

Initializes a line geometry and material for previewing hovered lines. It's configured to render on top and not be culled by the frustum. This setup is essential for visual feedback during interactive placement.

```javascript
const hoverGeo  = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3()]);const hoverLine = new THREE.Line(  hoverGeo,  new THREE.LineBasicMaterial({ color: 0x0077ff, depthTest: false }),);hoverLine.layers.set(1);
// renderOrder 999 ensures it always draws on top of other annotation geometry.
// frustumCulled = false prevents it from disappearing when its endpoints are near
// the screen edge and the bounding box falls partially outside the frustum.
hoverLine.renderOrder = 999;
hoverLine.frustumCulled = false;
hoverLine.visible = false;
drawing.three.add(hoverLine);
```

--------------------------------

### getLocalIdsByGuids

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/fragments/classes/SingleThreadedFragmentsModel/index.html

Get the local IDs corresponding to the specified GUIDs. Accepts an array of strings (GUIDs) and returns an array of null or numbers.

```APIDOC
## getLocalIdsByGuids(guids)

### Description
Get the local IDs corresponding to the specified GUIDs.

### Method
GET

### Endpoint
/api/@thatopen/fragments/classes/SingleThreadedFragmentsModel#getlocalidsbyguids

### Parameters
#### Query Parameters
- **guids** (string[]) - Required - Array of GUIDs to look up.

### Returns
`(null | number)[]`
```

--------------------------------

### setup()

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/interfaces/Configurable/index.html

Use the provided configuration to set up the tool. This method can be asynchronous.

```APIDOC
## setup()

### Description
Use the provided configuration to set up the tool.

### Method
setup

### Parameters
#### Path Parameters
- **config** (Partial<U>) - Optional - The configuration object for the setup.

### Returns
- void | Promise<void> - Indicates if the setup was successful or if it's an asynchronous operation.
```

--------------------------------

### getLocalIdsByGuids

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/fragments/classes/FragmentsModel.md

Get the local IDs corresponding to the specified GUIDs.

```APIDOC
## getLocalIdsByGuids(guids)

### Description
Get the local IDs corresponding to the specified GUIDs.

### Parameters
#### Path Parameters
- **guids** (string[]) - Required - Array of GUIDs to look up.

### Response
#### Success Response (200)
- **(null | number)[]** - An array of local IDs, where each element can be a number or null.
```

--------------------------------

### setup()

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/SimpleGrid/index.html

Initializes the SimpleGrid with optional configuration. This method is part of the Configurable interface.

```APIDOC
## setup()

### Description
Initializes the SimpleGrid with optional configuration.

### Method
setup

### Parameters
#### Path Parameters
- **config** (Partial<SimpleGridConfig>) - Optional - Configuration object for the SimpleGrid.

### Returns
#### Success Response (void)
- void
```

--------------------------------

### getGuidsByLocalIds

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/fragments/classes/FragmentsModel.md

Get the GUIDs corresponding to the specified local IDs. This method takes an array of local IDs and returns an array of their corresponding GUIDs.

```APIDOC
## getGuidsByLocalIds(localIds)

### Description
Get the GUIDs corresponding to the specified local IDs.

### Method
POST

### Endpoint
/model/guids-by-local-ids

### Parameters
#### Request Body
- **localIds** (number[]) - Required - Array of local IDs to look up.

### Request Example
```json
{
  "localIds": [1, 2, 3]
}
```

### Returns
#### Success Response (200)
- `Promise<(null | string)[]>`: A promise that resolves to an array of GUIDs (strings) or null if a GUID is not found for a given local ID.

### Response Example
```json
[
  "guid1",
  null,
  "guid3"
]
```
```

--------------------------------

### Set Up Local Documentation Build

Source: https://github.com/thatopen/engine_docs/blob/main/README.md

Prepare the documentation for local execution by copying libraries and setting up the build environment. This command should be run after installing dependencies.

```bash
yarn docs:local
```

--------------------------------

### Example of GUIDs Items Indexing

Source: https://github.com/thatopen/engine_docs/blob/main/build/fragments/schema/index.html

Illustrates how the 'guidsItems' array maps local IDs to GUIDs, demonstrating the relationship between item indices and their global identifiers. This is crucial for understanding how items are referenced.

```json
{
  "localIds": [34, 35, 36],
  "guids": ["guid-abc", "guid-xyz"],
  "guidsItems": [2, 1],
  ...
}
```

--------------------------------

### Get EdgeProjector Instance

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/EdgeProjector/index.html

Obtain an instance of the EdgeProjector component to start generating edge projections.

```typescript
const edgeProjector = components.get(OBC.EdgeProjector);
```

--------------------------------

### _setup()

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/fragments/classes/FragmentsModel/index.html

Internal method used for the initial setup of the model. It takes data, an optional raw value, and configuration, returning a Promise.

```APIDOC
## _setup()

### Description
Internal method to set up the model. Don't use this directly.

### Method
(Internal)

### Parameters
#### Request Body
- **data** (object) - Required - The data for setup.
- **raw** (any) - Optional - Raw data for setup.
- **config** (object) - Optional - Configuration for setup.

### Returns
#### Success Response
- Promise<void>
```

--------------------------------

### Get Viewpoints Component Instance

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/Viewpoints/index.html

Obtain the instance of the Viewpoints component and assign the world to it. This is the initial setup required before creating viewpoints.

```typescript
const viewpoints = components.get(OBC.Viewpoints);
viewpoints.world = world;
```

--------------------------------

### setup()

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components-front/classes/Highlighter.md

Initializes the Highlighter component with optional configuration settings. This method must be called before using other Highlighter functionalities.

```APIDOC
## setup()

### Description
Sets up the Highlighter with the provided configuration.

### Method
`setup(config?: Partial<HighlighterConfig>): void`

### Parameters
#### Path Parameters
- **config**? (Partial<HighlighterConfig>) - Optional configuration for the Highlighter. If not provided, the Highlighter will use the default configuration.

### Returns
`void`

### Throws
- Will throw an error if the world or a required component is not found.
- Will throw an error if the selection already exists.
- Will throw an error if the fragment or its geometry is not found.
- Will throw an error if the item ID is not found.
- Will throw an error if the fragment does not belong to a FragmentsGroup.
```

--------------------------------

### setup()

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/SimpleScene/index.html

Initializes the SimpleScene. This method is part of the Configurable interface and is used to set up the scene.

```APIDOC
## setup()

### Description
Initializes the SimpleScene. This method is part of the Configurable interface and is used to set up the scene.

### Method
setup

### Parameters
This method does not take any parameters.

### Returns
`void`
```

--------------------------------

### setup()

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/classes/IfcLoader.md

Sets up the IfcLoader component with optional configuration settings.

```APIDOC
## setup()

### Description
Sets up the IfcLoader component with the provided configuration. If the `autoSetWasm` option is enabled, it automatically sets the WASM paths for the Web-IFC library.

### Method Signature
`setup(config?: Partial<IfcFragmentSettings>): Promise<void>`

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- `config` (Partial<IfcFragmentSettings>) - Optional - Optional configuration settings for the IfcLoader. If not provided, the existing settings will be used.

### Request Example
```typescript
const ifcLoader = new IfcLoader(components);
await ifcLoader.setup({ autoSetWasm: true });
```

### Response
#### Success Response (200)
- `Promise<void>` - A Promise that resolves when the setup process is completed.
```

--------------------------------

### Setup Highlighter for Selection and Hovering

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/UserInterface/OBC/SpatialTree/index.html

Gets and configures the highlighter component for element selection and mouse hovering. Ensure the world object is properly set up before calling this.

```typescript
const highlighter = components.get(OBCF.Highlighter);
highlighter.setup({ world });
highlighter.zoomToSelection = true;
```

--------------------------------

### Highlighter.setup

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components-front/classes/Highlighter/index.html

Sets up the Highlighter with the provided configuration. If no configuration is provided, default settings are used. This method can throw errors if essential components are missing or if a selection already exists.

```APIDOC
## setup(config?)

### Description
Sets up the Highlighter with the provided configuration.

### Parameters
#### Request Body
- **config** (Partial<HighlighterConfig>) - Optional - Configuration for the Highlighter. If not provided, the Highlighter will use the default configuration.

### Returns
`void`

### Throws
- Will throw an error if the world or a required component is not found.
- Will throw an error if the selection already exists.
- Will throw an error if the fragment or its geometry is not found.
- Will throw an error if the item ID is not found.
- Will throw an error if the fragment does not belong to a FragmentsGroup.
```

--------------------------------

### Button Usage Examples

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/ui/classes/Button.md

Examples demonstrating how to use the bim-button component with different properties.

```APIDOC
#### Examples

```ts
<bim-button label="Click me" active></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.active = true;
```

```ts
<bim-button label="Click me" disabled></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.disabled = true;
```

```ts
<bim-button icon="my-icon"></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.icon = 'my-icon';
```

```ts
<bim-button label="Click me"></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
```

```ts
<bim-button label="Click me" label-hidden></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.labelHidden = true;
```

```ts
<bim-button label="Click me" tooltip-text="This is a tooltip"></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipText = 'This is a tooltip';
```

```ts
<bim-button label="Click me" tooltip-time="1000"></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipTime = 1000;
```

```ts
<bim-button label="Click me" tooltip-title="Button Tooltip"></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipTitle = 'Button Tooltip';
```

```ts
<bim-button label="Click me" tooltip-visible></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipVisible = true;
```

```ts
<bim-button label="Click me" vertical></bim-button>
```

```ts
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.vertical = true;
```
```

--------------------------------

### Run Local Documentation Server

Source: https://github.com/thatopen/engine_docs/blob/main/README.md

Start a local development server to view the documentation. This command should be run after setting up the documentation.

```bash
yarn start
```

--------------------------------

### Install Yarn

Source: https://github.com/thatopen/engine_docs/blob/main/docs/contributing.md

Install Yarn globally using npm. This is a prerequisite for managing project dependencies.

```bash
npm i -g yarn
```

--------------------------------

### setup()

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/classes/Clipper.md

Sets up the component with a configuration object. This method is part of the Configurable interface.

```APIDOC
## setup()

### Description
Sets up the component with a configuration object.

### Method
`setup(config?: any): void`

#### Parameters
| Parameter | Type |
| :------ | :------ |
| `config`? | `any` |

#### Returns
`void`

#### Implementation of
[`Configurable`](../interfaces/Configurable.md#setup)
```

--------------------------------

### Link Viewpoint to Topic using GUID

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/Viewpoints/index.html

Listen for viewpoint creation events and associate the new viewpoint's GUID with a newly created BCF topic. Using GUIDs prevents memory leaks when viewpoints are deleted.

```typescript
viewpoints.list.onItemSet.add(({ value: viewpoint }) => {
  const bcfTopics = components.get(OBC.BCFTopics);
  const topic = bcfTopics.create();
  topic.viewpoints.add(viewpoint.guid);
});
```

--------------------------------

### Basic Scene Setup with Cube

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Components/index.md

Demonstrates how to initialize the components, create a basic 3D scene with a cube, and set up camera controls. Requires Three.js and the OBC library.

```javascript
/* eslint import/no-extraneous-dependencies: 0 */

import * as THREE from "three";
import * as OBC from "../..";

const container = document.getElementById("container")!;

const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
world.scene.three.add(cube);

world.scene.setup();

world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
```

--------------------------------

### Setup Simple Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Fragments/Fragments/IfcImporter/HelloWorldSchema.mdx

Initialize a basic 3D scene with a camera, renderer, and world. Also, set up performance statistics using Stats.js and append them to the DOM.

```javascript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const container = document.getElementById("viewer") as HTMLDivElement;

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.scene.setup();

const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());
```

--------------------------------

### Setup Simple Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/UserInterface/OBC/ItemsData.mdx

Creates a basic scene with a camera and renderer. This is a foundational step for displaying BIM models.

```javascript
const viewport = document.createElement("bim-viewport");

const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.name = "main";

const sceneComponent = new OBC.SimpleScene(components);
sceneComponent.setup();
world.scene = sceneComponent;

const rendererComponent = new OBC.SimpleRenderer(components, viewport);
world.renderer = rendererComponent;

const cameraComponent = new OBC.SimpleCamera(components);
world.camera = cameraComponent;
await world.camera.controls.setLookAt(65, 19, -27, 12.6, -5, -1.4);

viewport.addEventListener("resize", () => {
  rendererComponent.resize();
  cameraComponent.updateAspect();
});

components.init();

const grids = components.get(OBC.Grids);
grids.create(world);

components.get(OBC.Clipper).create(world);
```

--------------------------------

### setup

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/SimpleScene/index.html

Sets up the SimpleScene with optional configuration. This method is part of the Configurable interface.

```APIDOC
## setup

### Description
Sets up the component, potentially with configuration.

### Method
`setup`

### Parameters
#### Path Parameters
- **config**? (`Partial<SimpleSceneConfig>`) - Optional configuration for the SimpleScene.

### Endpoint
`setup`
```

--------------------------------

### Setup Simple Scene with Stats

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Fragments/Fragments/IfcImporter/HelloWorldSchema/index.html

Initializes the core components, creates a scene, camera, and renderer, and adds performance statistics.

```typescript
const components = new OBC.Components();const worlds = components.get(OBC.Worlds);const container = document.getElementById("viewer") as HTMLDivElement;
const world = worlds.create<  OBC.SimpleScene,  OBC.SimpleCamera,  OBC.SimpleRenderer>();world.scene = new OBC.SimpleScene(components);world.renderer = new OBC.SimpleRenderer(components, container);world.camera = new OBC.SimpleCamera(components);
components.init();world.scene.setup();const stats = new Stats();stats.showPanel(2);document.body.append(stats.dom);
stats.dom.style.left = "0px";stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());world.renderer.onAfterUpdate.add(() => stats.end());
```

--------------------------------

### setup

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/Clipper/index.html

Sets up the component with the provided configuration. This method is part of the Configurable interface.

```APIDOC
## setup

### Description
[Configurable.setup](/api/@thatopen/components/interfaces/Configurable#setup)

### Method
setup(`config`?)

### Parameters
#### Parameters
- **config** (`Partial<ClipperConfig>`) - Optional - Configuration object for the setup.

### Returns
`void`
```

--------------------------------

### Setting Up a Simple Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Components/Core/OrthoPerspectiveCamera.mdx

Initialize the core components, create a world with a simple scene, renderer, and the OrthoPerspectiveCamera. Configure the camera's initial view and set up a grid.

```javascript
const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.OrthoPerspectiveCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null;

const container = document.getElementById("container")!;
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);
await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);

components.init();

const grid = components.get(OBC.Grids).create(world);
```

--------------------------------

### Initialize World and Components

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Components/Core/Worlds.mdx

Set up the scene, renderer, and camera for the world, then initialize the components system to start the rendering process.

```javascript
world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();
```

--------------------------------

### Clipper.setup

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/classes/Clipper.md

Sets up the Clipper with a partial configuration. This method implements the setup from the Configurable interface.

```APIDOC
## setup

### Description
Sets up the Clipper with a partial configuration. This method implements the setup from the Configurable interface.

### Method
setup

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- `config` (Partial<ClipperConfig>) - Optional - The configuration object for the clipper.

### Request Example
```json
{
  "config": {
    "someProperty": "someValue"
  }
}
```

### Response
#### Success Response (void)
This method does not return any value.

#### Response Example
None
```

--------------------------------

### Setup Simple Scene with Camera and Renderer

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Front/CivilNavigators/index.html

Initializes a scene, renderer, and camera. Ensure the container element exists in your HTML. The background is set to transparent for documentation purposes.

```javascript
const container = document.getElementById("container")!;
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBF.RendererWith2D>(components);
world.scene = new OBC.SimpleScene(components);
world.renderer = new OBF.RendererWith2D(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();
BUI.Manager.init();
CUI.Manager.init();

world.scene.setup();
world.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);
container.appendChild(world.renderer.three2D.domElement);

const grids = components.get(OBC.Grids);
grids.create(world);

world.camera.three.far = 10000;
world.camera.three.updateProjectionMatrix();
```

--------------------------------

### setup

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/classes/ShadowedScene.md

Sets up the scene with an optional configuration object. This method is part of the Configurable interface.

```APIDOC
## setup(config?)

### Description
Sets up the scene with an optional configuration object.

### Parameters
#### Path Parameters
- **config** (Partial<ShadowedSceneConfig>?) - Optional - Configuration for the scene setup.

### Returns
`void`
```

--------------------------------

### Get Fragments Worker URL - JavaScript

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/FragmentsManager/index.html

Obtain a blob URL for the fragments worker. This is the recommended way to get the URL for FragmentsManager.init.

```javascript
const fragments = components.get(OBC.FragmentsManager);
fragments.init(await OBC.FragmentsManager.getWorker());
```

--------------------------------

### Example Shell JSON Structure

Source: https://github.com/thatopen/engine_docs/blob/main/build/fragments/schema/index.html

Illustrates a JSON representation of a shell with points, profiles, and a hole. This example shows a single representation of a shell.

```json
{
  "meshes": {
    "representations": [
      {
        "id": 0,
        "representationClass": 1,
        "bbox": {
          "min": {"x": 0, "y": 0, "z":0},
          "max": {"x": 1, "y": 1, "z": 1}
        }
      },
    ],
    "shells": [
      {
        "type": 0,
        "points": [
          {"x": 0, "y": 0, "z":0},
          {"x": 1, "y": 0, "z":0},
          {"x": 0, "y": 1, "z":1},
          {"x": 0, "y": 0, "z":1},
          {"x": 0.25, "y": 0.25, "z":0.25},
          {"x": 0.75, "y": 0.25, "z":0.25},
          {"x": 0.25, "y": 0.75, "z":0.75},
          {"x": 0.25, "y": 0.25, "z":0.75}
        ],
        "profiles": [
          { "indices": [0, 1, 2, 3] }
        ],
        "holes": [
          { "indices": [4, 5, 6, 7], "profileId": 0 }
        ],
        "bigProfiles": [],
        "bigHoles": []
      }
    ],
    ...
  },
  ...
}
```

--------------------------------

### Setup 3D Scene and Components

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/TechnicalDrawings/DrawingBlocks/index.html

Initialize the core components, create a 3D world with a scene, renderer, and camera, and set the initial camera view. Ensure the annotation layer is enabled.

```javascript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();
world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null;
const container = document.getElementById("container")!;
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
await world.camera.controls.setLookAt(48.213, 33.495, -5.062, 13.117, -1.205, 22.223);
components.init();
```

--------------------------------

### Setup Simple ThreeJS Scene

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Fragments/Fragments/IfcImporter/index.html

Initializes a basic ThreeJS scene with camera, renderer, and scene components. This setup is foundational for visualizing 3D models.

```typescript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer>();
world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null;
const container = document.getElementById("container")!;
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
world.camera.controls.setLookAt(74, 16, 0.2, 30, -4, 27); // convenient position for the model we will load
components.init();
const grids = components.get(OBC.Grids);
grids.create(world);
```

--------------------------------

### getLocalIdsByGuids()

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/fragments/classes/SingleThreadedFragmentsModel.md

Converts an array of GUIDs into their corresponding local IDs. Returns an array where each element is either a local ID (number) or null if a GUID is not found.

```APIDOC
## getLocalIdsByGuids()

### Description
Get the local IDs corresponding to the specified GUIDs.

### Parameters
#### Path Parameters
- **guids** (string[]) - Required - Array of GUIDs to look up.

### Returns
- **(null | number)[]** - An array of local IDs or null values.
```

--------------------------------

### Setup Simple 3D Scene with Components

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/UserInterface/OBC/ViewCube/index.html

Initializes the core components and creates a basic 3D world including scene, camera, and renderer.

```typescript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<OBC.SimpleScene, OBC.SimpleCamera, OBC.SimpleRenderer>();
world.scene = new OBC.SimpleScene(components);
const viewport = document.createElement("bim-viewport");
world.renderer = new OBC.SimpleRenderer(components, viewport);
world.camera = new OBC.SimpleCamera(components);
```

--------------------------------

### Get Raycaster Instance

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/Raycasters/index.html

Retrieve the Raycasters component and then get the specific raycaster associated with a given world. This is the first step to enable raycasting functionality.

```typescript
const casters = components.get(OBC.Raycasters);
const caster = casters.get(world);
```

--------------------------------

### Setup Simple Scene with Fragments

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/ShadowedScene/index.html

Initializes the OBC.Components, creates a world with a ShadowedScene, camera, and renderer, loads fragments, and sets up stats. Ensure the container element exists in your HTML.

```typescript
const container = document.getElementById("container")!;
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<  OBC.ShadowedScene,  OBC.OrthoPerspectiveCamera,  OBC.SimpleRenderer>();
world.scene = new OBC.ShadowedScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);
components.init();
world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);
const grids = components.get(OBC.Grids);
const grid = grids.create(world);

// Set up fragments
// `FragmentsManager.getWorker()` fetches the matching worker for this library version from unpkg and returns a blob URL.
// You can also pass your own URL to `fragments.init(...)` if you'd rather host the worker yourself.
const workerUrl = await OBC.FragmentsManager.getWorker();
const fragments = components.get(OBC.FragmentsManager);
fragments.init(workerUrl);

world.camera.controls.addEventListener("update", () => fragments.core.update());

// Remove z fighting
fragments.core.models.materials.list.onItemSet.add(({ value: material }) => {
  if (!("isLodMaterial" in material && material.isLodMaterial)) {
    material.polygonOffset = true;
    material.polygonOffsetUnits = 1;
    material.polygonOffsetFactor = Math.random();
  }
});

const modelId = "example";
const file = await fetch(
  "https://thatopen.github.io/engine_components/resources/frags/school_arq.frag",
);
const data = await file.arrayBuffer();
const buffer = new Uint8Array(data);
const model = await fragments.core.load(buffer, {
  modelId,
  camera: world.camera.three,
});
world.scene.three.add(model.object);

// Set up stats
const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());
```

--------------------------------

### setupEvents()

Source: https://github.com/thatopen/engine_docs/blob/main/docs/api/@thatopen/components/classes/SimpleRenderer.md

Sets up and manages the event listeners for the renderer. Throws an error if the renderer does not have an HTML container.

```APIDOC
## setupEvents(active)

### Description
Sets up and manages the event listeners for the renderer.

### Method
`setupEvents(active: boolean)`

### Parameters
#### Path Parameters
- **active** (boolean) - Required - A boolean indicating whether to activate or deactivate the event listeners.

### Returns
`void`

### Throws
Will throw an error if the renderer does not have an HTML container.
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/thatopen/engine_docs/blob/main/docs/components/getting-started.md

Install required peer dependencies like @thatopen/fragments and web-ifc. It's crucial to use the same versions as specified by our libraries for flexible bundling.

```bash
npm i @thatopen/fragments
```

```bash
npm i web-ifc
```

--------------------------------

### Initialize Components and Listen for Initialization Event

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/Components/index.html

Demonstrates how to create a Components instance, listen for its initialization event, and then initialize the instance. This is useful for performing operations that depend on the components being fully set up.

```typescript
const components = new Components();
components.onInit.add(() => {
  // Enable custom effects in the post-production renderer
  // or any other operation dependant on the component initialization
});
components.init();
```

--------------------------------

### Initialize Core UI and Setup World for OBC

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/UserInterface/OBC/TopicsUI.mdx

Initialize the core UI library and set up the @thatopen/components with a basic World configuration, including scene, renderer, and camera.

```javascript
BUI.Manager.init();

const viewport = document.createElement("bim-viewport");

const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);

const world = worlds.create<
  OBC.SimpleScene,
  OBC.OrthoPerspectiveCamera,
  OBC.SimpleRenderer
>();
const sceneComponent = new OBC.SimpleScene(components);
sceneComponent.setup();
world.scene = sceneComponent;

const rendererComponent = new OBC.SimpleRenderer(components, viewport);
world.renderer = rendererComponent;

const cameraComponent = new OBC.OrthoPerspectiveCamera(components);
world.camera = cameraComponent;
cameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);

viewport.addEventListener("resize", () => {
  rendererComponent.resize();
  cameraComponent.updateAspect();
});

components.init();

const grids = components.get(OBC.Grids);
grids.create(world);
```

--------------------------------

### Setup Simple Three.js Scene with Fragments

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Fragments/Fragments/FragmentsModels/Materials/index.html

Initializes a basic Three.js scene with lighting, shadows, and camera controls. This setup is essential for visualizing 3D models.

```typescript
const container = document.getElementById("container")!;
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<  OBC.ShadowedScene,  OBC.OrthoPerspectiveCamera,  OBC.SimpleRenderer>();
world.scene = new OBC.ShadowedScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);
components.init();
const axes = new THREE.AxesHelper(10);
world.scene.three.add(axes);
world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);
world.renderer.three.shadowMap.enabled = true;
world.renderer.three.shadowMap.type = THREE.VSMShadowMap;
world.scene.setup({
  directionalLight: {
    color: new THREE.Color(1, 1, 1),
    position: new THREE.Vector3(5, 10, 5),
    intensity: 4,
  },
  shadows: {
    cascade: 1,
    resolution: 2048,
  },
});
world.renderer.three.toneMapping = THREE.NeutralToneMapping;
world.renderer.three.toneMappingExposure = 1;
await world.scene.updateShadows();
world.camera.controls.addEventListener("rest", async () => {
  await world.scene.updateShadows();
});
```

--------------------------------

### Convert GUIDs to Model ID Map

Source: https://github.com/thatopen/engine_docs/blob/main/build/api/@thatopen/components/classes/FragmentsManager/index.html

Converts a collection of IFC GUIDs to a fragmentIdMap. The map keys are fragment IDs and the values are the corresponding express IDs.

```typescript
const fragmentIdMap = await fragments.guidsToModelIdMap(guids);
```

--------------------------------

### Set Up the 3D Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Components/Core/TechnicalDrawings/TechnicalDrawings.mdx

Initializes the core components, creates a 3D world with a scene, camera, and renderer, and sets up the camera controls.

```javascript
const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null;

const container = document.getElementById("container")!;
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
await world.camera.controls.setLookAt(48.213, 33.495, -5.062, 13.117, -1.205, 22.223);

components.init();
```

--------------------------------

### Add Model Elements by GUID

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/Components/Core/Viewpoints/index.html

Add model elements to a viewpoint using their GUIDs. This is useful for referencing specific elements across different BIM applications.

```typescript
viewpoints.list.onItemSet.add(({ value: viewpoint }) => {
  viewpoint.selectionComponents.add(
    "3V$FMCDUfCoPwUaHMPfteW",
    "1fIVuvFffDJRV_SJESOtCZ",
  );
});
```

--------------------------------

### JSON Representation Example

Source: https://github.com/thatopen/engine_docs/blob/main/docs/fragments/schema.md

An example of how geometry representations are structured within a JSON file, showing ID, representationClass, and bounding box details. This format is used in Fragments files.

```json
{
  "meshes": {
    "representations": [
      {
        "id": 0,
        "representationClass": 1,
        "bbox": {
          "min": {"x": 0, "y": 0, "z": 0},
          "max": {"x": 1, "y": 1, "z": 1},
        }
      },
    ],
    ...
  },
  ...
}
```

--------------------------------

### Initialize Scene and PostproductionRenderer

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Components/Front/PostproductionRenderer.mdx

Sets up a simple scene, camera, and the PostproductionRenderer. Ensure the container element exists in your HTML.

```javascript
const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.OrthoPerspectiveCamera,
  OBF.PostproductionRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null;

const container = document.getElementById("container")!;
world.renderer = new OBF.PostproductionRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);
await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);

components.init();

const grids = components.get(OBC.Grids);
const grid = grids.create(world);
grid.config.color.set(0x666666);
```

--------------------------------

### Setup FragmentIfcLoader and FragmentsManager

Source: https://github.com/thatopen/engine_docs/blob/main/build/Tutorials/UserInterface/OBC/ModelsList/index.html

Retrieves and sets up the IfcLoader and FragmentsManager. It's crucial to setup the IfcLoader to define the WASM path. The FragmentsManager is configured to add loaded models to the scene.

```javascript
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();
```

```javascript
// `FragmentsManager.getWorker()` fetches the matching worker for this library version from unpkg and returns a blob URL.
// You can also pass your own URL to `fragments.init(...)` if you'd rather host the worker yourself.
const workerUrl = await OBC.FragmentsManager.getWorker();
const fragments = components.get(OBC.FragmentsManager);
fragments.init(workerUrl);
world.camera.controls.addEventListener("update", () => fragments.core.update());
fragments.list.onItemSet.add(async ({ value: model }) => {
  model.useCamera(world.camera.three);
  world.scene.three.add(model.object);
  await fragments.core.update(true);
});
```

```javascript
// Remove z fighting
fragments.core.models.materials.list.onItemSet.add(({ value: material }) => {
  if (!("isLodMaterial" in material && material.isLodMaterial)) {
    material.polygonOffset = true;
    material.polygonOffsetUnits = 1;
    material.polygonOffsetFactor = Math.random();
  }
});
```

--------------------------------

### Install Dependencies

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/Fragments/Fragments/IfcImporter/HelloWorldSchema.mdx

Install the necessary npm packages for the IFC importer and related tools. This includes components, UI, JSON viewer, stats, pako, flatbuffers, three, fragments, and web-ifc.

```bash
npm install @thatopen/components @thatopen/ui @andypf/json-viewer stats.js pako flatbuffers three @thatopen/fragments @thatopen/components @thatopen/ui web-ifc
```

--------------------------------

### Set up a Simple 3D Scene

Source: https://github.com/thatopen/engine_docs/blob/main/docs/Tutorials/UserInterface/OBC/ViewCube.mdx

Create a basic 3D world including a scene, camera, and renderer. This forms the foundation for displaying 3D content and integrating components like the ViewCube.

```javascript
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
const viewport = document.createElement("bim-viewport");
world.renderer = new OBC.SimpleRenderer(components, viewport);

world.camera = new OBC.SimpleCamera(components);
```