### Initialize Components - TypeScript

Source: https://context7.com/thatopen/engine_components/llms.txt

Demonstrates how to initialize the core `Components` class, which acts as the central hub for all library functionalities. It shows how to get other component instances and start the animation loop.

```typescript
import * as THREE from "three";
import * as OBC from "@thatopen/components";

// Create the main components instance
const components = new OBC.Components();

// Get or create component instances using the singleton pattern
const worlds = components.get(OBC.Worlds);
const fragments = components.get(OBC.FragmentsManager);

// Initialize the components (starts the animation loop)
components.init();

// Listen for initialization completion
components.onInit.add(() => {
  console.log("Components initialized!");
});

// Dispose when done to prevent memory leaks
// components.dispose();
```

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

### Manage BIM Models with FragmentsManager

Source: https://context7.com/thatopen/engine_components/llms.txt

Demonstrates how to initialize the FragmentsManager, load binary fragment files, and interact with model data such as bounding boxes and GUID mapping. This component is essential for efficient rendering of BIM data.

```typescript
import * as OBC from "@thatopen/components";
const components = new OBC.Components();
const fragments = components.get(OBC.FragmentsManager);
const workerUrl = "https://thatopen.github.io/engine_fragment/resources/worker.mjs";
const fetchedUrl = await fetch(workerUrl);
const workerBlob = await fetchedUrl.blob();
const workerFile = new File([workerBlob], "worker.mjs", { type: "text/javascript" });
const workerObjectUrl = URL.createObjectURL(workerFile);
fragments.init(workerObjectUrl);
world.camera.controls.addEventListener("update", () => fragments.core.update());
fragments.list.onItemSet.add(({ value: model }) => {
  model.useCamera(world.camera.three);
  world.scene.three.add(model.object);
  fragments.core.update(true);
});
const fragPath = "https://thatopen.github.io/engine_fragment/resources/frags/school_arq.frag";
const file = await fetch(fragPath);
const buffer = await file.arrayBuffer();
await fragments.core.load(buffer, { modelId: "school_arq" });
const modelIdMap: OBC.ModelIdMap = { "school_arq": new Set([1, 2, 3]) };
const data = await fragments.getData(modelIdMap);
const boxes = await fragments.getBBoxes(modelIdMap);
const guids = ["2O2Fr$t4X7Zf8NOew3FLOH", "3MVy3nLJr7lhw90aQKMOF0"];
const idMap = await fragments.guidsToModelIdMap(guids);
```

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

### BoundingBoxer Base Styles

Source: https://github.com/thatopen/engine_components/blob/main/examples/BoundingBoxer/index.html

Sets the base styles for the BoundingBoxer element, including margin, padding, font family, and overflow behavior. This ensures a consistent starting point for the component.

```css
BoundingBoxer body {
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
}
```

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

### Initialize a 3D World with Open BIM Components

Source: https://github.com/thatopen/engine_components/blob/main/packages/core/README.md

This snippet demonstrates how to set up a basic 3D scene using the Open BIM Components library. It initializes the components, creates a world with a scene, camera, and renderer, and adds a simple cube to the environment.

```javascript
import * as THREE from "three";
import * as OBC from "@thatopen/components";

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);
```

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

### Initialize 3D World with That Open Components

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

This snippet demonstrates how to set up a basic 3D scene, camera, and renderer using the @thatopen/components library. It initializes a world, adds a cube mesh, and configures the camera controls.

```javascript
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);
```

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

### Initialize and Configure OrthoPerspectiveCamera

Source: https://context7.com/thatopen/engine_components/llms.txt

This snippet demonstrates how to instantiate an OrthoPerspectiveCamera within a world, set its initial position, toggle projection modes, and fit the camera to a specific sphere. It also shows how to attach an event listener to monitor camera movement.

```typescript
import * as OBC from "@thatopen/components";

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

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

world.camera = new OBC.OrthoPerspectiveCamera(components);

await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);

world.camera.projection.toggle();

const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 10);
world.camera.controls.fitToSphere(sphere, true);

world.camera.controls.addEventListener("update", () => {
  console.log("Camera moved");
});
```

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

