docs/Tutorials/UserInterface/OBC/ModelsList.mdx - main - tiktaalik/ThatOpenEngineDocs

docs/Tutorials/UserInterface/OBC/ModelsList.mdx
134 строки5 KB
Antonio González Viegas
chore: fix broken worker paths
14 ноя 2025, 13:20
14 ноя 2025, 13:20eeb38b1
<div style={{position: "relative"}}><iframe src="https://thatopen.github.io/engine_ui-components/examples/ModelsList"></iframe><button class="full-screen-btn" onClick={() => window.open("https://thatopen.github.io/engine_ui-components/examples/ModelsList")} >Go Full Screen</button></div>

:::info Source
Copying and pasting? We've got you covered! You can find the full source code of this tutorial [here](https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ModelsList/example.ts).
:::

## Managing your loaded models 🏢
---
What else can we say? The task is really simple: we need to see a list of the loaded models in the app. Let's get into it!
### 🖖 Importing our Libraries
In this tutorial, we will import:
- @thatopen/components to set up the barebone of our app.
- @thatopen/ui to add some simple and cool UI menus.
- @thatopen/ui-obc to add some cool pre-made UI menus for components.

```js
import * as OBC from "@thatopen/components";
import * as BUI from "@thatopen/ui";
// You have to import from "@thatopen/ui-obc"
import * as BUIC from "../..";
```
### 📋 Initializing the UI
As always, let's first initialize the UI library. Remember you only have to do it once in your entire app.

```js
BUI.Manager.init();
```
### 🌎 Setting up a simple scene
---
We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

```js
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();
```
### Setting up the components
First of all, we're going to get the `FragmentIfcLoader` from an existing components instance:

```js
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();
```
The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the `FragmentIfcLoader` then the wasm path is not going to be defined and an error will arise 🤓. Just after we have setup the loader, let's then configure the `FragmentManager` so any time a model is loaded it gets added to some world scene created before: 

```js
const fragments = components.get(OBC.FragmentsManager);
fragments.init(
  "https://thatopen.github.io/engine_fragment/resources/worker.mjs",
);

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

fragments.list.onItemSet.add(async ({ value: model }) => {
  model.useCamera(world.camera.three);
  world.scene.three.add(model.object);
  await fragments.core.update(true);
});
```
### Creating the models list component
Allright! Now that some basic events are setup, it's time to create a new fresh models list component:

```js
const [modelsList] = BUIC.tables.modelsList({
  components,
  metaDataTags: ["schema"],
  actions: { download: true },
});
```
Now that we have a brand new models list created, we need to add it to the HTML page. For it, let's create simple BIM panel component where we include the models list and also a pre-made IFC load button 👇

```js
const panel = BUI.Component.create(() => {
  const [loadFragBtn] = BUIC.buttons.loadFrag({ components });

  return BUI.html`
   <bim-panel label="IFC Models">
    <bim-panel-section label="Importing">
      ${loadFragBtn}
    </bim-panel-section>
    <bim-panel-section icon="mage:box-3d-fill" label="Loaded Models">
      ${modelsList}
    </bim-panel-section>
   </bim-panel> 
  `;
});
```
Finally, let's append the BIM Panel to the page to see the models list working 😉

```js
const app = document.createElement("bim-grid") as BUI.Grid<["main"]>;
app.layouts = {
  main: {
    template: `
      "panel viewport"
      / 23rem 1fr
    `,
    elements: { panel, viewport },
  },
};

app.layout = "main";
document.body.append(app);
```
Congratulations! You've now a ready to go user interface that let's you show and dispose IFC models loaded into your app 🥳