### Create and Configure 3D World - TypeScript

Source: https://context7.com/thatopen/engine_components/llms.txt

Illustrates how to create and configure a 3D world using the `Worlds` component. This includes setting up the scene, renderer, camera, adding objects, and positioning the camera.

```typescript
import * as THREE from "three";
import * as OBC from "@thatopen/components";

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

// Create a new world with specific scene, camera, and renderer types
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

// Get the container element from the DOM
const container = document.getElementById("container")!;

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

// Initialize components to start rendering
components.init();

// Set up default lights using the scene's setup method
world.scene.setup();

// Position the camera
world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);

// Add a simple cube to the scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(geometry, material);
world.scene.three.add(cube);
```

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

### Compute Bounding Boxes with BoundingBoxer

Source: https://context7.com/thatopen/engine_components/llms.txt

Demonstrates how to calculate bounding boxes for entire models or specific IFC categories. It also shows how to fit the camera to these bounds and create visual debugging helpers.

```typescript
import * as THREE from "three";
import * as OBC from "@thatopen/components";

const components = new OBC.Components();
const boxer = components.get(OBC.BoundingBoxer);
const fragments = components.get(OBC.FragmentsManager);

const getLoadedModelsBoundings = () => {
  boxer.list.clear();
  boxer.addFromModels();
  const box = boxer.get();
  boxer.list.clear();
  return box;
};

const allModelsBox = getLoadedModelsBoundings();
const sphere = new THREE.Sphere();
allModelsBox.getBoundingSphere(sphere);
world.camera.controls.fitToSphere(sphere, true);

const getByCategory = async (category: string) => {
  const [modelId] = fragments.list.keys();
  const model = fragments.list.get(modelId);
  if (!model) return null;
  const items = await model.getItemsOfCategories([new RegExp(`^${category}$`)]);
  const localIds = Object.values(items).flat();
  const modelIdMap: OBC.ModelIdMap = { [modelId]: new Set(localIds) };
  boxer.list.clear();
  await boxer.addFromModelIdMap(modelIdMap);
  const box = boxer.get();
  boxer.list.clear();
  return box;
};

const helper = new THREE.Box3Helper(allModelsBox);
world.scene.three.add(helper);
```

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

### Convert and Load IFC Files with IfcLoader

Source: https://context7.com/thatopen/engine_components/llms.txt

Shows how to configure the IfcLoader, load IFC files into the scene, and export them to the optimized Fragments format for improved performance in future sessions.

```typescript
import * as OBC from "@thatopen/components";
const components = new OBC.Components();
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup({ autoSetWasm: false, wasm: { path: "https://unpkg.com/web-ifc@0.0.74/", absolute: true } });
ifcLoader.onIfcImporterInitialized.add((importer) => { console.log("Available IFC classes:", importer.classes); });
const loadIfc = async (path: string) => {
  const file = await fetch(path);
  const data = await file.arrayBuffer();
  const buffer = new Uint8Array(data);
  await ifcLoader.load(buffer, false, "my-model", { processData: { progressCallback: (progress) => console.log(`Loading: ${progress}%`) } });
};
await loadIfc("https://example.com/model.ifc");
const downloadFragments = async () => {
  const fragments = components.get(OBC.FragmentsManager);
  const [model] = fragments.list.values();
  if (!model) return;
  const fragsBuffer = await model.getBuffer(false);
  const file = new File([fragsBuffer], "model.frag");
  const link = document.createElement("a");
  link.href = URL.createObjectURL(file);
  link.download = file.name;
  link.click();
};
```

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

### Components Initialization

Source: https://context7.com/thatopen/engine_components/llms.txt

The Components class serves as the main singleton container for managing the lifecycle, animation loop, and resource disposal of all BIM components.

```APIDOC
## Components Initialization

### Description
Initializes the main library container and manages the global animation loop and resource lifecycle.

### Method
N/A (Class Instantiation)

### Endpoint
new OBC.Components()

### Parameters
None

### Request Example
const components = new OBC.Components();

### Response
#### Success Response (200)
- **components** (Object) - The initialized singleton container instance.
```

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

### Implement Clipping Planes with Clipper

Source: https://context7.com/thatopen/engine_components/llms.txt

Explains how to enable the Clipper component, configure its visual properties, and handle user interactions like creating planes on double-click or deleting them with keyboard shortcuts.

```typescript
import * as THREE from "three";
import * as OBC from "@thatopen/components";
const components = new OBC.Components();
const casters = components.get(OBC.Raycasters);
casters.get(world);
const clipper = components.get(OBC.Clipper);
clipper.enabled = true;
clipper.config.color = new THREE.Color("#202932");
clipper.config.opacity = 0.2;
clipper.config.size = 5;
clipper.config.visible = true;
container.ondblclick = () => { if (clipper.enabled) { clipper.create(world); } };
window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    if (clipper.enabled) clipper.delete(world);
  }
};
const toggleClippings = () => {
  for (const [, clipping] of clipper.list) {
    clipping.enabled = !clipping.enabled;
  }
};
clipper.deleteAll();
```

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

### Configure PostproductionRenderer for Enhanced Graphics

Source: https://context7.com/thatopen/engine_components/llms.txt

This snippet demonstrates how to set up and configure the PostproductionRenderer to apply visual effects like ambient occlusion, outlines, and gloss to a 3D scene. It requires the @thatopen/components and @thatopen/components-front libraries. The input is a configured world object, and the output is a scene with enhanced visual postprocessing effects enabled.

```typescript
import * as OBC from "@thatopen/components";
import * as OBF from "@thatopen/components-front";

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

// Create world with PostproductionRenderer
const world = worlds.create<
  OBC.SimpleScene,
  OBC.OrthoPerspectiveCamera,
  OBF.PostproductionRenderer
>();

const container = document.getElementById("container")!;
world.scene = new OBC.SimpleScene(components);
world.renderer = new OBF.PostproductionRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);

world.scene.setup();
components.init();

// Enable postproduction
world.renderer.postproduction.enabled = true;

// Configure postproduction style
world.renderer.postproduction.style = OBF.PostproductionAspect.COLOR_PEN_SHADOWS;

// Configure edge effects
const { edgesPass, outlinePass, aoPass } = world.renderer.postproduction;
edgesPass.width = 1.5;
edgesPass.color.set("#000000");

// Configure outline effects
outlinePass.thickness = 2;
outlinePass.fillOpacity = 0.3;
outlinePass.outlineColor.set("#ff0000");

// Configure ambient occlusion
aoPass.blendIntensity = 0.5;

// Add items to outliner for highlighting
const outliner = components.get(OBF.Outliner);
outliner.world = world;

const fragments = components.get(OBC.FragmentsManager);
const [model] = fragments.list.values();
const walls = await model.getItemsOfCategories([/IFCWALL/]);
const wallsIds = walls.IFCWALL;
outliner.addItems({ [model.modelId]: new Set(wallsIds.slice(0, 2)) });

// Toggle postproduction effects
world.renderer.postproduction.outlinesEnabled = true;
world.renderer.postproduction.glossEnabled = true;
world.renderer.postproduction.smaaEnabled = true;
```

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

### Responsive Layout and Menu Styling

Source: https://github.com/thatopen/engine_components/blob/main/packages/core/src/core/Grids/example.html

Defines the base styles for a full-screen application layout and a responsive options menu. It includes media queries to handle visibility toggling on small screens.

```css
body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; overflow: hidden; } .full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; } .options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); } .phone-menu-toggler { visibility: hidden; } @media (max-width: 480px) { .options-menu { visibility: hidden; bottom: 5px; left: 5px; } .options-menu-visible { visibility: visible; } .phone-menu-toggler { visibility: visible; position: fixed; top: 5px; right: 5px; } } .minimap { position: fixed; bottom: 1rem; right: 1rem; }
```

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

### Implement Selection and Highlighting with Highlighter

Source: https://context7.com/thatopen/engine_components/llms.txt

Configures the Highlighter component to provide visual feedback on user interactions. It includes setting up custom materials, handling selection events, and applying specific highlight styles to model items.

```typescript
import * as THREE from "three";
import * as OBC from "@thatopen/components";
import * as OBF from "@thatopen/components-front";

const components = new OBC.Components();
components.get(OBC.Raycasters).get(world);
const highlighter = components.get(OBF.Highlighter);

highlighter.setup({
  world,
  selectMaterialDefinition: {
    color: new THREE.Color("#bcf124"),
    opacity: 1,
    transparent: false,
    renderedFaces: 0,
  },
});

highlighter.events.select.onHighlight.add(async (modelIdMap) => {
  const fragments = components.get(OBC.FragmentsManager);
  for (const [modelId, localIds] of Object.entries(modelIdMap)) {
    const model = fragments.list.get(modelId);
    if (!model) continue;
    const data = await model.getItemsData([...localIds]);
  }
});

highlighter.styles.set("Red", {
  color: new THREE.Color("red"),
  opacity: 1,
  transparent: false,
  renderedFaces: 0,
});
```

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

### Options Menu Styling and Responsiveness (CSS)

Source: https://github.com/thatopen/engine_components/blob/main/examples/ItemsFinder/index.html

Styles a fixed options menu, controlling its position and maximum height. Includes media queries to adjust menu visibility and introduce a phone menu toggler for smaller screens, ensuring usability across devices.

```css
.options-menu {
  position: fixed;
  min-width: unset;
  top: 5px;
  right: 5px;
  max-height: calc(100vh - 10px);
}
.phone-menu-toggler {
  visibility: hidden;
}
@media (max-width: 480px) {
  .options-menu {
    visibility: hidden;
    bottom: 5px;
    left: 5px;
  }
  .options-menu-visible {
    visibility: visible;
  }
  .phone-menu-toggler {
    visibility: visible;
    position: fixed;
    top: 5px;
    right: 5px;
  }
}
```

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

### Responsive Options Menu and Toggler for Small Screens

Source: https://github.com/thatopen/engine_components/blob/main/examples/BoundingBoxer/index.html

Applies responsive styles for screens up to 480px wide. It hides the main options menu by default, makes it visible when the '.options-menu-visible' class is applied, and shows the phone menu toggler.

```css
@media (max-width: 480px) {
  .options-menu {
    visibility: hidden;
    bottom: 5px;
    left: 5px;
  }
  .options-menu-visible {
    visibility: visible;
  }
  .phone-menu-toggler {
    visibility: visible;
    position: fixed;
    top: 5px;
    right: 5px;
  }
}
```

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

### Options Menu Styles

Source: https://github.com/thatopen/engine_components/blob/main/examples/BoundingBoxer/index.html

Styles the options menu, setting its fixed position, maximum height relative to the viewport, and initial minimum width. It also handles the visibility of the menu.

```css
.options-menu {
  position: fixed;
  min-width: unset;
  top: 5px;
  right: 5px;
  max-height: calc(100vh - 10px);
}
```

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

### Responsive CSS Layout for Clip Styler

Source: https://github.com/thatopen/engine_components/blob/main/packages/front/src/core/ClipStyler/example.html

Defines the base styles for the full-screen container and the responsive behavior of the options menu. It ensures the menu is fixed on desktop and togglable on mobile devices with a width of 480px or less.

```css
body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; overflow: hidden; }
.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); width: 28rem; }
.phone-menu-toggler { visibility: hidden; }
@media (max-width: 480px) {
  .options-menu { visibility: hidden; bottom: 5px; left: 5px; width: unset; }
  .options-menu-visible { visibility: visible; }
  .phone-menu-toggler { visibility: visible; position: fixed; top: 5px; right: 5px; }
}
```

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

### Responsive Menu Styles - CSS

Source: https://github.com/thatopen/engine_components/blob/main/packages/front/src/civil/CivilNavigators/example.html

Styles for an options menu, including its fixed positioning and maximum height. It also includes media queries to adjust visibility and positioning for smaller screens (phones).

```css
.options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); }
.phone-menu-toggler { visibility: hidden; }
@media (max-width: 480px) {
  .options-menu {
    visibility: hidden;
    bottom: 5px;
    left: 5px;
  }
  .options-menu-visible {
    visibility: visible;
  }
  .phone-menu-toggler {
    visibility: visible;
    position: fixed;
    top: 5px;
    right: 5px;
  }
}
```

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

### Global Styles and Layout - CSS

Source: https://github.com/thatopen/engine_components/blob/main/packages/front/src/civil/CivilNavigators/example.html

Defines global styles for the body element, including margin, padding, font, and overflow. It also sets up a full-screen container and a grid-based divider for layout.

```css
Civil3DNavigator body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; overflow: hidden; }
.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.divider { display: grid; grid-template: "horizontal viewer" auto / 30rem auto; }
```

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

### Basic Body and Full-Screen Styling (CSS)

Source: https://github.com/thatopen/engine_components/blob/main/examples/ItemsFinder/index.html

Defines base styles for the HTML body, including margin, padding, font, and overflow. It also styles a full-screen container to occupy the entire viewport with relative positioning and overflow hidden.

```css
body {
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
}
.full-screen {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
```

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

### Options Menu and Phone Menu Toggler Styling (CSS)

Source: https://github.com/thatopen/engine_components/blob/main/packages/core/src/fragments/ItemsFinder/example.html

Styles the options menu for fixed positioning and maximum height, and the phone menu toggler. Includes media queries to adjust visibility and positioning for smaller screens (max-width: 480px).

```CSS
.options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); }
.phone-menu-toggler { visibility: hidden; }
@media (max-width: 480px) {
  .options-menu { visibility: hidden; bottom: 5px; left: 5px; }
  .options-menu-visible { visibility: visible; }
  .phone-menu-toggler { visibility: visible; position: fixed; top: 5px; right: 5px; }
}
```

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

### Add Infinite Floor Grids for Spatial Reference

Source: https://context7.com/thatopen/engine_components/llms.txt

This snippet illustrates how to add an infinite floor grid to a scene using the Grids component from @thatopen/components. It requires a pre-configured world object. The output is a visual grid that aids in spatial orientation and serves as a reference surface.

```typescript
import * as OBC from "@thatopen/components";

const components = new OBC.Components();
// ... world setup ...

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

// Configure grid appearance
grid.config.color.set(0x666666);
grid.material.opacity = 0.5;
```

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

### Clip Styler Options Menu CSS

Source: https://github.com/thatopen/engine_components/blob/main/examples/ClipStyler/index.html

Styles the options menu, including its fixed positioning, minimum width, top/right placement, and maximum height calculation for responsiveness. It also includes styles for hiding the menu on larger screens and making it visible on smaller screens via a toggler.

```css
.options-menu {
  position: fixed;
  min-width: unset;
  top: 5px;
  right: 5px;
  max-height: calc(100vh - 10px);
  width: 28rem;
}

.phone-menu-toggler {
  visibility: hidden;
}

@media (max-width: 480px) {
  .options-menu {
    visibility: hidden;
    bottom: 5px;
    left: 5px;
    width: unset;
  }
  .options-menu-visible {
    visibility: visible;
  }
  .phone-menu-toggler {
    visibility: visible;
    position: fixed;
    top: 5px;
    right: 5px;
  }
}
```

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

### Worlds Management

Source: https://context7.com/thatopen/engine_components/llms.txt

The Worlds component manages 3D environments, including the scene, camera, and renderer, allowing for multiple simultaneous viewports.

```APIDOC
## Worlds Management

### Description
Creates and configures a 3D world environment including scene, camera, and renderer setup.

### Method
N/A (Method Call)

### Endpoint
worlds.create<TScene, TCamera, TRenderer>()

### Parameters
#### Path Parameters
- **TScene** (Generic) - The scene implementation class
- **TCamera** (Generic) - The camera implementation class
- **TRenderer** (Generic) - The renderer implementation class

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

### Response
#### Success Response (200)
- **world** (Object) - The configured world instance containing scene, camera, and renderer.
```

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

### CSS Styling for Responsive Layout

Source: https://github.com/thatopen/engine_components/blob/main/examples/BCFTopics/index.html

This CSS code defines the base styling for the application body, including margin, padding, font, and overflow properties. It also includes styles for a full-screen container and a fixed options menu, with media queries to adjust visibility and positioning for smaller screens (mobile).

```CSS
body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; overflow: hidden; }
.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); }
.phone-menu-toggler { visibility: hidden; }
@media (max-width: 480px) {
  .options-menu { visibility: hidden; bottom: 5px; left: 5px; }
  .options-menu-visible { visibility: visible; }
  .phone-menu-toggler { visibility: visible; position: fixed; top: 5px; right: 5px; }
}
```

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

### Organize BIM Model Items with Classifier

Source: https://context7.com/thatopen/engine_components/llms.txt

The Classifier component organizes BIM model items into groups based on categories, levels, spatial structure, or custom criteria. It supports static and dynamic (query-based) grouping. This snippet demonstrates creating custom classifications, adding static items, setting up dynamic queries with ItemsFinder, and retrieving grouped items.

```typescript
import * as OBC from "@thatopen/components";

const components = new OBC.Components();
// ... world and model loading setup ...

// Get the Classifier instance
const classifier = components.get(OBC.Classifier);
const fragments = components.get(OBC.FragmentsManager);

// Create custom classification with a group
const classificationName = "Custom Classification";
const groupName = "My Group";
classifier.getGroupData(classificationName, groupName);

// Add static items to a group programmatically
const slabsModelIdMap: OBC.ModelIdMap = {};
for (const [modelId, model] of fragments.list) {
  const items = await model.getItemsOfCategories([/SLAB/]);
  const localIds = Object.values(items).flat().slice(0, 2);
  slabsModelIdMap[modelId] = new Set(localIds);
}
classifier.addGroupItems(classificationName, groupName, slabsModelIdMap);

// Set up dynamic items using queries (ItemsFinder)
const finder = components.get(OBC.ItemsFinder);
finder.create("First Floor Walls", [
  {
    categories: [/WALL/],
    relation: {
      name: "ContainedInStructure",
      query: {
        categories: [/STOREY/],
        attributes: { queries: [{ name: /Name/, value: /01/ }] },
      },
    },
  },
]);

// Assign query to classifier group
classifier.setGroupQuery(classificationName, groupName, {
  name: "First Floor Walls",
});

// Built-in classification methods
await classifier.byCategory(); // Classify by IFC category
await classifier.byIfcBuildingStorey({ classificationName: "Levels" }); // By floor

// Retrieve items from a classification group
const classification = classifier.list.get(classificationName);
if (classification) {
  const groupData = classification.get(groupName);
  if (groupData) {
    const modelIdMap = await groupData.get();
    console.log("Group items:", modelIdMap);
  }
}
```

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

### ShadowedScene Layout CSS

Source: https://github.com/thatopen/engine_components/blob/main/examples/ShadowedScene/index.html

Defines the base styling for the full-screen container, fixed UI elements, and media queries for mobile responsiveness. It ensures the application occupies the entire viewport and handles menu visibility on smaller screens.

```css
body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; overflow: hidden; }
.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); }
.phone-menu-toggler { visibility: hidden; }
@media (max-width: 480px) {
  .options-menu { visibility: hidden; bottom: 5px; left: 5px; }
  .options-menu-visible { visibility: visible; }
  .phone-menu-toggler { visibility: visible; position: fixed; top: 5px; right: 5px; }
}
.minimap { position: fixed; bottom: 1rem; right: 1rem; }
```

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

### Clip Styler Base and Layout CSS

Source: https://github.com/thatopen/engine_components/blob/main/examples/ClipStyler/index.html

Defines the base styles for the body element and a full-screen container. It sets margins, padding, font, and overflow properties for the body, and ensures the full-screen class occupies the entire viewport with relative positioning and hidden overflow.

```css
body {
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
}

.full-screen {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
```

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

### Area Measurement CSS Styling

Source: https://github.com/thatopen/engine_components/blob/main/examples/AreaMeasurement/index.html

Provides base styling for the Area Measurement body, full-screen container, and options menu. It includes responsive adjustments for smaller screens to manage menu visibility and positioning.

```css
body {
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
}

.full-screen {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.options-menu {
  position: fixed;
  min-width: unset;
  top: 5px;
  right: 5px;
  max-height: calc(100vh - 10px);
  z-index: 500;
}

.phone-menu-toggler {
  visibility: hidden;
}

@media (max-width: 480px) {
  .options-menu {
    visibility: hidden;
    bottom: 5px;
    left: 5px;
    z-index: 500;
  }
  .options-menu-visible {
    visibility: visible;
  }
  .phone-menu-toggler {
    visibility: visible;
    position: fixed;
    top: 5px;
    right: 5px;
  }
}
```

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

### Full-Screen Container Styles

Source: https://github.com/thatopen/engine_components/blob/main/examples/BoundingBoxer/index.html

Defines styles for elements intended to occupy the full viewport width and height, with relative positioning and hidden overflow. This is typically used for main content areas or modals.

```css
.full-screen {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
```

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

### Implement LengthMeasurement for Distance Measuring

Source: https://context7.com/thatopen/engine_components/llms.txt

This code snippet shows how to integrate and use the LengthMeasurement component for interactive distance measurements in a 3D scene. It depends on @thatopen/components, @thatopen/components-front, and @thatopen/fragments. The component takes a world object and configuration options as input, allowing users to create, delete, and retrieve measurement data.

```typescript
import * as THREE from "three";
import * as OBC from "@thatopen/components";
import * as OBF from "@thatopen/components-front";
import * as FRAGS from "@thatopen/fragments";

const components = new OBC.Components();
// ... world setup with PostproductionRenderer ...

// Get the LengthMeasurement component
const measurer = components.get(OBF.LengthMeasurement);
measurer.world = world;
measurer.color = new THREE.Color("#494cb6");
measurer.enabled = true;
measurer.snappings = [FRAGS.SnappingClass.POINT];

// Create measurements on double click
container.ondblclick = () => measurer.create();

// Delete measurement under cursor
window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    measurer.delete();
  }
};

// Delete all measurements
const deleteDimensions = () => {
  measurer.list.clear();
};

// Get all measurement values
const getAllValues = () => {
  const lengths: number[] = [];
  for (const line of measurer.list) {
    lengths.push(line.value);
  }
  return lengths;
};

// Listen for new measurements
measurer.list.onItemAdded.add((line) => {
  const center = new THREE.Vector3();
  line.getCenter(center);
  const radius = line.distance() / 3;
  const sphere = new THREE.Sphere(center, radius);
  world.camera.controls.fitToSphere(sphere, true);
});

// Configure measurement options
measurer.units = "m"; // meters
measurer.rounding = 2; // decimal places
measurer.mode = "default"; // or "edge"

// Display additional dimension components
for (const dimension of measurer.lines) {
  dimension.displayRectangularDimensions();
  dimension.displayProjectionDimensions();
}
```

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

### FragmentsManager CSS Layout Styles

Source: https://github.com/thatopen/engine_components/blob/main/examples/FragmentsManager/index.html

Defines the base layout for the FragmentsManager, including full-screen container settings and responsive menu toggling for mobile devices. It ensures the application occupies the entire viewport and handles menu visibility based on screen width.

```css
body { margin: 0; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; overflow: hidden; } .full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; } .options-menu { position: fixed; min-width: unset; top: 5px; right: 5px; max-height: calc(100vh - 10px); } .phone-menu-toggler { visibility: hidden; } @media (max-width: 480px) { .options-menu { visibility: hidden; bottom: 5px; left: 5px; } .options-menu-visible { visibility: visible; } .phone-menu-toggler { visibility: visible; position: fixed; top: 5px; right: 5px; } }
```

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

### OrthoPerspectiveCamera CSS Styling

Source: https://github.com/thatopen/engine_components/blob/main/packages/core/src/core/OrthoPerspectiveCamera/example.html

Provides CSS rules for the OrthoPerspectiveCamera component, defining base styles, full-screen layout, options menu positioning, and responsive adjustments for mobile devices.

```CSS
body {
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
}

.full-screen {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.options-menu {
  position: fixed;
  min-width: unset;
  top: 5px;
  right: 5px;
  max-height: calc(100vh - 10px);
}

.phone-menu-toggler {
  visibility: hidden;
}

@media (max-width: 480px) {
  .options-menu {
    visibility: hidden;
    bottom: 5px;
    left: 5px;
  }
  .options-menu-visible {
    visibility: visible;
  }
  .phone-menu-toggler {
    visibility: visible;
    position: fixed;
    top: 5px;
    right: 5px;
  }
}
```

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

### HTML Structure for Angle Measurement

Source: https://github.com/thatopen/engine_components/blob/main/examples/AngleMeasurement/index.html

Defines the basic HTML structure for the Angle Measurement component, including body and container elements.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Angle Measurement</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="full-screen">
    <!-- Content goes here -->
    <div class="options-menu">
      <!-- Menu items -->
    </div>
    <button class="phone-menu-toggler">Toggle Menu</button>
  </div>
</body>
</html>
```

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

### Phone Menu Toggler Styles

Source: https://github.com/thatopen/engine_components/blob/main/examples/BoundingBoxer/index.html

Styles the toggler element for the phone menu, initially hiding it. This element becomes visible on smaller screens to allow interaction with the menu.

```css
.phone-menu-toggler {
  visibility: hidden;
}
```

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

### Manage BIM Element Visibility with Hider

Source: https://context7.com/thatopen/engine_components/llms.txt

The Hider component controls item visibility, allowing you to hide, show, or isolate specific elements in the BIM model. This snippet demonstrates how to isolate elements by category, hide specific elements, and reset all visibility settings.

```typescript
import * as OBC from "@thatopen/components";

const components = new OBC.Components();
// ... world and model loading setup ...

const hider = components.get(OBC.Hider);
const fragments = components.get(OBC.FragmentsManager);

// Isolate items by category (hides everything except specified items)
const isolateByCategory = async (categories: string[]) => {
  const modelIdMap: OBC.ModelIdMap = {};
  const categoriesRegex = categories.map((cat) => new RegExp(`^${cat}$`));

  for (const [, model] of fragments.list) {
    const items = await model.getItemsOfCategories(categoriesRegex);
    const localIds = Object.values(items).flat();
    modelIdMap[model.modelId] = new Set(localIds);
  }
  await hider.isolate(modelIdMap);
};

// Usage
await isolateByCategory(["IFCWALL", "IFCSLAB"]);

// Hide specific items
const hideByCategory = async (categories: string[]) => {
  const modelIdMap: OBC.ModelIdMap = {};
  const categoriesRegex = categories.map((cat) => new RegExp(`^${cat}$`));

  for (const [, model] of fragments.list) {
    const items = await model.getItemsOfCategories(categoriesRegex);
    const localIds = Object.values(items).flat();
    modelIdMap[model.modelId] = new Set(localIds);
  }
  await hider.set(false, modelIdMap);
};

await hideByCategory(["IFCWINDOW"]);

// Reset all visibility (show everything)
await hider.set(true);

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.