diff --git a/build/404.html b/build/404.html index eab9e4b5..432380e0 100644 --- a/build/404.html +++ b/build/404.html @@ -4,13 +4,13 @@ Page Not Found | That Open Docs - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/BoundingBoxer/index.html b/build/Tutorials/Components/Core/BoundingBoxer/index.html index 25466645..0860847c 100644 --- a/build/Tutorials/Components/Core/BoundingBoxer/index.html +++ b/build/Tutorials/Components/Core/BoundingBoxer/index.html @@ -4,7 +4,7 @@ BoundingBoxer | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

BoundingBoxer

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐ŸงŠ Playing with boxesโ€‹

In this tutorial, you'll learn to easily create the bounding boxes of a BIM model. This can be useful for knowing the overall position and dimension of your models, which can be used, for instance, to make the camera fit a whole BIM model in the screen.

Bounding boxes?

Bounding boxes (AABB or Axis-Aligned Bounding Boxes) are the boxes aligned with the X, Y and Z axes of a 3D model that contain one or many objects. They are very common in 3D applications to make fast computations that require to know the whole dimension or position of one or many objects.

In this tutorial, we will import:

  • @thatopen/components to set up the barebone of our app.
  • Stats.js (optional) to measure the performance of our app.
  • @thatopen/ui to add some simple and cool UI menus.
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBC from "@thatopen/components";

๐ŸŒŽ 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.

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

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

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

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐Ÿงณ Loading a BIM modelโ€‹

We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file.

Fragments?

If you are not familiar with fragments, check out the IfcLoader tutorial!

const fragments = components.get(OBC.FragmentsManager);
const file = await fetch(
  "https://thatopen.github.io/engine_components/resources/small.frag",
);
const data = await file.arrayBuffer();
const buffer = new Uint8Array(data);
const model = fragments.load(buffer);
world.scene.three.add(model);

๐ŸŽฒ Creation of Bounding Boxesโ€‹

Now that our setup is done, lets see how you can create the bounding boxes of the model. BIM models are complex, but don't worry: creating the bounding boxes is a piece of cake thanks to the BoundingBoxer.๐Ÿ’ช We can add models to the computation of the bounding box simply by using the add() method.

const fragmentBbox = components.get(OBC.BoundingBoxer);
fragmentBbox.add(model);

๐Ÿ‘“ Reading the Bounding Box dataโ€‹

After adding the model, we can now read the mesh from bounding box using getMesh() method.

Don't forget to clean up after using it! ๐Ÿงน

It's a good practice to reset the bounding box after using it with the reset() method. Otherwise, if you add more models or meshes to the bounding boxer, the bounding box will compute a bounding box that includes everything (including the previously added models).

const bbox = fragmentBbox.getMesh();
fragmentBbox.reset();

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐Ÿงฉ Adding some UIโ€‹

We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

BUI.Manager.init();

Now we will create a new panel with an input to make the camera fit the model to the screen. For more information about the UI library, you can check the specific documentation for it!

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Bounding Boxes Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
         
        <bim-button 
          label="Fit BIM model" 
          @click="${() => {
            world.camera.controls.fitToSphere(bbox, true);
          }}">  
        </bim-button>  

      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

๐ŸŽ‰ Wrap upโ€‹

That's it! You have created the bounding box of a BIM model and used it to make the camera fit the model to the screen. This also works with many models!

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Clipper/index.html b/build/Tutorials/Components/Core/Clipper/index.html index edfd52c7..1e992077 100644 --- a/build/Tutorials/Components/Core/Clipper/index.html +++ b/build/Tutorials/Components/Core/Clipper/index.html @@ -4,14 +4,14 @@ Clipper | That Open Docs - +
Skip to main content

Clipper

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

โœ‚๏ธ Cutting our scene with planesโ€‹

The Clipping Tool is a powerful feature in 3D modelling that helps you dissect 3D objects. Clipping Tool is useful for inspecting and analyzing objects in detail.๐Ÿ’ช

Clipping?

Clipping is the process of "cutting" a 3D object by creating a plane. That way, we can have a bird view of the inside of a BIM model.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
import * as THREE from "three";
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBC from "@thatopen/components";

๐ŸŒŽ 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.

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

world.camera.controls.setLookAt(10, 10, 10, 0, 0, 0);

world.scene.setup();

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐ŸŽฒ Creating a Cube Meshโ€‹

Let's start by adding a Cube, which we can dissect. We will create a Cube with 3x3x3 dimensions and use purple color for the material.

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, 0);
world.scene.three.add(cube);
world.meshes.add(cube);

โšก Initializing the Raycasterโ€‹

We also need to initialize the Raycaster for this world so that the position of the mouse is tracked from the very first moment we use the clipping planes.

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

โš™๏ธ Adding the Clipperโ€‹

Here comes the interesting part, we will add a Simple Clipper to our scene. You can instantiate it, but it's always better to use the components.get(OBC.Clipper) method to get it. All components are meant to be used as a singleton per components instance, and using this system to get a component makes sure this happens.

const clipper = components.get(OBC.Clipper);
Controllign the plane

Each plane generated by the clipper can be controlled using the built-in 3D arrows. You can control the activation and visibility of each plane using plane.enabled and plane.visible. To control the activation and visibility of all planes, use clipper.enabled and clipper.visible.

clipper.enabled = true;

๐Ÿค Performing Clipping Eventsโ€‹

Now, we want a way to create a clipping plane on demand. You can do it with a Single Click or Double Click of a mouse. For this tutorial, we will use Double Click. This will cast a ray from the mouse position to the scene and check if the ray intersects with any of the 3D objects. If it does, it will create a new clipping plane in the point of intersection.

container.ondblclick = () => clipper.create(world);

We use the Raycaster to determine if the intersection has occurred. The clipper places a plane after detecting the face on which the mouse was clicked. ๐Ÿ˜Ž :::

๐Ÿงน Deleting the Clipping Planesโ€‹

Now that we know how to make multiple clipping planes, we must also know how to delete them when necessary. Clipping planes can be removed using clipper.delete(world) (which will pick the first plane under the mouse using the raycaster in the specified world) or clipper.delete(world, plane) (which will delete a specific clipping plane).

window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    clipper.delete(world);
  }
};
Delete all the Clipping Planes

โŽ If you want to safely delete all the clipping planes that were created you can simply call clipper.deleteAll().

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐Ÿงฉ Adding some UIโ€‹

We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

BUI.Manager.init();

Now we will create some UI elements and bind them to some of the controls of the clipper, like activation, visibility, size, color, etc. For more information about the UI library, you can check the specific documentation for it!

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel label="Clipper Tutorial" class="options-menu">
          <bim-panel-section collapsed label="Commands">
      
        <bim-label label="Double click: Create clipping plane"></bim-label>
        <bim-label label="Delete key: Delete clipping plane"></bim-label>
       
        
      </bim-panel-section>
      <bim-panel-section collapsed label="Others"">
          
        <bim-checkbox label="Clipper enabled" checked 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            clipper.enabled = target.value;
          }}">
        </bim-checkbox>
        
        <bim-checkbox label="Clipper visible" checked 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            clipper.visible = target.value;
          }}">
        </bim-checkbox>
      
        <bim-color-input 
          label="Planes Color" color="#202932" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            clipper.material.color.set(target.color);
          }}">
        </bim-color-input>
        
        <bim-number-input 
          slider step="0.01" label="Planes opacity" value="0.2" min="0.1" max="1"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            clipper.material.opacity = target.value;
          }}">
        </bim-number-input>
        
        <bim-number-input 
          slider step="0.1" label="Planes size" value="5" min="2" max="10"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            clipper.size = target.value;
          }}">
        </bim-number-input>
        
        <bim-button 
          label="Delete all" 
          @click="${() => {
            clipper.deleteAll();
          }}">  
        </bim-button>        
        
        <bim-button 
          label="Rotate cube" 
          @click="${() => {
            cube.rotation.x = 2 * Math.PI * Math.random();
            cube.rotation.y = 2 * Math.PI * Math.random();
            cube.rotation.z = 2 * Math.PI * Math.random();
          }}">  
        </bim-button>
       
        
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

๐ŸŽ‰ Wrap upโ€‹

That's it! You have created your first clipping planes to cut your 3D models. You can now play with the inputs to see how the planes change and adapt them to the look of your app! If you liked planes, don't forget to check out the Edges Planes tutorial, who includes styles, edges and fills and much more.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Cullers/index.html b/build/Tutorials/Components/Core/Cullers/index.html index 466c2b04..be32d75d 100644 --- a/build/Tutorials/Components/Core/Cullers/index.html +++ b/build/Tutorials/Components/Core/Cullers/index.html @@ -4,7 +4,7 @@ Cullers | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

Cullers

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐Ÿš… Managing Performanceโ€‹

There are occasions when your scene has too many objects. Multiple objects being rendered simultaneously lengthens computation timeโŒ›๏ธ and degrades performance.๐ŸŒก๏ธ In this tutorial, we will use ScreenCuller to improve performance by reducing unnecessary computations.๐Ÿš€

What's "culling"?

Culling is a process where we hide some objects of the scene. In this case, we'll hide objects that are not visible, either because they are outside of the scope of the camera, or because there are other objects in front of them, hiding them from the camera. The goal is simple: only compute the objects visible by the camera. This is great in BIM models, because we generally don't want to see ALL the objects at the same time.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • Stats.js (optional) to measure the performance of our app.
import * as THREE from "three";
import Stats from "stats.js";
import * as OBC from "../..";

๐ŸŒŽ 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.

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

world.camera.controls.setLookAt(13, 13, 13, 0, 0, 0);

world.scene.setup();

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

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐Ÿงฐ Creating Screen Cullerโ€‹

Although adding Screen Culler to your project can appear difficult, it is actually very easy. We just need to get the Cullers component and create a new instance of ScreenCuller. Remember that although you can instance the Cullers component, it's better to get it from the components object, as all the components are meant to be singletons within a Component instance, and this ensures that.

const cullers = components.get(OBC.Cullers);
const culler = cullers.create(world);

You can use the threshold property to control the minimum size of an element in screen in order for it to be revealed by the culler. Higher numbers result in less objects visible, but more performance:

culler.threshold = 200;

Additionally, we will activate the culler.renderDebugFrame so that we can see the 2D screen of the elements that are not occluded. We will get the domElement and attach it to the body so that we can see this frame in real-time. To see it in your app, just comment out the debugFrame.style.visibility = "collapse"; line.

culler.renderDebugFrame = true;
const debugFrame = culler.renderer.domElement;
document.body.appendChild(debugFrame);
debugFrame.style.position = "fixed";
debugFrame.style.left = "0";
debugFrame.style.bottom = "0";
debugFrame.style.visibility = "collapse";

๐Ÿงฑ Adding a ton of cubesโ€‹

We'll add the Simple 3D Cube and do it 300 times!๐Ÿคฏ We'll generate box geometry and use Lambert material.

const cubes: THREE.Mesh[] = [];
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
Randomising the Cubes Placement

We'll write a quick utility function that returns a random number between 0 and the specified upper limit. You can use this for a variety of purposes, but for this tutorial it will be used to generate random positions for cubes that we will add later to our scene.๐Ÿ“Œ

function getRandomNumber(limit: number) {
  return Math.random() * limit;
}

Now, using the getRandomNumber() method we previously created, we will add the 300 cube meshes to our scene at random positions. We'll add the cube to the scene and adjust its position between 0 and 10. Additionally, we will add meshes to the culler object, which will help the culler recognize and draw the elements that are visible to the camera, which can be done with the culler's add() method.

function regenerateCubes() {
  for (let i = 0; i < 300; i++) {
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = getRandomNumber(10);
    cube.position.y = getRandomNumber(10);
    cube.position.z = getRandomNumber(10);
    cube.updateMatrix();
    world.scene.three.add(cube);
    culler.add(cube);
    cubes.push(cube);
  }
}

regenerateCubes();

๐Ÿ”„๏ธ Updating the Cullerโ€‹

Here comes the most crucial part! The core aim of ScreenCuller is to output just those components that are visible to the camera.

How often should you update the culler?

It depends on the experience you are looking for. Naturally, the most often you update it, the faster your user will discover new objects that were hidden before, but that also means that your app will be less performant.

In this tutorial we are updating it each time the camera stops moving, which generally works well for most apps.

culler.needsUpdate = true;
world.camera.controls.addEventListener("controlend", () => {
  culler.needsUpdate = true;
});

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

Great job! ๐ŸŽ‰ Now you know how to optimise your 3D scene using a Screen Culler component! Your BIM app will now have unmatched performance and can render huge scenes easily.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/FragmentsManager/index.html b/build/Tutorials/Components/Core/FragmentsManager/index.html index d03e9de7..053eb9c2 100644 --- a/build/Tutorials/Components/Core/FragmentsManager/index.html +++ b/build/Tutorials/Components/Core/FragmentsManager/index.html @@ -4,7 +4,7 @@ FragmentsManager | That Open Docs - + @@ -26,7 +26,7 @@ After using fragments.dispose(), you should reinitialize Fragment Manager to maintain it's original state for further uses.

function disposeFragments() {
  fragments.dispose();
}

Loading a .zip fragment that you have locally is also quite easy:

function importExternalFragment() {
  if (fragments.groups.size) {
    return;
  }
  const input = document.createElement("input");
  input.type = "file";
  input.onchange = async () => {
    if (!(input.files && input.files[0])) return;
    const file = input.files[0];
    if (file.name.includes(".frag")) {
      const url = URL.createObjectURL(file);
      const result = await fetch(url);
      const data = await result.arrayBuffer();
      const buffer = new Uint8Array(data);
      fragments.load(buffer);
    }
    input.remove();
  };
  input.click();
}

const gui = new dat.GUI();

const actions = {
  loadFragments: () => loadFragments(),
  disposeFragments: () => disposeFragments(),
  exportFragments: () => exportFragments(),
  importExternalFragment: () => importExternalFragment(),
};

gui.add(actions, "loadFragments").name("Load Fragments");
gui.add(actions, "disposeFragments").name("Dispose Fragments");
gui.add(actions, "exportFragments").name("Export Fragments");
gui.add(actions, "importExternalFragment").name("Import External Fragment");

Congratulations ๐ŸŽ‰ on completing this short yet powerful tutorial! Now you can render or export Fragment files in your BIM Apps using Fragment Manager ๐ŸŽฏ Let's keep it up and check out another tutorial! ๐ŸŽ“

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Grids/index.html b/build/Tutorials/Components/Core/Grids/index.html index 5c4c56c6..fb13150c 100644 --- a/build/Tutorials/Components/Core/Grids/index.html +++ b/build/Tutorials/Components/Core/Grids/index.html @@ -4,13 +4,13 @@ Grids | That Open Docs - +
Skip to main content

Grids

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐Ÿ•ธ๏ธ Adding a fancy grid to our sceneโ€‹

In this tutorial you'll learn how to add a fancy grid to your scene. It's super easy and will make your app look much more professional!

Why a grid?

Grids are very common in 3D apps, and it's a great way to have a reference point for your users to navigate around, even when there are no visible objects around.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
import * as THREE from "three";
import * as OBC from "@thatopen/components";

๐ŸŒŽ 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.

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 cube = new THREE.Mesh(new THREE.BoxGeometry());
world.scene.three.add(cube);

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐Ÿ•ท๏ธ Adding the grid to the worldโ€‹

To add the grid to the world, we will use the Grids component. Instead of instantiating it, we will get it directly from the components object. Remember that all components are meant to be singletons. Then, we will call the create method to add a grid to the scene.

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

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐ŸŽ‰ Wrap upโ€‹

Congratulations! You have created your first infinite grid in your 3D app. As you can see, it's super easy and it looks great!

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Hider/index.html b/build/Tutorials/Components/Core/Hider/index.html index 024c654e..ad1abafd 100644 --- a/build/Tutorials/Components/Core/Hider/index.html +++ b/build/Tutorials/Components/Core/Hider/index.html @@ -4,7 +4,7 @@ Hider | That Open Docs - + @@ -32,7 +32,7 @@ property sets and quantity sets, including logical operators. Try them out in the example below, and check out more tutorials to bring your BIM apps to the next level!

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcGeometryTiler/index.html b/build/Tutorials/Components/Core/IfcGeometryTiler/index.html index e61aee1e..c51c3c13 100644 --- a/build/Tutorials/Components/Core/IfcGeometryTiler/index.html +++ b/build/Tutorials/Components/Core/IfcGeometryTiler/index.html @@ -4,14 +4,14 @@ IfcGeometryTiler | That Open Docs - +
Skip to main content

IfcGeometryTiler

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐Ÿ’ช Let's go BIGโ€‹

Do you need to open huge big IFC files fast, even on more modest devices? If so, you are in luck! We can open virtually any model on any device in seconds thanks to BIM TILES!

BIM tiles?

The idea behind BIM tiles is pretty simple! Instead of loading the whole BIM model at once, we just load the explicit geometries that are seen by the user. It's way faster than opening the IFC directly, but for this you'll need a backend (or to rely on the file system of the user if you are building a desktop or mobile app).

Let's see how to do this step by step!

๐Ÿงฉ Converting the IFC model to tilesโ€‹

The first step is to transform the IFC model into BIM tiles. The reason why we have to do this is pretty simple: geometry in IFC is implicit (e.g. a wall is defined as an extrusion). This means that it needs to be computed and converted to explicit geometry (triangles) so that it can be displayed in 3D.

note

As you know, IFC files contains two things: geometries and properties. We need to convert both things if we want to take full advantage of streaming!

The way the streaming works is by fetching files based on the visible things in the viewer. Those files contain pieces of geometry information (geometry chunks) that the engine uses in order to create and display the geometry. But, where do we get those files from? Easy! From the IFC conversion to tiles. So, let's start converting the IFC geometry to tiles and getting those files so the streamer can do its job. In order to do it, we need the first component from the collection of streaming components: FragmentIfcStreamConverter:

// We need this wasm configuration later to convert properties
const wasm = {
  path: "https://unpkg.com/web-ifc@0.0.53/",
  absolute: true,
};

const tiler = new OBC.IfcGeometryTiler(components);
tiler.settings.wasm = wasm;
tiler.settings.minGeometrySize = 20;
tiler.settings.minAssetsSize = 1000;

The FragmentIfcStreamConverter class takes IFC files and transform their geometry into tiles.

danger

The converter doesn't give you the files needed to streaming right away, just the data that must be contained in those files. Is your job to create the files! Why? Because then you can have full control over when, where and how to create them.

The first file we need is a JSON which is the entry point of the geometries streaming. That JSON must have the following structure:

// @ts-ignore
interface GeometriesStreaming {
  assets: {
    id: number;
    geometries: {
      color: number[];
      geometryID: number;
      transformation: number[];
    }[];
  }[];

  geometries: {
    [id: number]: {
      boundingBox: { [id: number]: number };
      hasHoles: boolean;
      geometryFile: "url-to-geometry-file-in-your-backend";
    };
  };

  globalDataFileId: "url-to-fragments-group-file-in-your-backend";
}

The second file is actually not just a single file, but X number of files (depends on how big is your model) that contains the required information to generate the geometry while streaming. In order to create the JSON file and get the information with the geometry, the FragmentIfcStreamConverter as well as other components in the collection of streaming components, emits events that let you get the processed data from the conversion process.

info

Nedless to say, you need to set up your event listeners before triggering the conversion!

Let's start with the first event:

let files: { name: string; bits: (Uint8Array | string)[] }[] = [];

let geometriesData: OBC.StreamedGeometries = {};
let geometryFilesCount = 1;

tiler.onGeometryStreamed.add((geometry) => {
  const { buffer, data } = geometry;
  const bufferFileName = `small.ifc-processed-geometries-${geometryFilesCount}`;
  for (const expressID in data) {
    const value = data[expressID];
    value.geometryFile = bufferFileName;
    geometriesData[expressID] = value;
  }
  files.push({ name: bufferFileName, bits: [buffer] });
  geometryFilesCount++;
});

One of the most important things to keep in mind is that the event we just setup will get fired as many times as per the "chunk" data generated by the converted. Simply put, the event will get fired several times โฒ and per each time we will produce one file data that is stored in the geometryFiles array. Later on, we will download the geometry files โฌ.

note

As you see, geometriesData is not being stored as a file to be downloaded. The reason is because that is part of the information we need to create the entry JSON file ๐Ÿš€.

Nice! Let's go with the second event that will give us more information to create the required files:

let assetsData: OBC.StreamedAsset[] = [];

tiler.onAssetStreamed.add((assets) => {
  assetsData = [...assetsData, ...assets];
});

This one is easier as the event doesn't produce binary data, but information we need to create the JSON file.

Are you familiar with That Open Engine?

If you're familiar with That Open Engine, you should recall fragments. Fragments are just a fancy word we use to refer to ThreeJS geometry efficiently created from IFC files which are the things you end up see in the viewer... one IFC file is usually composed of many fragments and all of them are grouped in a FragmentsGroup, which is the final processed IFC model.

Why do we remind you about FragmentsGroup? Because streaming also works with them! So yes, when you convert an IFC to tiles, the converter also creates a FragmentsGroup in the background, and that information is extremely important for the streamer in order to display the streamed file as everything gets grouped there. So, there is another event that gives you the FragmentsGroup binary data and we also need to create a file with that information.

tiler.onIfcLoaded.add((groupBuffer) => {
  files.push({
    name: "small.ifc-processed-global",
    bits: [groupBuffer],
  });
});
danger

You can name the file whatever you want, but is extremely important you finish the file name with -global!

This is pretty much it! Now that we've setup the main listeners, the last thing is to download all the data once the conversion has fininshed. To do so, we can use the progress event:

function downloadFile(name: string, ...bits: (Uint8Array | string)[]) {
  const file = new File(bits, name);
  const anchor = document.createElement("a");
  const url = URL.createObjectURL(file);
  anchor.href = url;
  anchor.download = file.name;
  anchor.click();
  URL.revokeObjectURL(url);
}

async function downloadFilesSequentially(
  fileList: { name: string; bits: (Uint8Array | string)[] }[],
) {
  for (const { name, bits } of fileList) {
    downloadFile(name, ...bits);
    await new Promise((resolve) => {
      setTimeout(resolve, 100);
    });
  }
}

tiler.onProgress.add((progress) => {
  if (progress !== 1) return;
  setTimeout(async () => {
    const processedData = {
      geometries: geometriesData,
      assets: assetsData,
      globalDataFileId: "small.ifc-processed-global",
    };
    files.push({
      name: "small.ifc-processed.json",
      bits: [JSON.stringify(processedData)],
    });
    await downloadFilesSequentially(files);
    assetsData = [];
    geometriesData = {};
    files = [];
    geometryFilesCount = 1;
  });
});

Great! Now that we have everything setup, is time to finally convert the IFC file. In order to trigger the conversion, we can just do the following:

async function processFile() {
  const fetchedIfc = await fetch("https://thatopen.github.io/engine_components/resources/small.ifc");
  const ifcBuffer = await fetchedIfc.arrayBuffer();
  // We will need this information later to also convert the properties
  const ifcArrayBuffer = new Uint8Array(ifcBuffer);
  // This triggers the conversion, so the listeners start to be called
  await tiler.streamFromBuffer(ifcArrayBuffer);
}

If everything went as expected, you should now be seeing some files being downloaded from your app ๐Ÿคฏ Do not get scary if they're a lot, as big models tend to have many files! All of that is the information the streaming uses in order to display the geometry in the most efficient way possible ๐Ÿ’ช

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcLoader/index.html b/build/Tutorials/Components/Core/IfcLoader/index.html index 763be6ae..4544578f 100644 --- a/build/Tutorials/Components/Core/IfcLoader/index.html +++ b/build/Tutorials/Components/Core/IfcLoader/index.html @@ -4,7 +4,7 @@ IfcLoader | That Open Docs - + @@ -47,7 +47,7 @@ generate the 3D geometry and property data for them and navigate them in 3D. In other tutorials, you'll find tons of tools to work with them and create amazing BIM apps! See you there ๐Ÿ’ช

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html b/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html index 6862bd50..d5184265 100644 --- a/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html +++ b/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html @@ -4,7 +4,7 @@ IfcPropertiesTiler | That Open Docs - + @@ -17,7 +17,7 @@ using events. In addition to properties, you will get indices, which is an indexation data of the properties to be able to use them effectively when streamed.

let counter = 0;

const files: { name: string; bits: Blob }[] = [];

propsStreamer.onPropertiesStreamed.add(async (props) => {
  if (!jsonFile.types[props.type]) {
    jsonFile.types[props.type] = [];
  }
  jsonFile.types[props.type].push(counter);

  for (const id in props.data) {
    jsonFile.ids[id] = counter;
  }

  const name = `small.ifc-processed-properties-${counter}`;
  const bits = new Blob([JSON.stringify(props.data)]);
  files.push({ bits, name });

  counter++;
});

propsStreamer.onProgress.add(async (progress) => {
  console.log(progress);
});

propsStreamer.onIndicesStreamed.add(async (props) => {
  files.push({
    name: `small.ifc-processed-properties.json`,
    bits: new Blob([JSON.stringify(jsonFile)]),
  });

  const relations = components.get(OBC.IfcRelationsIndexer);
  const serializedRels = relations.serializeRelations(props);

  files.push({
    name: "small.ifc-processed-properties-indexes",
    bits: new Blob([serializedRels]),
  });

  await downloadFilesSequentially(files);
});

Great! Now that we have everything setup, is time to finally convert the IFC file. In order to trigger the conversion, we can just do the following:

async function processFile() {
  const fetchedIfc = await fetch("https://thatopen.github.io/engine_components/resources/small.ifc");
  const ifcBuffer = await fetchedIfc.arrayBuffer();
  // We will need this information later to also convert the properties
  const ifcArrayBuffer = new Uint8Array(ifcBuffer);
  // This triggers the conversion, so the listeners start to be called
  await propsStreamer.streamFromBuffer(ifcArrayBuffer);
}

If everything went as expected, you should now be seeing some files being downloaded from your app ๐Ÿคฏ Do not get scary if they're a lot, as big models tend to have many files! All of that is the information the streaming uses in order to display the geometry in the most efficient way possible ๐Ÿ’ช

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html b/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html index a31d1879..383ed57a 100644 --- a/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html +++ b/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html @@ -4,14 +4,14 @@ IfcRelationsIndexer | That Open Docs - +
Skip to main content

IfcRelationsIndexer

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

Getting entity relations the easy way ๐Ÿ’ชโ€‹

If you're aware of the IFC schema, you should know that all the possible information an entity have is not directly inside its attributes. For example, the property sets, classifications, materials, etc, of a wall (or any other element) are not directly in the wall attributes ๐Ÿคฏ but in other entities which are related to the wall using relations. Now, that is perfect for an schema like the IFC which aims to store all the building data within a single text file in the easiest way possible. However, is not that easy to work just because you need to find the relations you want to get to the element data you're looking for ๐Ÿ˜ช. Luckily for you, the IfcRelationsIndexer already gives you an easy way to get the entities which are related with your elements thanks to the inverse attributes! ๐Ÿ”ฅ๐Ÿ”ฅ

Loading a model ๐Ÿฆโ€‹

First things first, lets load an IFC model to process its relations.

tip

If you're unsure on the details to load a model, just tool at the IfcLoader tutorial!

const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();
const file = await fetch("/resources/small.ifc");
const buffer = await file.arrayBuffer();
const typedArray = new Uint8Array(buffer);
const model = await ifcLoader.load(typedArray);
world.scene.three.add(model);

Once the model is loaded in memory, you just need to get an instance of the IfcRelationsIndexer and process the model... it's as easy as that! ๐Ÿ˜Ž

const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);

The result of that is basically a map where the keys are the expressIDs and the values are other expressIDs related to the first one and grouped by the type of relation. You don't need to worry too much about the details of that, as the usage is pretty straighforward ๐Ÿ”. The only thing that matters is you've now an easy way to access the entities related to your element ๐Ÿ™‚

Getting element psets ๐Ÿ“„โ€‹

One of the most important relations between different entities is the IfcRelDefinesByProperties. That relation links together an arbitrary entity with a set of IfcPropertySet entities that applies properties. Getting them with the IfcRelationsIndexer once the model is indexed is pretty easy:

const psets = indexer.getEntityRelations(model, 6518, "IsDefinedBy");
if (psets) {
  for (const expressID of psets) {
    // You can get the pset attributes like this
    const pset = await model.getProperties(expressID);
    console.log(pset);
    // You can get the pset props like this or iterate over pset.HasProperties yourself
    await OBC.IfcPropertiesUtils.getPsetProps(
      model,
      expressID,
      async (propExpressID) => {
        const prop = await model.getProperties(propExpressID);
        console.log(prop);
      },
    );
  }
}
tip

IsDefinedBy is the inverse attribute name in the IFC Schema that holds the relations with property sets ๐Ÿ˜‰

Awesome! really easy right?

Exporting the indexationโ€‹

In bigger models, the process to calculate the relations index may take some time. The important thing is that there is no reason to calculate over and over the relations index every time you load a model. If the model hasn't change, their properties shouldn't neither! So, let's download the relations index to load it later.

const downloadJSON = (json: string, name: string) => {
  const file = new File([json], name);
  const a = document.createElement("a");
  a.href = URL.createObjectURL(file);
  a.download = file.name;
  a.click();
  URL.revokeObjectURL(a.href);
};

const json = indexer.serializeModelRelations(model);
console.log(json);
tip

As @thatopen/components can be used in either NodeJS and Browser environments, the logic to generate a JSON file may vary!

Now, in case you've loaded several models and want to get all the computed relations, there is also a handy method to do it.

const allRelationsJSON = indexer.serializeAllRelations();

Loading back the relations indexโ€‹

What do we gain with having a pre-processed relations index if we can't use it again, right? Well, let's use the downloaded relations index ๐Ÿ˜Ž

// Lets first delete the existing model relations
delete indexer.relationMaps[model.uuid];
const relationsIndexFile = await fetch("/resources/small-relations.json");
const relationsIndex = indexer.getRelationsMapFromJSON(
  await relationsIndexFile.text(),
);
indexer.setRelationMap(model, relationsIndex);

Great! Now try to get again the property sets and you will see everything working nice and neat. In fact, lets try to get the building storey of one element in the IFC ๐Ÿ‘‡

const buildingStorey = indexer.getEntityRelations(
  model,
  6518,
  "ContainedInStructure",
);

if (buildingStorey && buildingStorey[0]) {
  const storey = await model.getProperties(buildingStorey[0]);
  console.log(storey);
}
tip

Despite there are some relations that corresponds to only one element (e.g., an element can only have one associated building storey) the getEntityRelations will always return an array. That's the reason we take the first buildingStorey relation despite it will always be the only one.

Congratulations! Now you know how to get an easy way to get the relations of your model. Keep going with more tutorials! ๐Ÿ’ช

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/MiniMap/index.html b/build/Tutorials/Components/Core/MiniMap/index.html index 42afbc63..369fd064 100644 --- a/build/Tutorials/Components/Core/MiniMap/index.html +++ b/build/Tutorials/Components/Core/MiniMap/index.html @@ -4,14 +4,14 @@ MiniMap | That Open Docs - +
Skip to main content

MiniMap

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐Ÿ—บ๏ธ Orientating your user in the sceneโ€‹

In this tutorial you'll learn how to use the Minimap, which is a small 2D representation of the 3D world.

Do you mean a floorplans?

Not quite. The minimap is a simple 2D representation of the 3D world. It is useful to help your user understand where they are, and to have a simple top view of their surrounding.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as THREE from "three";
import * as OBC from "@thatopen/components";

๐ŸŒŽ 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.

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

world.scene.setup();

components.init();

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

world.camera.controls.setLookAt(1, 2, -2, -2, 0, -5);

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐Ÿ  Loading a modelโ€‹

Now that we have a scene, let's load a model. We will use the Fragment Manager for it.

Showing Fragments in the Scene

๐Ÿ”๏ธ There is a dedicated tutorial on how to use Fragment Manager to load IFC files, check it out if you haven't already!

const fragments = new OBC.FragmentsManager(components);

const file = await fetch(
  "https://thatopen.github.io/engine_components/resources/small.frag",
);
const dataBlob = await file.arrayBuffer();
const buffer = new Uint8Array(dataBlob);
const model = fragments.load(buffer);
world.scene.three.add(model);

๐Ÿ—บ Setting up the mapโ€‹

Now, that we have our setup ready. Let's start with the exciting stuff. We will use MiniMap component, which does all the work for us.๐Ÿ”ฎ

const maps = new OBC.MiniMaps(components);
const map = maps.create(world);

We have already created a simple DIV element with id minimap in our HTML file. We need to fetch it to add the canvas where our minimap is rendered to it. We'll also add a rounded border to make it look better.

const mapContainer = document.getElementById("minimap") as HTMLDivElement;
const canvas = map.renderer.domElement;
canvas.style.borderRadius = "12px";
mapContainer.append(canvas);
map.resize();

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐Ÿงฉ Adding some UIโ€‹

We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

BUI.Manager.init();

we'll also need a reference to the size of the minimap to control it:

const mapSize = map.getSize();

Now we will create a new panel with some inputs to control the different parameters of the MiniMap, like zoom, size and front offset. For more information about the UI library, you can check the specific documentation for it!

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel label="Minimap Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
      
        <bim-checkbox checked="true" label="Enabled" 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            map.enabled = target.value;
          }}">  
        </bim-checkbox>
        
        <bim-checkbox checked label="Lock rotation" 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            map.lockRotation = target.value;
          }}">  
        </bim-checkbox>
      
        <bim-color-input 
          label="Background Color" color="#202932" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            world.scene.three.background = new THREE.Color(target.color);
          }}">
        </bim-color-input>
        
        
        <bim-number-input 
          slider label="Zoom" value="${map.zoom}" min="0.01" max="0.5" step="0.01" 
          @change="${({ target }: { target: BUI.NumberInput }) => {
            map.zoom = target.value;
          }}">
        </bim-number-input>
        
        <bim-number-input 
          slider label="Front offset" value="${map.frontOffset}" min="0" max="5" step="1" 
          @change="${({ target }: { target: BUI.NumberInput }) => {
            map.frontOffset = target.value;
          }}">
        </bim-number-input>
                
        <div style="display: flex; gap: 12px">
        
          <bim-number-input slider value="${mapSize.x}" pref="Size X" min="100" max="500" step="10"              
            @change="${({ target }: { target: BUI.NumberInput }) => {
              const size = map.getSize();
              size.x = target.value;
              map.resize(size);
            }}">
          </bim-number-input>        
        
          <bim-number-input slider value="${mapSize.y}" pref="Size Y" min="100" max="500" step="10"            
            @change="${({ target }: { target: BUI.NumberInput }) => {
              const size = map.getSize();
              size.y = target.value;
              map.resize(size);
            }}">
          </bim-number-input>
        </div>
  
        
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

๐ŸŽ‰ Wrap upโ€‹

That's it! You have created a simple app that loads a BIM model and displays a MiniMap of it. You can play around with the different parameters of the MiniMap and see how it changes in real time.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html b/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html index 258b27d3..699b66c4 100644 --- a/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html +++ b/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html @@ -4,13 +4,13 @@ OrthoPerspectiveCamera | That Open Docs - +
Skip to main content

OrthoPerspectiveCamera

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐Ÿ“น How to handle a fancy cameraโ€‹

Sometimes, you need perspective for depth and realism. Other times, you need an orthographic camera to get precise measurements and proportions. Luckily for you, we have a camera that has both of those projections at the same time! It also has some cool functionality for navigation. In this tutorial, you'll learn to use it.

Orthographic and Perspective cameras

The difference between Orthographic and Perspective cameras is that Orthographic cameras don't see things smaller when they are further away. This has some implications, like the camera being always "outside" of your scene. You can't see the interior of a room with an orthographic camera. The most common use for orthographic cameras are 2D floor plans and sections, but they can also be used to create cool-looking 3D scenes.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
import Stats from "stats.js";
import * as THREE from "three";
import * as BUI from "@thatopen/ui";
import * as OBC from "@thatopen/components";

๐ŸŒŽ Setting up the world AND the cameraโ€‹

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. But there's one difference: we will use the OrthoPerspectiveCamera for initializing the world.

const container = document.getElementById("container")!;
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.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);

world.scene.setup();

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

components.init();

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

Easy, right? Believe it or not, this is all you need to use the OrthoPerspectiveCamera. Now, let's see it in action!

๐ŸงŠ Creating a cubeโ€‹

We will start by creating a simple cube and a grid that will serve as a reference point for our camera.

const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0.5, 0);

world.scene.three.add(cube);
world.meshes.add(cube);

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

๐ŸŽŸ๏ธ Using camera eventsโ€‹

The OrthoPerspectiveCamera has a few events that you can use to manage the your scene. We will use the camera.projection.onChanged event to update the grid, so that when using the Orthographic camera, the grid will fade out if the camera zooms away a lot.

world.camera.projection.onChanged.add(() => {
  const projection = world.camera.projection.current;
  grid.fade = projection === "Perspective";
});

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐Ÿงฉ Building a camera UIโ€‹

Now we will use @thatopen/ui to create a simple UI for the OrthoPerspectiveCamera. It will have 4 elements:

๐ŸŽ›๏ธ Navigation modeโ€‹

This will control the navigation mode of the OrthoPerspectiveCamera. It will have 3 options:

  • Orbit: for 3D orbiting around the scene.
  • FirstPerson: for navigating the scene in with the mouse wheel in first person.
  • Plan: for navigating 2d plans (blocking the orbit).

๐Ÿ“ Projectionsโ€‹

Like its name implies, the OrthoPerspectiveCamera has 2 projections, and it's really easy to toggle between them. The camera position will remain the same, which is really convenient when you switch between different projections!

โŒ Toggling user inputโ€‹

Sometimes you might want to remove control from the user. For example, imagine you are animating the camera and you don't want the user to move the camera around. You can use the setUserInput method to toggle this.

๐Ÿ”Ž Focusing objectsโ€‹

The OrthoPerspectiveCamera has a fit method that will fit the camera to a list of meshes. This is really useful when you want to bring attention to a specific part of the scene, or for allowing your user to navigate the scene by focusing objects.

BUI.Manager.init();

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Orthoperspective Camera Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
         
          <bim-dropdown required label="Navigation mode" 
            @change="${({ target }: { target: BUI.Dropdown }) => {
              const selected = target.value[0] as OBC.NavModeID;

              const { current } = world.camera.projection;
              const isOrtho = current === "Orthographic";
              const isFirstPerson = selected === "FirstPerson";
              if (isOrtho && isFirstPerson) {
                alert("First person is not compatible with ortho!");
                target.value[0] = world.camera.mode.id;
                return;
              }
              world.camera.set(selected);
            }}">

          <bim-option checked label="Orbit"></bim-option>
          <bim-option label="FirstPerson"></bim-option>
          <bim-option label="Plan"></bim-option>
        </bim-dropdown>
         
      
        <bim-dropdown required label="Camera projection" 
            @change="${({ target }: { target: BUI.Dropdown }) => {
              const selected = target.value[0] as OBC.CameraProjection;
              const isOrtho = selected === "Orthographic";
              const isFirstPerson = world.camera.mode.id === "FirstPerson";
              if (isOrtho && isFirstPerson) {
                alert("First person is not compatible with ortho!");
                target.value[0] = world.camera.projection.current;
                return;
              }
              world.camera.projection.set(selected);
            }}">
          <bim-option checked label="Perspective"></bim-option>
          <bim-option label="Orthographic"></bim-option>
        </bim-dropdown>

        <bim-checkbox 
          label="Allow user input" checked 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            world.camera.setUserInput(target.checked);
          }}">  
        </bim-checkbox>  
        
        <bim-button 
          label="Fit cube" 
          @click="${() => {
            world.camera.fit([cube]);
          }}">  
        </bim-button>  

      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

๐ŸŽ‰ Wrap upโ€‹

That's it! We have created an OrthoPerspective camera that can be used to navigate a 3D scene with multiple projections and navigation modes, as well as a neat UI to control it. Great job!

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Raycasters/index.html b/build/Tutorials/Components/Core/Raycasters/index.html index 1bdd3217..2181f39c 100644 --- a/build/Tutorials/Components/Core/Raycasters/index.html +++ b/build/Tutorials/Components/Core/Raycasters/index.html @@ -4,13 +4,13 @@ Raycasters | That Open Docs - +
Skip to main content

Raycasters

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐Ÿ Picking things with the mouseโ€‹

In this tutorial you'll learn how to use the Raycaster to pick objects in the scene with the mouse.

What's ray casting?

Ray casting is the process of casting a ray from a point in space to another point in space. We will cast a ray from the mouse position to the 3D world and check if there is an object in its way. That way, when you hover or click on an object, we can know which one it is and do something with it.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • Stats.js (optional) to measure the performance of our app.
import * as THREE from "three";
import Stats from "stats.js";
import * as OBC from "@thatopen/components";

๐ŸŒŽ 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.

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

world.camera.controls.setLookAt(10, 10, 10, 0, 0, 0);

world.scene.setup();

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐ŸงŠ Adding some cubes to the sceneโ€‹

Now we will add some cubes to the scene and create some materials. The idea for this app is simple: when you click on a cube, it will change its color to green.

const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const greenMaterial = new THREE.MeshStandardMaterial({ color: "#BCF124" });

const boxGeometry = new THREE.BoxGeometry(3, 3, 3);

const cube1 = new THREE.Mesh(boxGeometry, cubeMaterial);
const cube2 = new THREE.Mesh(boxGeometry, cubeMaterial);
const cube3 = new THREE.Mesh(boxGeometry, cubeMaterial);
world.scene.three.add(cube1, cube2, cube3);
const cubes = [cube1, cube2, cube3];

cube2.position.x = 5;
cube3.position.x = -5;

To make this more interesting, we will add a rotation to the cubes. We can do it by subscribing to the onBeforeUpdate event of the world, which fires 60 times per second.

const oneDegree = Math.PI / 180;

function rotateCubes() {
  cube1.rotation.x += oneDegree;
  cube1.rotation.y += oneDegree;
  cube2.rotation.x += oneDegree;
  cube2.rotation.z += oneDegree;
  cube3.rotation.y += oneDegree;
  cube3.rotation.z += oneDegree;
}

world.renderer.onBeforeUpdate.add(rotateCubes);

โšก Setting up the raycasterโ€‹

Next, we will set up the raycaster. We will use the Raycasters component. Instead of instantiating it, we will get it from the components object, which is usually safer, as all components are meant to be singletons.

const casters = components.get(OBC.Raycasters);

Each raycaster is bound to a specific world. In this case, we will get the raycaster from the world we are using for our scene:

const caster = casters.get(world);

Finally, we will subscribe to the mousemove event of the window. We will use the castRay method of the raycaster to find out if the mouse is over a cube. If it is, we will change its color to green. Otherwise, we will change its color to the original color.

let previousSelection: THREE.Mesh | null = null;

window.onmousemove = () => {
  const result = caster.castRay(cubes);
  if (previousSelection) {
    previousSelection.material = cubeMaterial;
  }
  if (!result || !(result.object instanceof THREE.Mesh)) {
    return;
  }
  result.object.material = greenMaterial;
  previousSelection = result.object;
};

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐ŸŽ‰ Wrap upโ€‹

That's it! We have created a simple app that uses the Raycaster to pick objects in the scene with the mouse. Easy, right? Now you can allow your users to interact with your 3D world.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Worlds/index.html b/build/Tutorials/Components/Core/Worlds/index.html index c1827533..5fb88395 100644 --- a/build/Tutorials/Components/Core/Worlds/index.html +++ b/build/Tutorials/Components/Core/Worlds/index.html @@ -4,13 +4,13 @@ Worlds | That Open Docs - +
Skip to main content

Worlds

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

๐ŸŒŽ Creating our 3D worldโ€‹

In this tutorial you'll learn how to create a simple scene using @thatopen/components.

Hello world!

A world represents a 3D environment in your application. It consists of a scene, a camera and (optionally) a renderer. You can create multiple worlds and show them in multiple viewports at the same time.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
import * as THREE from "three";
import * as BUI from "@thatopen/ui";
import * as OBC from "@thatopen/components";
import Stats from "stats.js";

๐Ÿ–ผ๏ธ Getting the containerโ€‹

Next, we need to tell the library where do we want to render the 3D scene. We have added an DIV element to this HTML page that occupies the whole width and height of the viewport. Let's fetch it by its ID:

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

๐Ÿš€ Creating a components instanceโ€‹

Now we will create a new instance of the Components class. This class is the main entry point of the library. It will be used to register and manage all the components in your application.

Don't forget to dispose it when you are done!

Once you are done with your application, you need to dispose the Components instance to free up the memory. This is a requirement of Three.js, which can't dispose the memory of 3D related elements automatically.

const components = new OBC.Components();

๐ŸŒŽ Setting up the worldโ€‹

Now we are ready to create our first world. We will use the Worlds component to manage all the worlds in your application. Instead of instancing it, we can get it from the Components instance. All components are singleton, so this is always a better way to get them.

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

We can create a new world by calling the create method of the Worlds component. It's a generic method, so we can specify the type of the scene, the camera and the renderer we want to use.

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

Now we can set the scene, the camera and the renderer of the world, and call the init method to start the rendering process.

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

components.init();

We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!

world.scene.three.background = null;

๐Ÿ’„ Adding things to our sceneโ€‹

Now we are ready to start adding some 3D entities to our scene. We will add a simple cube:

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

We could also add some lights, but the SimpleScene class can do that easier for us using its setup method:

world.scene.setup();

Finally, we will make the camera look at the cube:

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

โฑ๏ธ Measuring the performance (optional)โ€‹

We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

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

๐Ÿงฉ Adding some UIโ€‹

We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

BUI.Manager.init();

Now we will create a new panel with some inputs to change the background color of the scene and the intensity of the directional and ambient lights. For more information about the UI library, you can check the specific documentation for it!

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel label="Worlds Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
      
        <bim-color-input 
          label="Background Color" color="#202932" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            world.scene.three.background = new THREE.Color(target.color);
          }}">
        </bim-color-input>
        
        <bim-number-input 
          slider step="0.1" label="Directional lights intensity" value="1.5" min="0.1" max="10"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            for (const child of world.scene.three.children) {
              if (child instanceof THREE.DirectionalLight) {
                child.intensity = target.value;
              }
            }
          }}">
        </bim-number-input>
        
        <bim-number-input 
          slider step="0.1" label="Ambient light intensity" value="1" min="0.1" max="5"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            for (const child of world.scene.three.children) {
              if (child instanceof THREE.AmbientLight) {
                child.intensity = target.value;
              }
            }
          }}">
        </bim-number-input>
        
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

๐ŸŽ‰ Wrap upโ€‹

That's it! You have created your first 3D world and added some UI elements to it. You can now play with the inputs to see how the scene changes.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/AngleMeasurement/index.html b/build/Tutorials/Components/Front/AngleMeasurement/index.html index c6a218b3..496646bc 100644 --- a/build/Tutorials/Components/Front/AngleMeasurement/index.html +++ b/build/Tutorials/Components/Front/AngleMeasurement/index.html @@ -4,7 +4,7 @@ AngleMeasurement | That Open Docs - + @@ -30,7 +30,7 @@ dimensions.deleteAll()

window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    angles.delete();
  }
};

// const mainToolbar = new OBC.Toolbar(components, {
//   name: "Main Toolbar",
//   position: "bottom",
// });
// mainToolbar.addChild(dimensions.uiElement.get("main"));
// components.ui.addToolbar(mainToolbar);

๐ŸŽ›๏ธ Check Toolbar and UIManager tutorial if you have any doubts!

๐Ÿ–Œ๏ธ Adding Stylesโ€‹

Few final things, we need to add styles for the labels which display the measurement information.

style
.ifcjs-dimension-label {
background-color: black;
font-family: sans-serif;
color: white;
padding: 8px;
border-radius: 8px;
pointer-events: all;
transition: background-color 200ms ease-in-out;
}
.ifcjs-dimension-label:hover {
background-color: grey;
}
.ifcjs-dimension-preview {
background-color: #ffffff;
width: 2rem;
height: 2rem;
opacity: 0.3;
padding: 8px;
border-radius: 100%;
}

Congratulations ๐ŸŽ‰ on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using Simple Dimension Component ๐Ÿ“ Let's keep it up and check out another tutorial! ๐ŸŽ“

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/AreaMeasurement/index.html b/build/Tutorials/Components/Front/AreaMeasurement/index.html index 6f19291f..e6775747 100644 --- a/build/Tutorials/Components/Front/AreaMeasurement/index.html +++ b/build/Tutorials/Components/Front/AreaMeasurement/index.html @@ -4,7 +4,7 @@ AreaMeasurement | That Open Docs - + @@ -30,7 +30,7 @@ dimensions.deleteAll()

window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    // WORK IN PROGRESS
    // dimensions.delete();
  }
};

๐ŸŽ›๏ธ Check Toolbar and UIManager tutorial if you have any doubts!

๐Ÿ–Œ๏ธ Adding Stylesโ€‹

Few final things, we need to add styles for the labels which display the measurement information.

style
.ifcjs-dimension-label {
background-color: black;
font-family: sans-serif;
color: white;
padding: 8px;
border-radius: 8px;
pointer-events: all;
transition: background-color 200ms ease-in-out;
}
.ifcjs-dimension-label:hover {
background-color: grey;
}
.ifcjs-dimension-preview {
background-color: #ffffff;
width: 2rem;
height: 2rem;
opacity: 0.3;
padding: 8px;
border-radius: 100%;
}

Congratulations ๐ŸŽ‰ on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using Simple Dimension Component ๐Ÿ“ Let's keep it up and check out another tutorial! ๐ŸŽ“

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/EdgesClipper/index.html b/build/Tutorials/Components/Front/EdgesClipper/index.html index 9f2ff4ed..ff1b14cb 100644 --- a/build/Tutorials/Components/Front/EdgesClipper/index.html +++ b/build/Tutorials/Components/Front/EdgesClipper/index.html @@ -4,7 +4,7 @@ EdgesClipper | That Open Docs - + @@ -29,7 +29,7 @@ clipper.deleteAll()

Great job! ๐ŸŽ‰ Using the Clipper Component, you can now effortlessly check BIM models or any other 3D objects with stunning edges.๐Ÿง Let's keep it up and check out another tutorial! ๐ŸŽ“

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/IfcStreamer/index.html b/build/Tutorials/Components/Front/IfcStreamer/index.html index 02eac2df..628ea010 100644 --- a/build/Tutorials/Components/Front/IfcStreamer/index.html +++ b/build/Tutorials/Components/Front/IfcStreamer/index.html @@ -4,7 +4,7 @@ IfcStreamer | That Open Docs - + @@ -19,7 +19,7 @@ and clear the cache using the clearCache() method:

loader.useCache = true;

async function clearCache() {
  await loader.clearCache();
  window.location.reload();
}

You can also customize the loader through the culler property:

loader.culler.threshold = 10;
loader.culler.maxHiddenTime = 1000;
loader.culler.maxLostTime = 40000;

This is it! Now you should be able to stream your own IFC models and open them anywhere, no matter how big they are! ๐Ÿ’ช We will keep improving and making this API more powerful to handle any model on any device smoothly.

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/LengthMeasurement/index.html b/build/Tutorials/Components/Front/LengthMeasurement/index.html index 201e8a20..4ea5bd14 100644 --- a/build/Tutorials/Components/Front/LengthMeasurement/index.html +++ b/build/Tutorials/Components/Front/LengthMeasurement/index.html @@ -4,7 +4,7 @@ LengthMeasurement | That Open Docs - + @@ -31,7 +31,7 @@ Dimensions can be removed using dimensions.delete(). dimensions.delete() deletes the dimension on which your mouse pointer is now located.

Deleting all the Dimensions

โŽ If you want to safely delete all the dimensions that were created you can simply call dimensions.deleteAll()

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/PostproductionRenderer/index.html b/build/Tutorials/Components/Front/PostproductionRenderer/index.html index 314cb56b..8570d073 100644 --- a/build/Tutorials/Components/Front/PostproductionRenderer/index.html +++ b/build/Tutorials/Components/Front/PostproductionRenderer/index.html @@ -4,7 +4,7 @@ PostproductionRenderer | That Open Docs - + @@ -16,7 +16,7 @@ Also, we will enable the visibility for post-production layer.

const { postproduction } = world.renderer;
postproduction.enabled = true;
postproduction.customEffects.excludedMeshes.push(grid.three);

const ao = postproduction.n8ao.configuration;

BUI.Manager.init();

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel label="Clipper Tutorial" class="options-menu">
    
      <bim-panel-section collapsed label="Gamma">
        <bim-checkbox checked label="Gamma Correction"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.setPasses({ gamma: target.value });
          }}">
        </bim-checkbox>
      </bim-panel-section>
      
      <bim-panel-section collapsed label="Custom effects" >
        <bim-checkbox checked label="Custom effects"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.setPasses({ custom: target.value });
          }}">
        </bim-checkbox>    
        
        <bim-checkbox checked label="Gamma Correction"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.customEffects.glossEnabled = target.value;
          }}">
        </bim-checkbox>   
      
        <bim-number-input 
          slider step="0.01" label="Opacity" 
          value="${postproduction.customEffects.opacity}" min="0" max="1"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.opacity = target.value;
          }}">
        </bim-number-input>  
            
        <bim-number-input 
          slider step="0.1" label="Tolerance" 
          value="${postproduction.customEffects.tolerance}" min="0" max="6"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.tolerance = target.value;
          }}">
        </bim-number-input> 
                      
        <bim-color-input label="Line color" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            const color = new THREE.Color(target.value.color);
            postproduction.customEffects.lineColor = color.getHex();
          }}">
        </bim-color-input>  
      
        <bim-number-input 
          slider label="Gloss exponent" step="0.1" 
          value="${postproduction.customEffects.glossExponent}" min="0" max="5"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.glossExponent = target.value;
          }}">
        </bim-number-input>    
           
        <bim-number-input 
          slider label="Max gloss" step="0.05" 
          value="${postproduction.customEffects.maxGloss}" min="-2" max="2"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.maxGloss = target.value;
          }}">
        </bim-number-input>  
                  
        <bim-number-input 
          slider label="Min gloss" step="0.05" 
          value="${postproduction.customEffects.minGloss}" min="-2" max="2"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.minGloss = target.value;
          }}">
        </bim-number-input> 
        
      </bim-panel-section>
      
      <bim-panel-section collapsed label="Ambient Oclussion">
      
        <bim-checkbox label="AO enabled"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.setPasses({ ao: target.value });
          }}">
        </bim-checkbox>  
                
        <bim-checkbox checked label="Half resolution"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            ao.halfRes = target.value;
          }}">
        </bim-checkbox>  
                      
        <bim-checkbox label="Screen space radius"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            ao.screenSpaceRadius = target.value;
          }}">
        </bim-checkbox>
        
                              
        <bim-color-input label="AO color" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            const color = new THREE.Color(target.value.color);
            ao.color.r = color.r;
            ao.color.g = color.g;
            ao.color.b = color.b;
          }}">
        </bim-color-input>     
        
        <bim-number-input 
          slider label="AO Samples" step="1" 
          value="${ao.aoSamples}" min="1" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.aoSamples = target.value;
          }}">
        </bim-number-input>    
            
        <bim-number-input 
          slider label="Denoise Samples" step="1" 
          value="${ao.denoiseSamples}" min="1" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.denoiseSamples = target.value;
          }}">
        </bim-number-input>   
                  
        <bim-number-input 
          slider label="Denoise Radius" step="1" 
          value="${ao.denoiseRadius}" min="0" max="100"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.denoiseRadius = target.value;
          }}">
        </bim-number-input>   
                       
        <bim-number-input 
          slider label="AO Radius" step="1" 
          value="${ao.aoRadius}" min="0" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.aoRadius = target.value;
          }}">
        </bim-number-input>  
                              
        <bim-number-input 
          slider label="Distance falloff" step="1" 
          value="${ao.distanceFalloff}" min="0" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.distanceFalloff = target.value;
          }}">
        </bim-number-input> 
                                      
        <bim-number-input 
          slider label="Intensity" step="1" 
          value="${ao.intensity}" min="0" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.intensity = target.value;
          }}">
        </bim-number-input> 
        
      </bim-panel-section>
      
    </bim-panel>
    `;
});

document.body.append(panel);

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

Congratulations ๐ŸŽ‰ on completing this tutorial! Now you know how to add cool effects easily using Post Production ๐Ÿ–ผ๏ธ Let's keep it up and check out another tutorial! ๐ŸŽ“

- + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/ShadowDropper/index.html b/build/Tutorials/Components/Front/ShadowDropper/index.html index 80dc334d..291e80d6 100644 --- a/build/Tutorials/Components/Front/ShadowDropper/index.html +++ b/build/Tutorials/Components/Front/ShadowDropper/index.html @@ -4,7 +4,7 @@ ShadowDropper | That Open Docs - + @@ -26,7 +26,7 @@ Now you can add shadows to BIM Models or any 3D Object in minutes using Shadow Dropper ๐ŸŒ— Let's keep it up and check out another tutorial! ๐ŸŽ“

- + \ No newline at end of file diff --git a/build/Tutorials/Components/index.html b/build/Tutorials/Components/index.html index 685ab3ea..2de89b51 100644 --- a/build/Tutorials/Components/index.html +++ b/build/Tutorials/Components/index.html @@ -4,7 +4,7 @@ Components | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

Components

TOC|documentation|demo|community|npm package

cover

Open BIM Components

NPM Package NPM Package Tests

This library is a collection of BIM tools based on Three.js and other libraries. It includes pre-made features to easily build browser-based 3D BIM applications, such as postproduction, dimensions, floorplan navigation, DXF export and much more.

Packagesโ€‹

This library contains 2 packages:

@thatopen/components - The core functionality. Compatible both with browser and Node.js environments.

@thatopen/components-front - Features exclusive for browser environments.

Usageโ€‹

You need to be familiar with Three.js API to be able to use this library effectively. In the following example, we will create a cube in a 3D scene that can be navigated with the mouse or touch events. You can see the full example here and the deployed app here.

/* 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);
- + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Component/index.html b/build/Tutorials/UserInterface/Core/Component/index.html index d878dd99..abb01ed8 100644 --- a/build/Tutorials/UserInterface/Core/Component/index.html +++ b/build/Tutorials/UserInterface/Core/Component/index.html @@ -4,7 +4,7 @@ Component | That Open Docs - + @@ -13,7 +13,7 @@ The UIComponent class has a static method to create functional components (UI defined as a function) that can be updated anytime. The method is UIComponent.create.

note

Despite the UIComponent is a class that can be instantiated or extended, from a developer perspective using the library is most likely it will only use the create method.

Creating an stateless componentโ€‹

To start learning how to create custom components, let's create a custom component that uses the panel section:

const statelessPanelSection = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel-section label="Stateless Panel Section">
      <bim-color-input label="Color"></bim-color-input>
    </bim-panel-section>
  `;
});
danger

Remember to first call UIManager.init() before anything else!

UIComponent.create requires you to provide a function declaration that returns an HTML string made with the html tag function, and the result of the function is the HTMLElement it self.

note

Tag functions are special declarations that are always set before a template literals to process the string.

Did you notice the component is named statelessPanelSection? Well, the reason is because components can have an optional state. Technically speaking, that makes the create method to have two overloads: one for components with state (statefull) and another for components without state (stateless). The main difference is that statefull components lets you update them with new states (so the UI component will efficiently re-render and display new data) while stateless components never needs to be updated as they are static. The component we just created is stateless, because it doesn't have any state in which its data depends on.

Creating a statefull componentโ€‹

Now, let's take a look at how to create a component that can be updated based on state changes:

interface PanelSectionUIState {
  label: string;
  counter: number;
}

const [statefullPanelSection, updateStatefullPanelSection] =
  BUI.Component.create<BUI.PanelSection, PanelSectionUIState>(
    (state: PanelSectionUIState) => {
      const { label, counter } = state;
      const msg = `This panel section has been updated ${counter} ${counter === 1 ? "time" : "times"}`;
      return BUI.html`
      <bim-panel-section label=${label}>
        <bim-label label=${msg}></bim-label>
      </bim-panel-section>
    `;
    },
    { label: "Statefull Panel Section", counter: 0 },
  );

When you pass an object as the argument in your create function, the component has now become statefull. As you see, there are a couple of differences between the stateless and statefull components:

  1. The statefull component requires an state object (it must be an object) to be passed in the function declaration. Think on this as the classic properties object you pass to a component in a framework like React.
  2. When the component is statefull, UIComponent.create must have a second argument to specify the initial state of the component.
  3. Now, UIComponent.create does not return the HTMLElement it self, but an array where the first item is the HTMLElement and second is a function to update the component based on an updated state. Think on this as when you use the useState hook in frameworks like React.
    note

    As for now, a statefull component can't update itself! However, you can nest other components that updates the state of some other.

Nesting componentsโ€‹

Now, in order to see the two components in action, let's create a third component to integrate (nest) the two previous:

const panel = BUI.Component.create<BUI.Panel>(() => {
  let counter = 0;
  const onUpdateBtnClick = () => {
    counter++;
    if (counter >= 5) {
      updateStatefullPanelSection({
        label: "Powered Statefull Panel Section ๐Ÿ’ช",
        counter,
      });
    } else {
      updateStatefullPanelSection({ counter });
    }
  };

  return BUI.html`
    <bim-panel label="My Panel">
      <bim-panel-section label="Update Functions">
        <bim-button @click=${onUpdateBtnClick} label="Update Statefull Section"></bim-button>
      </bim-panel-section>
      ${statelessPanelSection}
      ${statefullPanelSection}
    </bim-panel>
  `;
});

As you see, the create function doesn't need to immediately return the HTML, but you can also do any other logic you want inside. In this case, the logic adds a listener to bim-button in order to update the state of the statefullPanelSection we created earlier. A couple of things to notice here:

  1. You're not forced to update the whole component state, but just the things you need. In this case, we just updated the panel section label in case the counter is greater than or equals to 5. However, in this case the counter is always updated.
  2. Despite we updated the component inside the logic of the panel, you can update your statefull components from anywhere in your code by just using the update function.
  3. You can nest any component in any other: statefull in stateless, stateless in stateless, etc. In this case, panel is a stateless component, but it has an statefull component inside. That means contents of a stateless component can be updated but because that content is a statefull component.
  4. You see how we integrated the two previous components into the panel? Yes, its as easy as adding them as an expression (${statelessPanelSection} and ${statefullPanelSection} in this case).
    tip

    In order to know the syntax you can write inside the template literal tagged by the html function, look at the lit-html documentation.

    Finally, you can add your panel component anywhere you want as its an HTMLElement just like any other!
document.body.append(panel);

Congratulations! You already know how to create your own custom reactive components. Don't stop learning! Take a look at more tutorials in the documentation ๐Ÿ™‚.

tip

The complementary packages of the library such as @thatopen/ui-components-obc or @thatopen/ui-components-three have premade functional components just like the ones we've learned to create in this tutorial, so you don't need to bother to create them by yourself ๐Ÿ˜‰

- + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html b/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html index 7042e568..0e3934f7 100644 --- a/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html +++ b/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html @@ -4,7 +4,7 @@ ClassificationsTree | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

ClassificationsTree

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

Displaying elements grouping ๐Ÿ“ฆโ€‹

One of the greatest things we can make using BIM models is to group elements based on their properties. This has many use cases! Like grouping elements to check their collisions ๐Ÿ’ฅ, grouping elements based on their construction activities ๐Ÿ”จ, or grouping fininshed elements during the construction phase โœ…. Other than grouping the elements, the next most important thing is to show them to your user in an easy way... well, here is where it comes the ClassificationsTree functional component!

Creating the classifications treeโ€‹

First things first, let's create an instance of the functional component, like this:

const [classificationsTree, updateClassificationsTree] =
  CUI.tables.classificationTree({
    components,
    classifications: {},
  });

Now that we have the classifications tree created, let's tell the FragmentsManager that each time a model is loaded it needs to classify the model based on some conditions, but more importantly is that right after those classifications are made it needs to update the classifications tree!

const classifier = components.get(OBC.Classifier);

fragmentsManager.onFragmentsLoaded.add(async (model) => {
  // This creates a classification system named "entities"
  classifier.byEntity(model);

  // This creates a classification system named "predefinedTypes"
  await classifier.byPredefinedType(model);

  const classifications = {
    Entities: ["entities", "predefinedTypes"],
    "Predefined Types": ["predefinedTypes"],
  };

  updateClassificationsTree({ classifications });
});

The classifications value is just an object where they keys are the names in the tree, and the values are the orders in which you want to group the elements. So, for example, "Entities" groups the elements based on their entities and then based on their predefined types. Needless to say, the classifications need to be computed before they can be used on the tree. You can check the system names from classifier.list. Great! As we already told the UI when it needs to update, let's add the classifications tree to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button ๐Ÿ‘‡

const panel = BUI.Component.create(() => {
  const [loadIfcBtn] = CUI.buttons.loadIfc({ components });

  return BUI.html`
   <bim-panel label="Classifications Tree">
    <bim-panel-section label="Importing">
      ${loadIfcBtn}
    </bim-panel-section>
    <bim-panel-section label="Classifications">
      ${classificationsTree}
    </bim-panel-section>
   </bim-panel> 
  `;
});

Finally, let's append the BIM Panel to the page to see the classifications tree working ๐Ÿ˜‰

const app = document.createElement("bim-grid");
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 your model classifications. ๐Ÿฅณ

- + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ElementProperties/index.html b/build/Tutorials/UserInterface/OBC/ElementProperties/index.html index ba25d006..39b05eed 100644 --- a/build/Tutorials/UserInterface/OBC/ElementProperties/index.html +++ b/build/Tutorials/UserInterface/OBC/ElementProperties/index.html @@ -4,13 +4,13 @@ ElementProperties | That Open Docs - +
Skip to main content

ElementProperties

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

Displaying data the simplest way ๐Ÿ”ฅ๐Ÿ”ฅโ€‹

What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!

Loading a model and computing it's relationsโ€‹

First things first... let's load a model ๐Ÿ‘‡

const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();
const file = await fetch("/resources/small.ifc");
const buffer = await file.arrayBuffer();
const typedArray = new Uint8Array(buffer);
const model = await ifcLoader.load(typedArray);
world.scene.three.add(model);
tip

You don't need to add the model into the scene to display its properties. However, as we are going to display the properties for each selected element, then having the model into the scene is obvious, right?

Now, in order to get the most out of the properties table, you need to calculate the relations index of your model. To do it, you will need to use the IfcRelationsIndexer component from @thatopen/components to speed up the process.

const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);

Once the relations are processed, the Element Properties component has everything it needs in order to display the properties in a cool way ๐Ÿ˜Ž.

Creating the properties tableโ€‹

Let's create an instance of the functional component, like this:

const [propertiesTable, updatePropertiesTable] = CUI.tables.elementProperties({
  components,
  fragmentIdMap: {},
});

propertiesTable.preserveStructureOnFilter = true;
propertiesTable.indentationInText = false;
tip

The elementProperties functional component is a simplified version that shows any model entity data. However, if you like a more complete properties table, use the entityAttributes component.

Cool! properties table created. Then after, let's tell the properties table to update each time the user makes a selection over the model. For it, we will use the highlighter from @thatopen/components-front:

const highlighter = components.get(OBF.Highlighter);
highlighter.setup({ world });

highlighter.events.select.onHighlight.add((fragmentIdMap) => {
  updatePropertiesTable({ fragmentIdMap });
});

highlighter.events.select.onClear.add(() =>
  updatePropertiesTable({ fragmentIdMap: {} }),
);

Creating a panel to append the tableโ€‹

Allright! Let's now create a BIM Panel to control some aspects of the properties table and to trigger some functionalities like expanding the rows children and copying the values to TSV, so you can paste your element values inside a spreadsheet application ๐Ÿ˜‰

const propertiesPanel = BUI.Component.create(() => {
  const onTextInput = (e: Event) => {
    const input = e.target as BUI.TextInput;
    propertiesTable.queryString = input.value !== "" ? input.value : null;
  };

  const expandTable = (e: Event) => {
    const button = e.target as BUI.Button;
    propertiesTable.expanded = !propertiesTable.expanded;
    button.label = propertiesTable.expanded ? "Collapse" : "Expand";
  };

  const copyAsTSV = async () => {
    await navigator.clipboard.writeText(propertiesTable.tsv);
  };

  return BUI.html`
    <bim-panel label="Properties">
      <bim-panel-section label="Element Data">
        <div style="display: flex; gap: 0.5rem;">
          <bim-button @click=${expandTable} label=${propertiesTable.expanded ? "Collapse" : "Expand"}></bim-button> 
          <bim-button @click=${copyAsTSV} label="Copy as TSV"></bim-button> 
        </div> 
        <bim-text-input @input=${onTextInput} placeholder="Search Property"></bim-text-input>
        ${propertiesTable}
      </bim-panel-section>
    </bim-panel>
  `;
});

Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything.

const app = document.createElement("bim-grid");
app.layouts = {
  main: {
    template: `
    "propertiesPanel viewport"
    /25rem 1fr
    `,
    elements: { propertiesPanel, viewport },
  },
};

app.layout = "main";
document.body.append(app);

Congratulations! You have now created a fully working properties table for your app in less than 5 minutes of work. Keep going with more tutorials! ๐Ÿ’ช

- + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html b/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html index 4cfb2835..935032f4 100644 --- a/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html +++ b/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html @@ -4,13 +4,13 @@ EntityAttributes | That Open Docs - +
Skip to main content

EntityAttributes

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

Displaying data the advanced way ๐Ÿ”ฅ๐Ÿ”ฅโ€‹

What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!

Loading a model and computing it's relationsโ€‹

First things first... let's load a model ๐Ÿ‘‡

import * as WEBIFC from "web-ifc";
import * as BUI from "@thatopen/ui";
import * as OBC from "@thatopen/components";
import * as OBF from "@thatopen/components-front";
import * as CUI from "../..";

BUI.Manager.init();

const components = new OBC.Components();

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

const world = worlds.create();
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;
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);
tip

You don't need to add the model into the scene to display its properties. However, as we are going to display the attributes for each selected element, then having the model into the scene is obvious, right?

Now, in order to get the most out of the entities table, you need to calculate the relations index of your model. To do it, you will need to use the IfcRelationsIndexer component from @thatopen/components to speed up the process.

const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();
const file = await fetch("/resources/small.ifc");
const buffer = await file.arrayBuffer();
const typedArray = new Uint8Array(buffer);
const model = await ifcLoader.load(typedArray);
world.scene.three.add(model);

Preconfiguring the tableโ€‹

The attributes table has some optional configurations. One of them is the ability to modify the styles of the cell value based on the attribute value (e.g., colorizing entities with a specific string in its name, or numeric values based on a codition ). For it, let's first create a simple base style that all our cell overwrites will share:

const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);

Then, let's create an object where the keys are the attribute values you want to overwrite its styles, and the values are functions that returns an html template result.

tip

If you want to learn more about the html template tag and how to use it, just take a look at the tutorial on how to make a custom component.

const baseStyle: Record<string, string> = {
  padding: "0.25rem",
  borderRadius: "0.25rem",
};

Keep in mind the step above is optional! Not needed for the table to work. Now its time to create the table using the predefine functional component that ships with the library ๐Ÿ™‚

const tableDefinition: BUI.TableDefinition = {
  Entity: (entity) => {
    let style = {};
    if (entity === OBC.IfcCategoryMap[WEBIFC.IFCPROPERTYSET]) {
      style = {
        ...baseStyle,
        backgroundColor: "purple",
        color: "white",
      };
    }
    if (String(entity).includes("IFCWALL")) {
      style = {
        ...baseStyle,
        backgroundColor: "green",
        color: "white",
      };
    }
    return BUI.html`<bim-label label=${entity} style=${BUI.styleMap(style)}></bim-label>`;
  },
  PredefinedType: (type) => {
    const colors = ["#1c8d83", "#3c1c8d", "#386c19", "#837c24"];
    const randomIndex = Math.floor(Math.random() * colors.length);
    const backgroundColor = colors[randomIndex];
    const style = { ...baseStyle, backgroundColor, color: "white" };
    return BUI.html`<bim-label label=${type} style=${BUI.styleMap(style)}></bim-label>`;
  },
  NominalValue: (value) => {
    let style = {};
    if (typeof value === "boolean" && value === false) {
      style = { ...baseStyle, backgroundColor: "#b13535", color: "white" };
    }
    if (typeof value === "boolean" && value === true) {
      style = { ...baseStyle, backgroundColor: "#18882c", color: "white" };
    }
    return BUI.html`<bim-label label=${value} style=${BUI.styleMap(style)}></bim-label>`;
  },
};

Cool! attributes table created. Then after, let's tell the attributes table to update each time the user makes a selection over the model. For it, we will use the Highlighter:

const [attributesTable, updateAttributesTable] = CUI.tables.entityAttributes({
  components,
  fragmentIdMap: {},
  tableDefinition,
  attributesToInclude: () => {
    const attributes: any[] = [
      "Name",
      "ContainedInStructure",
      "HasProperties",
      "HasPropertySets",
      (name: string) => name.includes("Value"),
      (name: string) => name.startsWith("Material"),
      (name: string) => name.startsWith("Relating"),
      (name: string) => {
        const ignore = ["IsGroupedBy", "IsDecomposedBy"];
        return name.startsWith("Is") && !ignore.includes(name);
      },
    ];
    return attributes;
  },
});

attributesTable.expanded = true;
attributesTable.indentationInText = true;
attributesTable.preserveStructureOnFilter = true;

Creating a panel to append the tableโ€‹

Allright! Let's now create a BIM Panel to control some aspects of the attributes table and to trigger some functionalities like copying the values to TSV or exporing the data to JSON ๐Ÿ˜‰

const highlighter = components.get(OBF.Highlighter);
highlighter.setup({ world });

highlighter.events.select.onHighlight.add((fragmentIdMap) => {
  updateAttributesTable({ fragmentIdMap });
});

highlighter.events.select.onClear.add(() =>
  updateAttributesTable({ fragmentIdMap: {} }),
);

Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything.

const entityAttributesPanel = BUI.Component.create(() => {
  const onSearchInput = (e: Event) => {
    const input = e.target as BUI.TextInput;
    attributesTable.queryString = input.value;
  };

  const onPreserveStructureChange = (e: Event) => {
    const checkbox = e.target as BUI.Checkbox;
    attributesTable.preserveStructureOnFilter = checkbox.checked;
  };

  const onExportJSON = () => {
    attributesTable.downloadData("entities-attributes");
  };

  const onCopyTSV = async () => {
    await navigator.clipboard.writeText(attributesTable.tsv);
    alert(
      "Table data copied as TSV in clipboard! Try to paste it in a spreadsheet app.",
    );
  };

  const onAttributesChange = (e: Event) => {
    const dropdown = e.target as BUI.Dropdown;
    updateAttributesTable({
      attributesToInclude: () => {
        const attributes: any[] = [
          ...dropdown.value,
          (name: string) => name.includes("Value"),
          (name: string) => name.startsWith("Material"),
          (name: string) => name.startsWith("Relating"),
          (name: string) => {
            const ignore = ["IsGroupedBy", "IsDecomposedBy"];
            return name.startsWith("Is") && !ignore.includes(name);
          },
        ];
        return attributes;
      },
    });
  };

  return BUI.html`
    <bim-panel>
      <bim-panel-section label="Entity Attributes" fixed>
        <div style="display: flex; gap: 0.5rem; justify-content: space-between;">
          <div style="display: flex; gap: 0.5rem;">
            <bim-text-input @input=${onSearchInput} type="search" placeholder="Search" debounce="250"></bim-text-input>
            <bim-checkbox @change=${onPreserveStructureChange} label="Preserve Structure" inverted checked></bim-checkbox>
          </div>
          <div style="display: flex; gap: 0.5rem;">
            <bim-dropdown @change=${onAttributesChange} multiple>
              <bim-option label="Name" checked></bim-option> 
              <bim-option label="ContainedInStructure" checked></bim-option>
              <bim-option label="ForLayerSet"></bim-option>
              <bim-option label="LayerThickness"></bim-option>
              <bim-option label="HasProperties" checked></bim-option>
              <bim-option label="HasAssociations"></bim-option>
              <bim-option label="HasAssignments"></bim-option>
              <bim-option label="HasPropertySets" checked></bim-option>
              <bim-option label="PredefinedType"></bim-option>
              <bim-option label="Quantities"></bim-option>
              <bim-option label="ReferencedSource"></bim-option>
              <bim-option label="Identification"></bim-option>
              <bim-option label="Prefix"></bim-option>
              <bim-option label="LongName"></bim-option>
            </bim-dropdown>
            <bim-button @click=${onCopyTSV} icon="solar:copy-bold" tooltip-title="Copy TSV" tooltip-text="Copy the table contents as tab separated text values, so you can copy them into a spreadsheet."></bim-button>
            <bim-button @click=${onExportJSON} icon="ph:export-fill" tooltip-title="Export JSON" tooltip-text="Download the table contents as a JSON file."></bim-button>
          </div>
        </div>
        ${attributesTable}
      </bim-panel-section>
    </bim-panel>
  `;
});

Congratulations! You have now created a fully working advanced attributes table for your app in less than 10 minutes of work. Keep going with more tutorials! ๐Ÿ’ช

const app = document.createElement("bim-grid");
app.layouts = {
  main: {
    template: `
      "viewport" 1fr
      "entityAttributesPanel" 1fr
    `,
    elements: { entityAttributesPanel, viewport },
  },
};

app.layout = "main";
document.body.append(app);
- + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ModelsList/index.html b/build/Tutorials/UserInterface/OBC/ModelsList/index.html index aae1f470..85fe31cf 100644 --- a/build/Tutorials/UserInterface/OBC/ModelsList/index.html +++ b/build/Tutorials/UserInterface/OBC/ModelsList/index.html @@ -4,13 +4,13 @@ ModelsList | That Open Docs - +
Skip to main content

ModelsList

Source

Copying and pasting? We've got you covered! You can find the full source code of this tutorial here.

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!

Setting up the componentsโ€‹

First of all, we're going to get the FragmentIfcLoader from an existing components instance:

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: 

const fragmentsManager = components.get(OBC.FragmentsManager);
fragmentsManager.onFragmentsLoaded.add((model) => {
  if (world.scene) world.scene.three.add(model);
});

Creating the models list componentโ€‹

Allright! Now that some basic events are setup, it's time to create a new fresh models list component:

const [modelsList] = CUI.tables.modelsList({ components });

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 ๐Ÿ‘‡

const panel = BUI.Component.create(() => {
  const [loadIfcBtn] = CUI.buttons.loadIfc({ components });

  return BUI.html`
   <bim-panel label="IFC Models">
    <bim-panel-section label="Importing">
      ${loadIfcBtn}
    </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 ๐Ÿ˜‰

const app = document.createElement("bim-grid");
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 ๐Ÿฅณ

- + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/index.html b/build/Tutorials/UserInterface/index.html index 0dbbabbb..762e94fb 100644 --- a/build/Tutorials/UserInterface/index.html +++ b/build/Tutorials/UserInterface/index.html @@ -4,7 +4,7 @@ UserInterface | That Open Docs - + @@ -13,7 +13,7 @@ All the implementation libraries need @thatopen/ui to be installed along with the respective packages they are giving UIs to. See the respective package.json files in each repository.

Why a monorepo? ๐Ÿคทโ€โ™€๏ธโ€‹

Easy, because we care about your final app bundle size. You see, the repositories that contains implementations of the UIComponents for different libraries, relies on the libraries to be installed in the project because they're required as peerDependencies. So, if we included all the pre-built UIComponents from @thatopen/ui-obc in the core library, you will always need to have @thatopen/components and @thatopen/components-front installed in your project even tough you're not using it.


Does these components works in my favorite framework? ๐Ÿค”โ€‹

Well... yes! You name it, React? Angular? Vue? Svelte? The answer is absolutely yes. Basically, you can use these componentes anywhere HTML is accepted. If you're wondering how is that possible, is becase we're using Web Components ๐Ÿ”ฅ

If you're new to Web Components, no worries! Simply put, Web Components is a browser API that let's you define your own HTML tags (DOM Elements) to be used in the document. They define the look and behavior of the elements. Have you ever seen an HTML that looks something like this?

<div>
  <unknown-tag />
</div>

As you may recall from your HTML knowledge, <unkown-tag /> is not somethings built-in in HTML... well, that's because is a Web Component! So the developer created it's own tag to use it in the document.

Web Components are extremely powerfull because they do mostly the same as the components you create in any framework, just they are framework agnostic and feel way more built-in. In other words, if you create a component in your framework you're not allowed to write the following directly in your HTML file:

<my-framework-component />

You always need to rely on your framework tools in order to render your component, so you must use JavaScript. However, if you create a Web Component you can use it in your HTML with nothing else needed.


[!IMPORTANT] Despite Web Components is a browser API, we used Lit to create the components as it makes the process way much easier. Also, we recommend checking your favorite framework documentation to implement web components, some of them needs a pretty basic setup to get up and running.

Getting Startedโ€‹

To use the UIComponents, you need to install at least the core library from your terminal like this:

npm i @thatopen/ui

Then, you need to tell the library to register the components, so you can use them in any HTML syntax. To do it, in your entry JavaScript file execute the following:

import { UIManager } from "@thatopen/ui"

UIManager.init()

Finally, in your HTML file you can start to use the components! 

<bim-grid id="grid">
  <bim-toolbars-container style="grid-area: header">
    <bim-toolbar label="Toolbar A" active>
      <bim-toolbar-section label="Build">
        <bim-button vertical label="My Button" icon="solar:bookmark-square-minimalistic-bold"></bim-button>
        <bim-toolbar-group>
          <bim-button icon="solar:album-bold"></bim-button>
          <bim-button icon="solar:archive-linear"></bim-button>
          <bim-button icon="solar:battery-charge-minimalistic-broken"></bim-button>
          <bim-button icon="solar:bluetooth-square-outline"></bim-button>
        </bim-toolbar-group>
      </bim-toolbar-section>
    </bim-toolbar>
    <bim-toolbar label="Toolbar B">
      <bim-toolbar-section label="Section">
        <bim-button vertical label="Button A" icon="bx:command"></bim-button>
        <bim-button vertical label="Button B" icon="bx:fast-forward-circle"></bim-button>
        <bim-button vertical label="Button C" icon="bx:support"></bim-button>
      </bim-toolbar-section>
    </bim-toolbar>
  </bim-toolbars-container>
  <div id="my-panel" style="grid-area: sidebar; background-color: var(--bim-ui_bg-base)">
    <bim-panel label="Panel A">
      <bim-panel-section label="Build">
        <bim-text-input label="Tool Name" value="BCFManager"></bim-text-input>
        <bim-input label="Position" vertical>
          <bim-number-input pref="X" min="1" value="10" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="20" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="30" max="50" suffix="m" slider></bim-number-input>
        </bim-input>
        <bim-dropdown label="IFC Entity">
          <bim-option label="IFCWALL"></bim-option>
          <bim-option label="IFCWINDOW"></bim-option>
          <bim-option label="IFCSLAB"></bim-option>
        </bim-dropdown>
      </bim-panel-section>
    </bim-panel>
  </div>
</bim-grid>

[!TIP] You can get any icon from Iconify!

And, in your JavaScript file:

const grid = document.getElementById("grid")

grid.layouts = {
  main: `
    "header header" auto
    "sidebar content" 1fr
    "sidebar content" 1fr
    / auto 1fr
  `
}

grid.setLayout("main")

To know more about the UIComponents, you can explore the README files in each repository under the packages folder and also explore the documentation. You can find the link at the top of this README file.

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.AsyncEvent/index.html b/build/api/classes/thatopen_components.AsyncEvent/index.html index e7ef7afe..e823341c 100644 --- a/build/api/classes/thatopen_components.AsyncEvent/index.html +++ b/build/api/classes/thatopen_components.AsyncEvent/index.html @@ -4,7 +4,7 @@ Class: AsyncEvent<T> | That Open Docs - + @@ -14,7 +14,7 @@ Keep in mind that:

Type parametersโ€‹

Name
T

Methodsโ€‹

addโ€‹

โ–ธ add(handler): void

Add a callback to this event instance.

Parametersโ€‹

NameTypeDescription
handlerT extends void ? () => Promise<void> : (data: T) => Promise<void>the callback to be added to this event.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/async-event.ts:15

removeโ€‹

โ–ธ remove(handler): void

Removes a callback from this event instance.

Parametersโ€‹

NameTypeDescription
handlerT extends void ? () => Promise<void> : (data: T) => Promise<void>the callback to be removed from this event.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/async-event.ts:27

resetโ€‹

โ–ธ reset(): void

Gets rid of all the suscribed events.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/async-event.ts:44

triggerโ€‹

โ–ธ trigger(data?): Promise<void>

Triggers all the callbacks assigned to this event.

Parametersโ€‹

NameType
data?T

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/core/src/core/Types/src/async-event.ts:36

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Base/index.html b/build/api/classes/thatopen_components.Base/index.html index a1fe8eeb..39f01e2a 100644 --- a/build/api/classes/thatopen_components.Base/index.html +++ b/build/api/classes/thatopen_components.Base/index.html @@ -4,13 +4,13 @@ Class: Base | That Open Docs - +
Skip to main content

Class: Base

@thatopen/components.Base

Base class of the library. Useful for finding out the interfaces it implements.

Hierarchyโ€‹

Methodsโ€‹

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.BaseWorldItem/index.html b/build/api/classes/thatopen_components.BaseWorldItem/index.html index c3663cf4..b41dc3ce 100644 --- a/build/api/classes/thatopen_components.BaseWorldItem/index.html +++ b/build/api/classes/thatopen_components.BaseWorldItem/index.html @@ -4,14 +4,14 @@ Class: BaseWorldItem | That Open Docs - +
Skip to main content

Class: BaseWorldItem

@thatopen/components.BaseWorldItem

One of the elements that make a world. It can be either a scene, a camera or a renderer.

Hierarchyโ€‹

  • Base

    โ†ณ BaseWorldItem

Methodsโ€‹

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Base.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Base.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Base.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Base.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Base.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.BoundingBoxer/index.html b/build/api/classes/thatopen_components.BoundingBoxer/index.html index f7fbf595..2fc76f47 100644 --- a/build/api/classes/thatopen_components.BoundingBoxer/index.html +++ b/build/api/classes/thatopen_components.BoundingBoxer/index.html @@ -4,14 +4,14 @@ Class: BoundingBoxer | That Open Docs - +
Skip to main content

Class: BoundingBoxer

@thatopen/components.BoundingBoxer

A simple implementation of bounding box that works for fragments. The resulting bbox is not 100% precise, but it's fast, and should suffice for general use cases such as camera zooming or general boundary determination.

Hierarchyโ€‹

Implementsโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = true

Component.enabled

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/fragments/BoundingBoxer/index.ts:14

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation ofโ€‹

Disposable.onDisposed

Defined inโ€‹

packages/core/src/fragments/BoundingBoxer/index.ts:17

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

Disposable.dispose

Defined inโ€‹

packages/core/src/fragments/BoundingBoxer/index.ts:68

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Component.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Component.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Component.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Component.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Component.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Clipper/index.html b/build/api/classes/thatopen_components.Clipper/index.html index 54855ab5..675141a8 100644 --- a/build/api/classes/thatopen_components.Clipper/index.html +++ b/build/api/classes/thatopen_components.Clipper/index.html @@ -4,7 +4,7 @@ Class: Clipper | That Open Docs - + @@ -18,7 +18,7 @@ will be forced to be orthogonal to the Y direction. orthogonalY has to be true for this to apply.

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:66

Accessorsโ€‹

enabledโ€‹

โ€ข get enabled(): boolean

Component.enabled

Returnsโ€‹

boolean

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:85

โ€ข set enabled(state): void

Component.enabled

Parametersโ€‹

NameType
stateboolean

Returnsโ€‹

void

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:90

materialโ€‹

โ€ข get material(): MeshBasicMaterial

The material of the clipping plane representation.

Returnsโ€‹

MeshBasicMaterial

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:112

โ€ข set material(material): void

The material of the clipping plane representation.

Parametersโ€‹

NameType
materialMeshBasicMaterial

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:117

sizeโ€‹

โ€ข get size(): number

The size of the geometric representation of the clippings planes.

Returnsโ€‹

number

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:125

โ€ข set size(size): void

The size of the geometric representation of the clippings planes.

Parametersโ€‹

NameType
sizenumber

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:130

visibleโ€‹

โ€ข get visible(): boolean

Hideable.visible

Returnsโ€‹

boolean

Implementation ofโ€‹

Hideable.visible

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:99

โ€ข set visible(state): void

Hideable.visible

Parametersโ€‹

NameType
stateboolean

Returnsโ€‹

void

Implementation ofโ€‹

Hideable.visible

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:104

Methodsโ€‹

createโ€‹

โ–ธ create(world): void

Createable.create

Parametersโ€‹

NameType
worldWorld

Returnsโ€‹

void

Implementation ofโ€‹

Createable.create

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:163

createFromNormalAndCoplanarPointโ€‹

โ–ธ createFromNormalAndCoplanarPoint(world, normal, point): SimplePlane

Creates a plane in a certain place and with a certain orientation, without the need of the mouse.

Parametersโ€‹

NameTypeDescription
worldWorldthe world where this plane should be created.
normalVector3the orientation of the clipping plane.
pointVector3the position of the clipping plane. navigation.

Returnsโ€‹

SimplePlane

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:184

deleteโ€‹

โ–ธ delete(world, plane?): void

Createable.delete

Parametersโ€‹

NameTypeDescription
worldWorldthe world where the plane to delete is.
plane?SimplePlanethe plane to delete. If undefined, the first plane found under the cursor will be deleted.

Returnsโ€‹

void

Implementation ofโ€‹

Createable.delete

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:201

deleteAllโ€‹

โ–ธ deleteAll(): void

Deletes all the existing clipping planes.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:213

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

Disposable.dispose

Defined inโ€‹

packages/core/src/core/Clipper/index.ts:143

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Component.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Component.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Component.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Component.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Component.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Component/index.html b/build/api/classes/thatopen_components.Component/index.html index ddd79a44..0156c9d8 100644 --- a/build/api/classes/thatopen_components.Component/index.html +++ b/build/api/classes/thatopen_components.Component/index.html @@ -4,7 +4,7 @@ Class: Component | That Open Docs - + @@ -18,7 +18,7 @@ on the type of component. E.g. a disabled dimension tool will stop creating dimensions, while a disabled camera will stop moving. A disabled component will not be updated automatically each frame.

Defined inโ€‹

packages/core/src/core/Types/src/component.ts:19

Methodsโ€‹

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Base.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Base.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Base.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Base.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Base.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Components/index.html b/build/api/classes/thatopen_components.Components/index.html index 1db52206..346be0b6 100644 --- a/build/api/classes/thatopen_components.Components/index.html +++ b/build/api/classes/thatopen_components.Components/index.html @@ -4,7 +4,7 @@ Class: Components | That Open Docs - + @@ -20,7 +20,7 @@ initializing the scene, the renderer and the camera. Additionally, if any component that need a raycaster is used, the raycaster will need to be initialized.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Components/index.ts:70

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.CullerRenderer/index.html b/build/api/classes/thatopen_components.CullerRenderer/index.html index 9edf24af..7f864ab1 100644 --- a/build/api/classes/thatopen_components.CullerRenderer/index.html +++ b/build/api/classes/thatopen_components.CullerRenderer/index.html @@ -4,7 +4,7 @@ Class: CullerRenderer | That Open Docs - + @@ -15,7 +15,7 @@ just before but not anymore.

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:25

renderDebugFrameโ€‹

โ€ข renderDebugFrame: boolean = false

Render the internal scene used to determine the object visibility. Used for debugging purposes.

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:40

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:116

updateVisibilityโ€‹

โ–ธ updateVisibility(force?): Promise<void>

The function that the culler uses to reprocess the scene. Generally it's better to call needsUpdate, but you can also call this to force it.

Parametersโ€‹

NameTypeDescription
force?booleanif true, it will refresh the scene even if needsUpdate is not true.

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:135

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Cullers/index.html b/build/api/classes/thatopen_components.Cullers/index.html index 9c55e151..6547d7ac 100644 --- a/build/api/classes/thatopen_components.Cullers/index.html +++ b/build/api/classes/thatopen_components.Cullers/index.html @@ -4,7 +4,7 @@ Class: Cullers | That Open Docs - + @@ -13,7 +13,7 @@ that are not visible to the camera.

Hierarchyโ€‹

Implementsโ€‹

Propertiesโ€‹

listโ€‹

โ€ข list: Map<string, MeshCullerRenderer>

A map of MeshCullerRenderer instances, keyed by their world UUIDs.

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:26

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<unknown>

An event that is triggered when the Cullers component is disposed.

Implementation ofโ€‹

Disposable.onDisposed

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:31

uuidโ€‹

โ–ช Static Readonly uuid: "69f2a50d-c266-44fc-b1bd-fa4d34be89e6"

A unique identifier for the Cullers component.

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:16

Accessorsโ€‹

enabledโ€‹

โ€ข get enabled(): boolean

Gets the enabled state of the Cullers component.

Returnsโ€‹

boolean

The current enabled state.

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:38

โ€ข set enabled(value): void

Sets the enabled state of the Cullers component. Also sets the enabled state of all MeshCullerRenderer instances.

Parametersโ€‹

NameTypeDescription
valuebooleanThe new enabled state.

Returnsโ€‹

void

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:48

Methodsโ€‹

createโ€‹

โ–ธ create(world, config?): MeshCullerRenderer

Creates a new MeshCullerRenderer for the given world. If a MeshCullerRenderer already exists for the world, it will return the existing one.

Parametersโ€‹

NameTypeDescription
worldWorldThe world for which to create the MeshCullerRenderer.
config?Partial<CullerRendererSettings>Optional configuration settings for the MeshCullerRenderer.

Returnsโ€‹

MeshCullerRenderer

The newly created or existing MeshCullerRenderer for the given world.

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:69

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

Disposable.dispose

Defined inโ€‹

packages/core/src/core/Cullers/index.ts:87

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Component.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Component.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Component.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Component.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Component.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Disposer/index.html b/build/api/classes/thatopen_components.Disposer/index.html index 1d49f765..5a6cbd6c 100644 --- a/build/api/classes/thatopen_components.Disposer/index.html +++ b/build/api/classes/thatopen_components.Disposer/index.html @@ -4,7 +4,7 @@ Class: Disposer | That Open Docs - + @@ -13,7 +13,7 @@ prevent memory leaks.

Hierarchyโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = true

Component.enabled

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/core/Disposer/index.ts:13

Methodsโ€‹

destroyโ€‹

โ–ธ destroy(object, materials?, recursive?): void

Removes a mesh, its geometry and its materials from memory. If you are using any of these in other parts of the application, make sure that you remove them from the mesh before disposing it.

Parametersโ€‹

NameTypeDefault valueDescription
objectObject3D<Object3DEventMap>undefinedthe object to remove.
materialsbooleantruewhether to dispose the materials of the mesh.
recursivebooleantruewhether to recursively dispose the children of the mesh.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Disposer/index.ts:42

disposeGeometryโ€‹

โ–ธ disposeGeometry(geometry): void

Disposes a geometry from memory.

Parametersโ€‹

NameTypeDescription
geometryBufferGeometry<NormalBufferAttributes>the geometry to remove.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Disposer/index.ts:63

getโ€‹

โ–ธ get(): Set<string>

Component.uuid.

Returnsโ€‹

Set<string>

the list of UUIDs of deleted components.

Defined inโ€‹

packages/core/src/core/Disposer/index.ts:26

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Component.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Component.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Component.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Component.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Component.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Event/index.html b/build/api/classes/thatopen_components.Event/index.html index e0e70a8e..b4111dbe 100644 --- a/build/api/classes/thatopen_components.Event/index.html +++ b/build/api/classes/thatopen_components.Event/index.html @@ -4,7 +4,7 @@ Class: Event<T> | That Open Docs - + @@ -14,7 +14,7 @@ Keep in mind that:

Type parametersโ€‹

Name
T

Methodsโ€‹

addโ€‹

โ–ธ add(handler): void

Add a callback to this event instance.

Parametersโ€‹

NameTypeDescription
handlerT extends void ? () => void : (data: T) => voidthe callback to be added to this event.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/event.ts:15

removeโ€‹

โ–ธ remove(handler): void

Removes a callback from this event instance.

Parametersโ€‹

NameTypeDescription
handlerT extends void ? () => void : (data: T) => voidthe callback to be removed from this event.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/event.ts:23

resetโ€‹

โ–ธ reset(): void

Gets rid of all the suscribed events.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/event.ts:36

triggerโ€‹

โ–ธ trigger(data?): void

Triggers all the callbacks assigned to this event.

Parametersโ€‹

NameType
data?T

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/event.ts:28

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.FirstPersonMode/index.html b/build/api/classes/thatopen_components.FirstPersonMode/index.html index 77bda166..faa064e2 100644 --- a/build/api/classes/thatopen_components.FirstPersonMode/index.html +++ b/build/api/classes/thatopen_components.FirstPersonMode/index.html @@ -4,14 +4,14 @@ Class: FirstPersonMode | That Open Docs - +
Skip to main content

Class: FirstPersonMode

@thatopen/components.FirstPersonMode

A NavigationMode that allows first person navigation, simulating FPS video games.

Implementsโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = false

NavigationMode.enabled

Implementation ofโ€‹

NavigationMode.enabled

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:12

idโ€‹

โ€ข Readonly id: "FirstPerson"

NavigationMode.id

Implementation ofโ€‹

NavigationMode.id

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:15

Methodsโ€‹

setโ€‹

โ–ธ set(active): void

NavigationMode.set

Parametersโ€‹

NameType
activeboolean

Returnsโ€‹

void

Implementation ofโ€‹

NavigationMode.set

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:20

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.FragmentsManager/index.html b/build/api/classes/thatopen_components.FragmentsManager/index.html index ac3458e7..750629a9 100644 --- a/build/api/classes/thatopen_components.FragmentsManager/index.html +++ b/build/api/classes/thatopen_components.FragmentsManager/index.html @@ -4,14 +4,14 @@ Class: FragmentsManager | That Open Docs - +
Skip to main content

Class: FragmentsManager

@thatopen/components.FragmentsManager

Object that can efficiently load binary files that contain fragment geometry.

Hierarchyโ€‹

Implementsโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = true

Component.enabled

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:31

listโ€‹

โ€ข Readonly list: Map<string, Fragment>

All the created fragments.

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:26

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation ofโ€‹

Disposable.onDisposed

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:16

Accessorsโ€‹

meshesโ€‹

โ€ข get meshes(): Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

The list of meshes of the created fragments.

Returnsโ€‹

Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:38

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

Disposable.dispose

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:52

exportโ€‹

โ–ธ export(group): Uint8Array

Export the specified fragments.

Parametersโ€‹

NameTypeDescription
groupFragmentsGroupthe fragments group to be exported.

Returnsโ€‹

Uint8Array

the exported data as binary buffer.

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:129

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Component.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Component.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Component.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Component.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Component.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

loadโ€‹

โ–ธ load(data, config?): FragmentsGroup

Loads a binar file that contain fragment geometry.

Parametersโ€‹

NameTypeDescription
dataUint8ArrayThe binary data to load.
config?Partial<{ coordinate: boolean ; properties: IfcProperties ; relationsMap: RelationsMap }>Optional configuration for loading.

Returnsโ€‹

FragmentsGroup

The loaded FragmentsGroup.

Defined inโ€‹

packages/core/src/fragments/FragmentsManager/index.ts:89

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.IfcJsonExporter/index.html b/build/api/classes/thatopen_components.IfcJsonExporter/index.html index 90b80895..c1431cad 100644 --- a/build/api/classes/thatopen_components.IfcJsonExporter/index.html +++ b/build/api/classes/thatopen_components.IfcJsonExporter/index.html @@ -4,13 +4,13 @@ Class: IfcJsonExporter | That Open Docs - +
Skip to main content

Class: IfcJsonExporter

@thatopen/components.IfcJsonExporter

Object to export all the properties from an IFC to a JS object.

Hierarchyโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = true

Component.enabled

Overridesโ€‹

Component.enabled

Defined inโ€‹

packages/core/src/ifc/IfcJsonExporter/index.ts:13

Methodsโ€‹

exportโ€‹

โ–ธ export(webIfc, modelID, indirect?, recursiveSpatial?): Promise<IfcProperties>

Exports all the properties of an IFC into an array of JS objects.

Parametersโ€‹

NameTypeDefault valueDescription
webIfcIfcAPIundefinedThe instance of [web-ifc][https://github.com/ThatOpen/engine_web-ifc](https://github.com/ThatOpen/engine_web-ifc) to use.
modelIDnumberundefinedID of the IFC model whose properties to extract.
indirectbooleanfalsewhether to get the indirect relationships as well.
recursiveSpatialbooleantruewhether to get the properties of spatial items recursively to make the location data available (e.g. absolute position of building).

Returnsโ€‹

Promise<IfcProperties>

Defined inโ€‹

packages/core/src/ifc/IfcJsonExporter/index.ts:28

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

Component.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

Component.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

Component.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

Component.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

Component.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html b/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html index af31cb2b..6123bdc6 100644 --- a/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html +++ b/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html @@ -4,7 +4,7 @@ Class: IfcRelationsIndexer | That Open Docs - + @@ -48,7 +48,7 @@ This method iterates through the relations in the given map, organizing them into a structured object where each key is an expressID of an entity, and its value is another object mapping relation indices to arrays of related entity expressIDs. The resulting object is then serialized into a JSON string.

Parametersโ€‹

NameTypeDescription
relationMapRelationsMapThe map of relations to be serialized. The map keys are expressIDs of entities, and the values are maps where each key is a relation type ID and its value is an array of expressIDs of entities related through that relation type.

Returnsโ€‹

string

A JSON string representing the serialized relations of the given relation map.

Defined inโ€‹

packages/core/src/ifc/IfcRelationsIndexer/index.ts:259

setRelationMapโ€‹

โ–ธ setRelationMap(model, relationMap): void

Adds a relation map to the model's relations map.

Parametersโ€‹

NameTypeDescription
modelFragmentsGroupThe FragmentsGroup model to which the relation map will be added.
relationMapRelationsMapThe RelationsMap to be added to the model's relations map.

Returnsโ€‹

void

Fires

onRelationsIndexed - Triggers an event with the model's UUID and the added relation map.

Defined inโ€‹

packages/core/src/ifc/IfcRelationsIndexer/index.ts:95

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.IfcStreamingSettings/index.html b/build/api/classes/thatopen_components.IfcStreamingSettings/index.html index 496979b7..2fef828c 100644 --- a/build/api/classes/thatopen_components.IfcStreamingSettings/index.html +++ b/build/api/classes/thatopen_components.IfcStreamingSettings/index.html @@ -4,14 +4,14 @@ Class: IfcStreamingSettings | That Open Docs - +
Skip to main content

Class: IfcStreamingSettings

@thatopen/components.IfcStreamingSettings

Configuration of the IFC-fragment streaming.

Hierarchyโ€‹

  • IfcFragmentSettings

    โ†ณ IfcStreamingSettings

Propertiesโ€‹

coordinateโ€‹

โ€ข coordinate: boolean = true

Whether to use the coordination data coming from the IFC files.

Inherited fromโ€‹

IfcFragmentSettings.coordinate

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:15

excludedCategoriesโ€‹

โ€ข excludedCategories: Set<number>

List of categories that won't be converted to fragments.

Inherited fromโ€‹

IfcFragmentSettings.excludedCategories

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:29

includePropertiesโ€‹

โ€ข includeProperties: boolean = true

Whether to extract the IFC properties into a JSON.

Inherited fromโ€‹

IfcFragmentSettings.includeProperties

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:6

optionalCategoriesโ€‹

โ€ข optionalCategories: number[]

Generate the geometry for categories that are not included by default, like IFCSPACE.

Inherited fromโ€‹

IfcFragmentSettings.optionalCategories

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:12

saveLocationsโ€‹

โ€ข saveLocations: boolean = false

Whether to save the absolute location of all IFC items.

Inherited fromโ€‹

IfcFragmentSettings.saveLocations

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:32

wasmโ€‹

โ€ข wasm: Object

Path of the WASM for web-ifc.

Type declarationโ€‹

NameType
absoluteboolean
logLevel?LogLevel
pathstring

Inherited fromโ€‹

IfcFragmentSettings.wasm

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:18

webIfcโ€‹

โ€ข webIfc: LoaderSettings

Loader settings for web-ifc.

Inherited fromโ€‹

IfcFragmentSettings.webIfc

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:35

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.MeshCullerRenderer/index.html b/build/api/classes/thatopen_components.MeshCullerRenderer/index.html index 5f08484d..d0785579 100644 --- a/build/api/classes/thatopen_components.MeshCullerRenderer/index.html +++ b/build/api/classes/thatopen_components.MeshCullerRenderer/index.html @@ -4,7 +4,7 @@ Class: MeshCullerRenderer | That Open Docs - + @@ -13,7 +13,7 @@ You can bind this to the camera movement, to a certain interval, etc.

Inherited fromโ€‹

CullerRenderer.needsUpdate

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:34

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<string>

Disposable.onDisposed

Inherited fromโ€‹

CullerRenderer.onDisposed

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:18

renderDebugFrameโ€‹

โ€ข renderDebugFrame: boolean = false

Render the internal scene used to determine the object visibility. Used for debugging purposes.

Inherited fromโ€‹

CullerRenderer.renderDebugFrame

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:40

Methodsโ€‹

updateVisibilityโ€‹

โ–ธ updateVisibility(force?): Promise<void>

The function that the culler uses to reprocess the scene. Generally it's better to call needsUpdate, but you can also call this to force it.

Parametersโ€‹

NameTypeDescription
force?booleanif true, it will refresh the scene even if needsUpdate is not true.

Returnsโ€‹

Promise<void>

Inherited fromโ€‹

CullerRenderer.updateVisibility

Defined inโ€‹

packages/core/src/core/Cullers/src/culler-renderer.ts:135

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.OrbitMode/index.html b/build/api/classes/thatopen_components.OrbitMode/index.html index 6fd486ff..f2e155c4 100644 --- a/build/api/classes/thatopen_components.OrbitMode/index.html +++ b/build/api/classes/thatopen_components.OrbitMode/index.html @@ -4,14 +4,14 @@ Class: OrbitMode | That Open Docs - +
Skip to main content

Class: OrbitMode

@thatopen/components.OrbitMode

A NavigationMode that allows 3D navigation and panning like in many 3D and CAD softwares.

Implementsโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = true

NavigationMode.enabled

Implementation ofโ€‹

NavigationMode.enabled

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:11

idโ€‹

โ€ข Readonly id: "Orbit"

NavigationMode.id

Implementation ofโ€‹

NavigationMode.id

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:14

Methodsโ€‹

setโ€‹

โ–ธ set(active): void

NavigationMode.set

Parametersโ€‹

NameType
activeboolean

Returnsโ€‹

void

Implementation ofโ€‹

NavigationMode.set

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:21

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html b/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html index d101cf6b..d30e7ae4 100644 --- a/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html +++ b/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html @@ -4,7 +4,7 @@ Class: OrthoPerspectiveCamera | That Open Docs - + @@ -17,7 +17,7 @@ Transforming the camera directly will have no effect: you need to use this object to move, rotate, look at objects, etc.

Returnsโ€‹

CameraControls

Inherited fromโ€‹

SimpleCamera.controls

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:40

enabledโ€‹

โ€ข get enabled(): boolean

Component.enabled

Returnsโ€‹

boolean

Inherited fromโ€‹

SimpleCamera.enabled

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:52

โ€ข set enabled(enabled): void

Component.enabled

Parametersโ€‹

NameType
enabledboolean

Returnsโ€‹

void

Inherited fromโ€‹

SimpleCamera.enabled

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:60

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Overridesโ€‹

SimpleCamera.dispose

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/index.ts:80

fitโ€‹

โ–ธ fit(meshes, offset?): Promise<void>

Make the camera view fit all the specified meshes.

Parametersโ€‹

NameTypeDefault valueDescription
meshesIterable<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>>undefinedthe meshes to fit. If it is not defined, it will evaluate Components.meshes.
offsetnumber1.5the distance to the fit object

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/index.ts:108

hasCameraControlsโ€‹

โ–ธ hasCameraControls(): this is CameraControllable

Whether is instance is CameraControllable.

Returnsโ€‹

this is CameraControllable

Inherited fromโ€‹

SimpleCamera.hasCameraControls

Defined inโ€‹

packages/core/src/core/Types/src/base-camera.ts:13

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

SimpleCamera.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

SimpleCamera.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

SimpleCamera.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

SimpleCamera.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

SimpleCamera.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

setโ€‹

โ–ธ set(mode): void

Sets a new NavigationMode and disables the previous one.

Parametersโ€‹

NameTypeDescription
modeNavModeIDThe NavigationMode to set.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/index.ts:90

setUserInputโ€‹

โ–ธ setUserInput(active): void

Allows or prevents all user input.

Parametersโ€‹

NameTypeDescription
activebooleanwhether to enable or disable user inputs.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/index.ts:142

updateโ€‹

โ–ธ update(_delta): void

Updateable.update

Parametersโ€‹

NameType
_deltanumber

Returnsโ€‹

void

Inherited fromโ€‹

SimpleCamera.update

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:105

updateAspectโ€‹

โ–ธ updateAspect(): void

Updates the aspect of the camera to match the size of the Components.renderer.

Returnsโ€‹

void

Inherited fromโ€‹

SimpleCamera.updateAspect

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:117

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.PlanMode/index.html b/build/api/classes/thatopen_components.PlanMode/index.html index f0c311a9..58d5a900 100644 --- a/build/api/classes/thatopen_components.PlanMode/index.html +++ b/build/api/classes/thatopen_components.PlanMode/index.html @@ -4,14 +4,14 @@ Class: PlanMode | That Open Docs - +
Skip to main content

Class: PlanMode

@thatopen/components.PlanMode

A NavigationMode that allows to navigate floorplans in 2D, like many BIM tools.

Implementsโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean = false

NavigationMode.enabled

Implementation ofโ€‹

NavigationMode.enabled

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:11

idโ€‹

โ€ข Readonly id: "Plan"

NavigationMode.id

Implementation ofโ€‹

NavigationMode.id

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:14

Methodsโ€‹

setโ€‹

โ–ธ set(active): void

NavigationMode.set

Parametersโ€‹

NameType
activeboolean

Returnsโ€‹

void

Implementation ofโ€‹

NavigationMode.set

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:29

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.ProjectionManager/index.html b/build/api/classes/thatopen_components.ProjectionManager/index.html index 8255fe12..b4610f8d 100644 --- a/build/api/classes/thatopen_components.ProjectionManager/index.html +++ b/build/api/classes/thatopen_components.ProjectionManager/index.html @@ -4,14 +4,14 @@ Class: ProjectionManager | That Open Docs - +
Skip to main content

Class: ProjectionManager

@thatopen/components.ProjectionManager

Object to control the CameraProjection of the OrthoPerspectiveCamera.

Propertiesโ€‹

matchOrthoDistanceEnabledโ€‹

โ€ข matchOrthoDistanceEnabled: boolean = false

Match Ortho zoom with Perspective distance when changing projection mode

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:27

onChangedโ€‹

โ€ข Readonly onChanged: Event<PerspectiveCamera | OrthographicCamera>

Event that fires when the CameraProjection changes.

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:14

Methodsโ€‹

setโ€‹

โ–ธ set(projection): Promise<void>

Sets the CameraProjection of the OrthoPerspectiveCamera.

Parametersโ€‹

NameTypeDescription
projectionCameraProjectionthe new projection to set. If it is the current projection, it will have no effect.

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:40

toggleโ€‹

โ–ธ toggle(): Promise<void>

Changes the current CameraProjection from Ortographic to Perspective and vice versa.

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:54

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html b/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html index 065b0ad2..5bb80799 100644 --- a/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html +++ b/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html @@ -4,14 +4,14 @@ Class: PropertiesStreamingSettings | That Open Docs - +
Skip to main content

Class: PropertiesStreamingSettings

@thatopen/components.PropertiesStreamingSettings

Configuration of the IFC-fragment streaming.

Hierarchyโ€‹

  • IfcFragmentSettings

    โ†ณ PropertiesStreamingSettings

Propertiesโ€‹

coordinateโ€‹

โ€ข coordinate: boolean = true

Whether to use the coordination data coming from the IFC files.

Inherited fromโ€‹

IfcFragmentSettings.coordinate

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:15

excludedCategoriesโ€‹

โ€ข excludedCategories: Set<number>

List of categories that won't be converted to fragments.

Inherited fromโ€‹

IfcFragmentSettings.excludedCategories

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:29

includePropertiesโ€‹

โ€ข includeProperties: boolean = true

Whether to extract the IFC properties into a JSON.

Inherited fromโ€‹

IfcFragmentSettings.includeProperties

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:6

optionalCategoriesโ€‹

โ€ข optionalCategories: number[]

Generate the geometry for categories that are not included by default, like IFCSPACE.

Inherited fromโ€‹

IfcFragmentSettings.optionalCategories

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:12

saveLocationsโ€‹

โ€ข saveLocations: boolean = false

Whether to save the absolute location of all IFC items.

Inherited fromโ€‹

IfcFragmentSettings.saveLocations

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:32

wasmโ€‹

โ€ข wasm: Object

Path of the WASM for web-ifc.

Type declarationโ€‹

NameType
absoluteboolean
logLevel?LogLevel
pathstring

Inherited fromโ€‹

IfcFragmentSettings.wasm

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:18

webIfcโ€‹

โ€ข webIfc: LoaderSettings

Loader settings for web-ifc.

Inherited fromโ€‹

IfcFragmentSettings.webIfc

Defined inโ€‹

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:35

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimpleCamera/index.html b/build/api/classes/thatopen_components.SimpleCamera/index.html index 990478de..73f75c87 100644 --- a/build/api/classes/thatopen_components.SimpleCamera/index.html +++ b/build/api/classes/thatopen_components.SimpleCamera/index.html @@ -4,7 +4,7 @@ Class: SimpleCamera | That Open Docs - + @@ -17,7 +17,7 @@ Transforming the camera directly will have no effect: you need to use this object to move, rotate, look at objects, etc.

Returnsโ€‹

CameraControls

Overridesโ€‹

BaseCamera.controls

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:40

enabledโ€‹

โ€ข get enabled(): boolean

Component.enabled

Returnsโ€‹

boolean

Overridesโ€‹

BaseCamera.enabled

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:52

โ€ข set enabled(enabled): void

Component.enabled

Parametersโ€‹

NameType
enabledboolean

Returnsโ€‹

void

Overridesโ€‹

BaseCamera.enabled

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:60

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

Disposable.dispose

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:90

hasCameraControlsโ€‹

โ–ธ hasCameraControls(): this is CameraControllable

Whether is instance is CameraControllable.

Returnsโ€‹

this is CameraControllable

Inherited fromโ€‹

BaseCamera.hasCameraControls

Defined inโ€‹

packages/core/src/core/Types/src/base-camera.ts:13

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

BaseCamera.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

BaseCamera.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

BaseCamera.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

BaseCamera.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

BaseCamera.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

updateโ€‹

โ–ธ update(_delta): void

Updateable.update

Parametersโ€‹

NameType
_deltanumber

Returnsโ€‹

void

Implementation ofโ€‹

Updateable.update

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:105

updateAspectโ€‹

โ–ธ updateAspect(): void

Updates the aspect of the camera to match the size of the Components.renderer.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-camera.ts:117

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimplePlane/index.html b/build/api/classes/thatopen_components.SimplePlane/index.html index 3f29dbe9..4dd70388 100644 --- a/build/api/classes/thatopen_components.SimplePlane/index.html +++ b/build/api/classes/thatopen_components.SimplePlane/index.html @@ -4,13 +4,13 @@ Class: SimplePlane | That Open Docs - +
Skip to main content

Class: SimplePlane

@thatopen/components.SimplePlane

Each of the planes created by SimpleClipper.

Implementsโ€‹

Propertiesโ€‹

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation ofโ€‹

Disposable.onDisposed

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:17

onDraggingEndedโ€‹

โ€ข Readonly onDraggingEnded: Event<unknown>

Event that fires when the user stops dragging a clipping plane.

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:14

onDraggingStartedโ€‹

โ€ข Readonly onDraggingStarted: Event<unknown>

Event that fires when the user starts dragging a clipping plane.

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:11

Accessorsโ€‹

enabledโ€‹

โ€ข set enabled(state): void

Component.enabled

Parametersโ€‹

NameType
stateboolean

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:52

meshesโ€‹

โ€ข get meshes(): Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

The meshes used for raycasting

Returnsโ€‹

Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:74

planeMaterialโ€‹

โ€ข get planeMaterial(): Material | Material[]

The material of the clipping plane representation.

Returnsโ€‹

Material | Material[]

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:79

โ€ข set planeMaterial(material): void

The material of the clipping plane representation.

Parametersโ€‹

NameType
materialMaterial | Material[]

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:84

sizeโ€‹

โ€ข get size(): number

The size of the clipping plane representation.

Returnsโ€‹

number

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:89

โ€ข set size(size): void

Sets the size of the clipping plane representation.

Parametersโ€‹

NameType
sizenumber

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:94

visibleโ€‹

โ€ข get visible(): boolean

Hideable.visible

Returnsโ€‹

boolean

Implementation ofโ€‹

Hideable.visible

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:61

โ€ข set visible(state): void

Hideable.visible

Parametersโ€‹

NameType
stateboolean

Returnsโ€‹

void

Implementation ofโ€‹

Hideable.visible

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:66

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

Disposable.dispose

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:155

updateโ€‹

โ–ธ update(): void

Updateable.update

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Clipper/src/simple-plane.ts:146

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimpleRenderer/index.html b/build/api/classes/thatopen_components.SimpleRenderer/index.html index dca89ec3..1060c733 100644 --- a/build/api/classes/thatopen_components.SimpleRenderer/index.html +++ b/build/api/classes/thatopen_components.SimpleRenderer/index.html @@ -4,7 +4,7 @@ Class: SimpleRenderer | That Open Docs - + @@ -16,7 +16,7 @@ clipping plane to the renderer.

Parametersโ€‹

NameType
activeboolean
planePlane
isLocal?boolean

Returnsโ€‹

void

Inherited fromโ€‹

BaseRenderer.setPlane

Defined inโ€‹

packages/core/src/core/Types/src/base-renderer.ts:57

updateโ€‹

โ–ธ update(): void

Updateable.update

Returnsโ€‹

void

Overridesโ€‹

BaseRenderer.update

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-renderer.ts:61

updateClippingPlanesโ€‹

โ–ธ updateClippingPlanes(): void

Forces the update of the clipping planes and all components that depend on them that are subscribed to onClippingPlanesUpdated.

Returnsโ€‹

void

Inherited fromโ€‹

BaseRenderer.updateClippingPlanes

Defined inโ€‹

packages/core/src/core/Types/src/base-renderer.ts:48

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimpleScene/index.html b/build/api/classes/thatopen_components.SimpleScene/index.html index 63d381bc..2128f847 100644 --- a/build/api/classes/thatopen_components.SimpleScene/index.html +++ b/build/api/classes/thatopen_components.SimpleScene/index.html @@ -4,14 +4,14 @@ Class: SimpleScene | That Open Docs - +
Skip to main content

Class: SimpleScene

@thatopen/components.SimpleScene

A basic 3D scene to add objects hierarchically, and easily dispose them when you are finished with it.

No Inherit Doc

Hierarchyโ€‹

  • BaseScene

    โ†ณ SimpleScene

Implementsโ€‹

Propertiesโ€‹

isSetupโ€‹

โ€ข isSetup: boolean = false

Configurable.isSetup

Implementation ofโ€‹

Configurable.isSetup

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-scene.ts:24

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Inherited fromโ€‹

BaseScene.onDisposed

Defined inโ€‹

packages/core/src/core/Types/src/base-scene.ts:10

onSetupโ€‹

โ€ข Readonly onSetup: Event<SimpleScene>

Configurable.onSetup

Implementation ofโ€‹

Configurable.onSetup

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-scene.ts:29

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Inherited fromโ€‹

BaseScene.dispose

Defined inโ€‹

packages/core/src/core/Types/src/base-scene.ts:19

isConfigurableโ€‹

โ–ธ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returnsโ€‹

this is Configurable<any>

Inherited fromโ€‹

BaseScene.isConfigurable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:39

isDisposeableโ€‹

โ–ธ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returnsโ€‹

this is Disposable

Inherited fromโ€‹

BaseScene.isDisposeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:17

isHideableโ€‹

โ–ธ isHideable(): this is Hideable

Whether is component is Hideable.

Returnsโ€‹

this is Hideable

Inherited fromโ€‹

BaseScene.isHideable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:34

isResizeableโ€‹

โ–ธ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returnsโ€‹

this is Resizeable

Inherited fromโ€‹

BaseScene.isResizeable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:22

isUpdateableโ€‹

โ–ธ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returnsโ€‹

this is Updateable

Inherited fromโ€‹

BaseScene.isUpdateable

Defined inโ€‹

packages/core/src/core/Types/src/base.ts:27

setupโ€‹

โ–ธ setup(config?): void

Creates a simple and nice default set up for the scene (e.g. lighting).

Parametersโ€‹

NameType
config?Partial<SimpleSceneConfig>

Returnsโ€‹

void

Implementation ofโ€‹

Configurable.setup

Defined inโ€‹

packages/core/src/core/Worlds/src/simple-scene.ts:50

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.ClipEdges/index.html b/build/api/classes/thatopen_components_front.ClipEdges/index.html index 5f288be2..2912c2c8 100644 --- a/build/api/classes/thatopen_components_front.ClipEdges/index.html +++ b/build/api/classes/thatopen_components_front.ClipEdges/index.html @@ -4,14 +4,14 @@ Class: ClipEdges | That Open Docs - +
Skip to main content

Class: ClipEdges

@thatopen/components-front.ClipEdges

A more advanced version of SimpleClipper that also supports ClippingEdges with customizable lines.

Hierarchyโ€‹

  • Component

    โ†ณ ClipEdges

Implementsโ€‹

  • Disposable

Propertiesโ€‹

stylesโ€‹

โ€ข styles: EdgesStyles

The list of defined LineStyle instances.

Defined inโ€‹

packages/front/src/core/EdgesClipper/index.ts:19

Methodsโ€‹

updateโ€‹

โ–ธ update(updateFills?): Promise<void>

Updates all the lines of the ClippingEdges.

Parametersโ€‹

NameTypeDefault value
updateFillsbooleanfalse

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/front/src/core/EdgesClipper/index.ts:54

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.EdgesPlane/index.html b/build/api/classes/thatopen_components_front.EdgesPlane/index.html index bf973f2c..e9190d78 100644 --- a/build/api/classes/thatopen_components_front.EdgesPlane/index.html +++ b/build/api/classes/thatopen_components_front.EdgesPlane/index.html @@ -4,7 +4,7 @@ Class: EdgesPlane | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.LengthMeasurement/index.html b/build/api/classes/thatopen_components_front.LengthMeasurement/index.html index a3da324f..9b79b578 100644 --- a/build/api/classes/thatopen_components_front.LengthMeasurement/index.html +++ b/build/api/classes/thatopen_components_front.LengthMeasurement/index.html @@ -4,14 +4,14 @@ Class: LengthMeasurement | That Open Docs - +
Skip to main content

Class: LengthMeasurement

@thatopen/components-front.LengthMeasurement

A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value.

Hierarchyโ€‹

  • Component

    โ†ณ LengthMeasurement

Implementsโ€‹

  • Createable
  • Hideable
  • Disposable
  • Updateable

Propertiesโ€‹

snapDistanceโ€‹

โ€ข snapDistance: number = 0.25

The minimum distance to force the dimension cursor to a vertex.

Defined inโ€‹

packages/front/src/measurement/LengthMeasurement/index.ts:24

Methodsโ€‹

cancelCreationโ€‹

โ–ธ cancelCreation(): void

Cancels the drawing of the current dimension.

Returnsโ€‹

void

Implementation ofโ€‹

OBC.Createable.cancelCreation

Defined inโ€‹

packages/front/src/measurement/LengthMeasurement/index.ts:178

createโ€‹

โ–ธ create(data?): void

Starts or finishes drawing a new dimension line.

Parametersโ€‹

NameTypeDescription
data?anyforces the dimension to be drawn on a plane. Use this if you are drawing dimensions in floor plan navigation.

Returnsโ€‹

void

Implementation ofโ€‹

OBC.Createable.create

Defined inโ€‹

packages/front/src/measurement/LengthMeasurement/index.ts:119

deleteโ€‹

โ–ธ delete(): void

Deletes the dimension that the user is hovering over with the mouse or touch event.

Returnsโ€‹

void

Implementation ofโ€‹

OBC.Createable.delete

Defined inโ€‹

packages/front/src/measurement/LengthMeasurement/index.ts:138

deleteAllโ€‹

โ–ธ deleteAll(): void

Deletes all the dimensions that have been previously created.

Returnsโ€‹

void

Defined inโ€‹

packages/front/src/measurement/LengthMeasurement/index.ts:170

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

OBC.Disposable.dispose

Defined inโ€‹

packages/front/src/measurement/LengthMeasurement/index.ts:93

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.Marker/index.html b/build/api/classes/thatopen_components_front.Marker/index.html index cd1e76e2..c065e473 100644 --- a/build/api/classes/thatopen_components_front.Marker/index.html +++ b/build/api/classes/thatopen_components_front.Marker/index.html @@ -4,7 +4,7 @@ Class: Marker | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

Class: Marker

@thatopen/components-front.Marker

Class for Managing Markers along with creating different types of markers Every marker is a Simple2DMarker For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel

Hierarchyโ€‹

  • Component

    โ†ณ Marker

Implementsโ€‹

  • Disposable
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.Plans/index.html b/build/api/classes/thatopen_components_front.Plans/index.html index e2b0d876..9d6bdac4 100644 --- a/build/api/classes/thatopen_components_front.Plans/index.html +++ b/build/api/classes/thatopen_components_front.Plans/index.html @@ -4,13 +4,13 @@ Class: Plans | That Open Docs - +
Skip to main content

Class: Plans

@thatopen/components-front.Plans

Helper to control the camera and easily define and navigate 2D floor plans.

Hierarchyโ€‹

  • Component

    โ†ณ Plans

Implementsโ€‹

  • Disposable

Propertiesโ€‹

currentPlanโ€‹

โ€ข currentPlan: null | PlanView = null

The floorplan that is currently selected.

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:25

defaultCameraOffsetโ€‹

โ€ข defaultCameraOffset: number = 30

The offset of the 2D camera to the floor plan elevation.

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:31

defaultSectionOffsetโ€‹

โ€ข defaultSectionOffset: number = 1.5

The offset from the clipping planes to their respective floor plan elevation.

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:28

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation ofโ€‹

OBC.Disposable.onDisposed

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:16

Methodsโ€‹

createโ€‹

โ–ธ create(config): void

Creates a new floor plan in the navigator.

Parametersโ€‹

NameTypeDescription
configPlanViewNecessary data to initialize the floor plan.

Returnsโ€‹

void

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:97

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose

Returnsโ€‹

void

Implementation ofโ€‹

OBC.Disposable.dispose

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:48

exitPlanViewโ€‹

โ–ธ exitPlanView(animate?): Promise<void>

Deactivate navigator and go back to the previous view.

Parametersโ€‹

NameTypeDefault valueDescription
animatebooleanfalseWhether to animate the camera transition.

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:141

goToโ€‹

โ–ธ goTo(id, animate?): Promise<void>

Make the navigator go to the specified floor plan.

Parametersโ€‹

NameTypeDefault valueDescription
idstringundefinedFloor plan to go to.
animatebooleanfalseWhether to animate the camera transition.

Returnsโ€‹

Promise<void>

Defined inโ€‹

packages/front/src/fragments/Plans/index.ts:119

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html b/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html index 1e4aac13..cfb92069 100644 --- a/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html +++ b/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html @@ -4,13 +4,13 @@ Class: PostproductionRenderer | That Open Docs - +
Skip to main content

Class: PostproductionRenderer

@thatopen/components-front.PostproductionRenderer

Renderer that uses efficient postproduction effects (e.g. Ambient Occlusion).

Hierarchyโ€‹

Accessorsโ€‹

postproductionโ€‹

โ€ข get postproduction(): Postproduction

Helper object to handle the postproduction effects applied.

Returnsโ€‹

Postproduction

Defined inโ€‹

packages/front/src/core/PostproductionRenderer/index.ts:13

Methodsโ€‹

disposeโ€‹

โ–ธ dispose(): void

Disposable.dispose.

Returnsโ€‹

void

Overridesโ€‹

RendererWith2D.dispose

Defined inโ€‹

packages/front/src/core/PostproductionRenderer/index.ts:67

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.RendererWith2D/index.html b/build/api/classes/thatopen_components_front.RendererWith2D/index.html index cbef0cee..b90ca547 100644 --- a/build/api/classes/thatopen_components_front.RendererWith2D/index.html +++ b/build/api/classes/thatopen_components_front.RendererWith2D/index.html @@ -4,7 +4,7 @@ Class: RendererWith2D | That Open Docs - + @@ -13,7 +13,7 @@ (Objec3Ds and CSS2DObjects respectively).

Hierarchyโ€‹

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_fragments.Serializer/index.html b/build/api/classes/thatopen_fragments.Serializer/index.html index ecc8fa70..e918a0be 100644 --- a/build/api/classes/thatopen_fragments.Serializer/index.html +++ b/build/api/classes/thatopen_fragments.Serializer/index.html @@ -4,14 +4,14 @@ Class: Serializer | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Button/index.html b/build/api/classes/thatopen_ui.Button/index.html index 812d8b18..9f45e959 100644 --- a/build/api/classes/thatopen_ui.Button/index.html +++ b/build/api/classes/thatopen_ui.Button/index.html @@ -4,13 +4,13 @@ Class: Button | That Open Docs - +
Skip to main content

Class: Button

@thatopen/ui.Button

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ Button

Propertiesโ€‹

activeโ€‹

โ€ข active: boolean = false

A boolean attribute which, if present, indicates that the button is active.

Default

false

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:162

disabledโ€‹

โ€ข disabled: boolean = false

A boolean attribute which, if present, indicates that the button is disabled.

Default

false

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:173

iconโ€‹

โ€ข Optional icon: string

The icon to be displayed on the button.

Default

undefined

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:184

labelโ€‹

โ€ข Optional label: string

The label to be displayed on the button.

Default

undefined

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:140

labelHiddenโ€‹

โ€ข labelHidden: boolean = false

A boolean attribute which, if present, indicates that the label should be hidden.

Default

false

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:151

tooltipTextโ€‹

โ€ข Optional tooltipText: string

The text of the tooltip to be displayed when hovering over the button.

Default

undefined

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:242

tooltipTimeโ€‹

โ€ข Optional tooltipTime: number

The time (in milliseconds) to wait before showing the tooltip when hovering over the button.

Default

700

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:207

tooltipTitleโ€‹

โ€ข Optional tooltipTitle: string

The title of the tooltip to be displayed when hovering over the button.

Default

undefined

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:230

tooltipVisibleโ€‹

โ€ข tooltipVisible: boolean = false

A boolean attribute which, if present, indicates that the tooltip should be visible.

Default

false

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:218

verticalโ€‹

โ€ข vertical: boolean = false

A boolean attribute which, if present, indicates that the button should be displayed vertically.

Default

false

Example

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

Example

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

Defined inโ€‹

packages/core/src/components/Button/index.ts:195

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Checkbox/index.html b/build/api/classes/thatopen_ui.Checkbox/index.html index ef7f710e..25625aa9 100644 --- a/build/api/classes/thatopen_ui.Checkbox/index.html +++ b/build/api/classes/thatopen_ui.Checkbox/index.html @@ -4,7 +4,7 @@ Class: Checkbox | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

Class: Checkbox

@thatopen/ui.Checkbox

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ Checkbox

Implementsโ€‹

Propertiesโ€‹

checkedโ€‹

โ€ข checked: boolean = false

Indicates whether the checkbox is checked or not. This property reflects the checked state of the internal \<input> element and can be used to set or get the checkbox's state. Changing this property dynamically updates the checkbox's visual state and its checked attribute.

Default

false

Example

<bim-checkbox checked></bim-checkbox>

Example

const checkbox = document.createElement('bim-checkbox');
checkbox.checked = true;
document.body.appendChild(checkbox);

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:93

iconโ€‹

โ€ข Optional icon: string

Represents the icon associated with the checkbox label. This icon is displayed next to the label text if provided. Changing this property dynamically updates the displayed icon if the label is present. It is used to visually enhance the checkbox by adding an icon.

Default

undefined

Example

<bim-checkbox icon="check"></bim-checkbox>

Example

const checkbox = document.createElement('bim-checkbox');
checkbox.icon = 'check';
document.body.appendChild(checkbox);

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:55

invertedโ€‹

โ€ข inverted: boolean = false

Indicates whether the checkbox is displayed with an inverted disposition.

Default

false

Example

<bim-checkbox inverted></bim-checkbox>

Example

const checkbox = document.createElement('bim-checkbox');
checkbox.inverted = true;
document.body.appendChild(checkbox);

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:106

labelโ€‹

โ€ข Optional label: string

The label text associated with the checkbox. This text is displayed next to the checkbox itself. Changing this property dynamically updates the displayed label. If an icon is also specified, it will be displayed alongside this label.

Default

undefined

Example

<bim-checkbox label="Accept Terms"></bim-checkbox>

Example

const checkbox = document.createElement('bim-checkbox');
checkbox.label = 'Accept Terms';
document.body.appendChild(checkbox);

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:81

nameโ€‹

โ€ข Optional name: string

The name attribute of the checkbox. It can be used to identify the checkbox when submitting a form or to reference the checkbox in JavaScript. Changing this property dynamically updates the name attribute of the internal \<input> element.

Default

undefined

Example

<bim-checkbox name="agreement"></bim-checkbox>

Example

const checkbox = document.createElement('bim-checkbox');
checkbox.name = 'agreement';
document.body.appendChild(checkbox);

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:68

Accessorsโ€‹

valueโ€‹

โ€ข get value(): boolean

A getter that returns the current checked state of the checkbox. This is useful for retrieving the checkbox's value in form submissions or JavaScript interactions as it provides a consistent value property as many other components.

Returnsโ€‹

boolean

Default

false

Example

<script>console.log(document.querySelector('bim-checkbox').value);</script>

Example

const checkbox = document.createElement('bim-checkbox');
document.body.appendChild(checkbox);
console.log(checkbox.value); // false initially

Implementation ofโ€‹

HasValue.value

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:118

Eventsโ€‹

onValueChangeโ€‹

โ€ข Readonly onValueChange: Event

Event that is dispatched when the checkbox's checked state changes. This event can be used to listen for changes to the checkbox's value and perform necessary actions when the value changes.

change

Example

checkbox.addEventListener('change', (event) => {
  console.log('Checkbox value changed:', event.target.checked);
});

Implementation ofโ€‹

HasValue.onValueChange

Defined inโ€‹

packages/core/src/components/Checkbox/index.ts:133

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.ColorInput/index.html b/build/api/classes/thatopen_ui.ColorInput/index.html index 86647df3..147b9381 100644 --- a/build/api/classes/thatopen_ui.ColorInput/index.html +++ b/build/api/classes/thatopen_ui.ColorInput/index.html @@ -4,14 +4,14 @@ Class: ColorInput | That Open Docs - +
Skip to main content

Class: ColorInput

@thatopen/ui.ColorInput

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ ColorInput

Implementsโ€‹

Propertiesโ€‹

colorโ€‹

โ€ข color: string = "#bcf124"

The color value of the color input in hexadecimal format.

Default

#bcf124

Example

<bim-color-input color="#ff0000"></bim-color-input>

Example

const colorInput = document.createElement('bim-color-input');
colorInput.color = '#ff0000';

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:148

iconโ€‹

โ€ข Optional icon: string

The icon for the color input.

Default

undefined

Example

<bim-color-input icon="palette"></bim-color-input>

Example

const colorInput = document.createElement('bim-color-input');
colorInput.icon = 'palette';

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:111

labelโ€‹

โ€ข Optional label: string

The label for the color input.

Default

undefined

Example

<bim-color-input label="Select a color"></bim-color-input>

Example

const colorInput = document.createElement('bim-color-input');
colorInput.label = 'Select a color';

Implementation ofโ€‹

HasName.label

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:98

nameโ€‹

โ€ข Optional name: string

The name of the color input.

Default

undefined

Example

<bim-color-input name="colorInput"></bim-color-input>

Example

const colorInput = document.createElement('bim-color-input');
colorInput.name = 'colorInput';

Implementation ofโ€‹

HasName.name

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:85

opacityโ€‹

โ€ข Optional opacity: number

The opacity of the color input.

Default

undefined

Example

<bim-color-input opacity="0.5"></bim-color-input>

Example

const colorInput = document.createElement('bim-color-input');
colorInput.opacity = 0.5;

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:136

verticalโ€‹

โ€ข vertical: boolean = false

A boolean attribute which, if present, indicates that the color input should be displayed vertically.

Default

false

Example

<bim-color-input vertical></bim-color-input>

Example

const colorInput = document.createElement('bim-color-input');
colorInput.vertical = true;

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:123

Accessorsโ€‹

valueโ€‹

โ€ข set value(_value): void

Represents both the color and opacity values combined into a single object. This is an instance property, not an HTMLElement attribute.

Parametersโ€‹

NameType
_valueObject
_value.colorstring
_value.opacity?number

Returnsโ€‹

void

Example

const colorInput = document.createElement('bim-color-input');
colorInput.value = { color: '#ff0000', opacity: 0.5 };

Implementation ofโ€‹

HasValue.value

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:162

Methodsโ€‹

focusโ€‹

โ–ธ focus(): void

Focuses on the color input by programmatically triggering a click event on the underlying color input element. If the color input element is not available, the function does nothing.

Returnsโ€‹

void

Overridesโ€‹

LitElement.focus

Defined inโ€‹

packages/core/src/components/ColorInput/index.ts:208

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Component/index.html b/build/api/classes/thatopen_ui.Component/index.html index a2247753..2cae0f0e 100644 --- a/build/api/classes/thatopen_ui.Component/index.html +++ b/build/api/classes/thatopen_ui.Component/index.html @@ -4,13 +4,13 @@ Class: Component | That Open Docs - +
Skip to main content

Class: Component

@thatopen/ui.Component

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ Component

    โ†ณโ†ณ Dropdown

Methodsโ€‹

createโ€‹

โ–ธ create<T, S>(template, state): [element: T, update: UpdateFunction<S>]

Creates a new UI component instance based on the provided template and initial state.

Type parametersโ€‹

NameTypeDescription
Textends HTMLElementThe type of the UI component element.
Sextends Record<string, any>The type of the component state.

Parametersโ€‹

NameTypeDescription
templateStatefullComponent<S>The stateful component template function.
stateSThe initial state of the component.

Returnsโ€‹

[element: T, update: UpdateFunction<S>]

An array containing the created UI component element and a function to update its state.

Defined inโ€‹

packages/core/src/core/Component/index.ts:92

โ–ธ create<T>(template): T

Creates a new UI component instance based on the provided template and initial state.

Type parametersโ€‹

NameTypeDescription
Textends HTMLElementThe type of the UI component element.

Parametersโ€‹

NameTypeDescription
templateStatelessComponentThe stateless component template function.

Returnsโ€‹

T

The created UI component element.

Defined inโ€‹

packages/core/src/core/Component/index.ts:106

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.ContextMenu/index.html b/build/api/classes/thatopen_ui.ContextMenu/index.html index a4d14435..1d28eb10 100644 --- a/build/api/classes/thatopen_ui.ContextMenu/index.html +++ b/build/api/classes/thatopen_ui.ContextMenu/index.html @@ -4,7 +4,7 @@ Class: ContextMenu | That Open Docs - + @@ -16,7 +16,7 @@ to ensure the context menu is properly placed relative to the target element.

Parametersโ€‹

NameTypeDescription
target?HTMLElementThe target element relative to which the context menu should be positioned. If not provided, the parent node is used as the target.

Returnsโ€‹

Promise<void>

A promise that resolves once the position has been updated. This method does not explicitly return a value but updates the context menu's style properties to position it on the screen.

Defined inโ€‹

packages/core/src/components/ContextMenu/index.ts:85

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Dropdown/index.html b/build/api/classes/thatopen_ui.Dropdown/index.html index 3e91451c..caa14418 100644 --- a/build/api/classes/thatopen_ui.Dropdown/index.html +++ b/build/api/classes/thatopen_ui.Dropdown/index.html @@ -4,14 +4,14 @@ Class: Dropdown | That Open Docs - +
Skip to main content

Class: Dropdown

@thatopen/ui.Dropdown

Heloooooooooo

Hierarchyโ€‹

Implementsโ€‹

Propertiesโ€‹

iconโ€‹

โ€ข Optional icon: string

The icon to be displayed in the dropdown.

Default

undefined

Example

<bim-dropdown icon="exampleIcon"></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.icon = 'exampleIcon';

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:82

labelโ€‹

โ€ข Optional label: string

The label to be displayed in the dropdown.

Default

undefined

Example

<bim-dropdown label="Example Label"></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.label = 'Example Label';

Implementation ofโ€‹

HasName.label

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:95

multipleโ€‹

โ€ข multiple: boolean = false

Indicates whether multiple options can be selected in the dropdown.

Default

false

Example

<bim-dropdown multiple></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.multiple = true;

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:107

nameโ€‹

โ€ข Optional name: string

The name of the dropdown.

Default

undefined

Example

<bim-dropdown name="exampleName"></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.name = 'exampleName';

Implementation ofโ€‹

HasName.name

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:69

requiredโ€‹

โ€ข required: boolean = false

Indicates whether a selection is required in the dropdown.

Default

false

Example

<bim-dropdown required></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.required = true;

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:119

verticalโ€‹

โ€ข vertical: boolean = false

Indicates whether the dropdown should be displayed vertically.

Default

false

Example

<bim-dropdown vertical></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.vertical = true;

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:131

Accessorsโ€‹

valueโ€‹

โ€ข set value(value): void

The selected values in the dropdown.

Parametersโ€‹

NameType
valueany[]

Returnsโ€‹

void

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.value = ['option1', 'option2'];

Implementation ofโ€‹

HasValue.value

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:170

visibleโ€‹

โ€ข set visible(value): void

Indicates whether the dropdown it-self (not the component) is visible.

Parametersโ€‹

NameType
valueboolean

Returnsโ€‹

void

Default

false

Example

<bim-dropdown visible></bim-dropdown>

Example

const dropdown = document.createElement('bim-dropdown');
dropdown.visible = true;

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:150

Methodsโ€‹

createโ€‹

โ–ธ create<T, S>(template, state): [element: T, update: UpdateFunction<S>]

Creates a new UI component instance based on the provided template and initial state.

Type parametersโ€‹

NameTypeDescription
Textends HTMLElementThe type of the UI component element.
Sextends Record<string, any>The type of the component state.

Parametersโ€‹

NameTypeDescription
templateStatefullComponent<S>The stateful component template function.
stateSThe initial state of the component.

Returnsโ€‹

[element: T, update: UpdateFunction<S>]

An array containing the created UI component element and a function to update its state.

Inherited fromโ€‹

Component.create

Defined inโ€‹

packages/core/src/core/Component/index.ts:92

โ–ธ create<T>(template): T

Creates a new UI component instance based on the provided template and initial state.

Type parametersโ€‹

NameTypeDescription
Textends HTMLElementThe type of the UI component element.

Parametersโ€‹

NameTypeDescription
templateStatelessComponentThe stateless component template function.

Returnsโ€‹

T

The created UI component element.

Inherited fromโ€‹

Component.create

Defined inโ€‹

packages/core/src/core/Component/index.ts:106

Eventsโ€‹

onValueChangeโ€‹

โ€ข onValueChange: Event

Event that is fired when the value of the dropdown changes. This event is fired when the user selects or deselects an option.

change

Example

dropdown.addEventListener('change', (event) => {
  console.log('Dropdown value changed:', event.target.value);
});

Implementation ofโ€‹

HasValue.onValueChange

Defined inโ€‹

packages/core/src/components/Dropdown/index.ts:209

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Grid/index.html b/build/api/classes/thatopen_ui.Grid/index.html index 33211480..ffb01414 100644 --- a/build/api/classes/thatopen_ui.Grid/index.html +++ b/build/api/classes/thatopen_ui.Grid/index.html @@ -4,7 +4,7 @@ Class: Grid | That Open Docs - + @@ -13,7 +13,7 @@ Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances. The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances. The HTMLElement instances are used to populate the grid with content.

Defined inโ€‹

packages/core/src/components/Grid/index.ts:79

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Icon/index.html b/build/api/classes/thatopen_ui.Icon/index.html index 69a39459..008d2f83 100644 --- a/build/api/classes/thatopen_ui.Icon/index.html +++ b/build/api/classes/thatopen_ui.Icon/index.html @@ -4,13 +4,13 @@ Class: Icon | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Input/index.html b/build/api/classes/thatopen_ui.Input/index.html index cae30b89..16a5f562 100644 --- a/build/api/classes/thatopen_ui.Input/index.html +++ b/build/api/classes/thatopen_ui.Input/index.html @@ -4,13 +4,13 @@ Class: Input | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Label/index.html b/build/api/classes/thatopen_ui.Label/index.html index 9445d63b..0cdcc77d 100644 --- a/build/api/classes/thatopen_ui.Label/index.html +++ b/build/api/classes/thatopen_ui.Label/index.html @@ -4,7 +4,7 @@ Class: Label | That Open Docs - + @@ -18,7 +18,7 @@ When the label property changes, the displayed text updates to reflect the new value. If the label is hidden (controlled by labelHidden), changing this property will not affect the visibility of the label.

Default

undefined

Example

<bim-label label="Example Label"></bim-label>

Example

const labelComponent = document.createElement('bim-label');
labelComponent.label = 'Example Label';
document.body.appendChild(labelComponent);

Defined inโ€‹

packages/core/src/components/Label/index.ts:71

labelHiddenโ€‹

โ€ข labelHidden: boolean = false

Controls the visibility of the label text. When true, the label text is not rendered to the user. Changing this property to true hides the label text if it was previously visible. Setting it to false will show the label text if it is defined.

Default

false

Example

<bim-label label-hidden></bim-label>

Example

const labelComponent = document.createElement('bim-label');
labelComponent.labelHidden = true;
document.body.appendChild(labelComponent);

Defined inโ€‹

packages/core/src/components/Label/index.ts:98

verticalโ€‹

โ€ข vertical: boolean = false

Determines the orientation of the component. When true, the component's contents (label, image, and icon) are stacked vertically. Changing this property affects the layout of the component, switching between a horizontal and vertical arrangement of its contents.

Default

false

Example

<bim-label vertical></bim-label>

Example

const labelComponent = document.createElement('bim-label');
labelComponent.vertical = true;
document.body.appendChild(labelComponent);

Defined inโ€‹

packages/core/src/components/Label/index.ts:140

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.NumberInput/index.html b/build/api/classes/thatopen_ui.NumberInput/index.html index d7e9b956..bec45c1d 100644 --- a/build/api/classes/thatopen_ui.NumberInput/index.html +++ b/build/api/classes/thatopen_ui.NumberInput/index.html @@ -4,7 +4,7 @@ Class: NumberInput | That Open Docs - + @@ -39,7 +39,7 @@ This method is useful for programmatically focusing the input element, for example, in response to a user action or to emphasize the input in the UI.

If the input element reference is not available (not yet rendered or disconnected), this method will do nothing.

Returnsโ€‹

void

Overridesโ€‹

LitElement.focus

Defined inโ€‹

packages/core/src/components/NumberInput/index.ts:408

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Option/index.html b/build/api/classes/thatopen_ui.Option/index.html index d6087226..c9ed972e 100644 --- a/build/api/classes/thatopen_ui.Option/index.html +++ b/build/api/classes/thatopen_ui.Option/index.html @@ -4,7 +4,7 @@ Class: Option | That Open Docs - + @@ -27,7 +27,7 @@ The value property does not reflect, meaning if you change the value using JavaScript, you won't find the same data in the attributes. However, if you have set the value in the property and then you change the attribute, the value will be set at the data from the attribute. By default, if no value is set, value will return the label value in case there is one defined.

Returnsโ€‹

any

Example

<bim-option value="10"></bim-option>

Example

const option = document.createElement('bim-option');
// option.setAttribute('value', 'true');
// option.setAttribute('value', '10');
// option.setAttribute('value', 'some string');
document.body.appendChild(option);

Example

const option = document.createElement('bim-option');
option.label = "At origin"
option.value = {x: 0, y: 0, z: 0} // As this is an object, it must be set in the property and not in the attribute.
document.body.appendChild(option);

Defined inโ€‹

packages/core/src/components/Option/index.ts:191

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Panel/index.html b/build/api/classes/thatopen_ui.Panel/index.html index 186d4401..df905e32 100644 --- a/build/api/classes/thatopen_ui.Panel/index.html +++ b/build/api/classes/thatopen_ui.Panel/index.html @@ -4,7 +4,7 @@ Class: Panel | That Open Docs - + @@ -26,7 +26,7 @@ This method iterates over each bim-panel-section found within the panel's DOM and sets their collapsed property to false, effectively showing their content. This can be used to programmatically reveal the content of sections within the panel, making the panel more informative or to display details that are necessary for the user.

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/components/Panel/src/Panel.ts:198

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.PanelSection/index.html b/build/api/classes/thatopen_ui.PanelSection/index.html index c464551a..452d1e79 100644 --- a/build/api/classes/thatopen_ui.PanelSection/index.html +++ b/build/api/classes/thatopen_ui.PanelSection/index.html @@ -4,13 +4,13 @@ Class: PanelSection | That Open Docs - +
Skip to main content

Class: PanelSection

@thatopen/ui.PanelSection

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ PanelSection

Implementsโ€‹

Propertiesโ€‹

collapsedโ€‹

โ€ข Optional collapsed: boolean

Controls the collapsed state of the panel section. When collapsed is true, the content of the section is hidden, and only the header is visible. This property can be toggled to show or hide the section's content, and is reflected to an attribute for easy HTML or JavaScript manipulation. Note that sections marked as fixed ignore changes to this property.

Default

undefined

Example

<bim-panel-section collapsed></bim-panel-section>

Example

const section = document.createElement('bim-panel-section');
section.collapsed = true;
document.body.appendChild(section);

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:145

fixedโ€‹

โ€ข Optional fixed: boolean

Determines whether the panel section is fixed, meaning it cannot be collapsed or expanded. This is useful for sections that should always remain visible. When fixed is true, the collapse/expand icon is hidden, and clicking the header does not toggle the collapsed state. This property is reflected to an attribute, allowing it to be set declaratively in HTML or programmatically via JavaScript.

Default

undefined

Example

<bim-panel-section fixed></bim-panel-section>

Example

const section = document.createElement('bim-panel-section');
section.fixed = true;
document.body.appendChild(section);

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:132

iconโ€‹

โ€ข Optional icon: string

Represents the icon to be displayed within the panel section. This icon is a visual cue that can be used alongside the label to provide additional context or to represent the section's content visually. When the icon property changes, the displayed icon updates accordingly. This property is reflected to an attribute, allowing for declarative usage in HTML as well as programmatic control in JavaScript.

Default

undefined

Example

<bim-panel-section icon="settings"></bim-panel-section>

Example

const section = document.createElement('bim-panel-section');
section.icon = 'settings';
document.body.appendChild(section);

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:93

labelโ€‹

โ€ข Optional label: string

Specifies the label for the panel section. This label is displayed prominently at the top of the section and serves as a title or heading. When the label property changes, the section's header updates to reflect the new label. This property takes precedence over the name property for display purposes and is also reflected to an attribute for HTML declaration or JavaScript manipulation.

Default

undefined

Example

<bim-panel-section label="User Settings"></bim-panel-section>

Example

const section = document.createElement('bim-panel-section');
section.label = 'User Settings';
document.body.appendChild(section);

Implementation ofโ€‹

HasName.label

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:106

nameโ€‹

โ€ข Optional name: string

Defines the name of the panel section, acting as an identifier. While similar to label, name is more suited for identification purposes rather than display. If label is not set, name can be displayed as a fallback in the section's header. The name property is reflected to an attribute, enabling both HTML and JavaScript interactions.

Default

undefined

Example

<bim-panel-section name="user-settings"></bim-panel-section>

Example

const section = document.createElement('bim-panel-section');
section.name = 'user-settings';
document.body.appendChild(section);

Implementation ofโ€‹

HasName.name

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:119

Accessorsโ€‹

valueโ€‹

โ€ข get value(): Record<string, any>

The value getter computes and returns the current state of the panel section's form elements as an object. This object's keys are the name or label attributes of the child elements, and the values are the corresponding values of these elements. This property is particularly useful for retrieving a consolidated view of the user's input or selections within the panel section. When the value of any child element changes, the returned object from this getter will reflect those changes, providing a dynamic snapshot of the panel section's state. Note that this property does not have a default value as it dynamically reflects the current state of the panel section's form elements.

Returnsโ€‹

Record<string, any>

Example

<bim-panel-section></bim-panel-section> <!-- Usage in HTML not directly applicable as this is a getter -->

Example

const section = document.createElement('bim-panel-section');
console.log(section.value); // Logs the current value object

Implementation ofโ€‹

HasValue.value

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:157

โ€ข set value(data): void

The value setter allows programmatically updating the values of the panel section's child elements. It accepts an object where keys correspond to the name or label attributes of the child elements, and the values are the new values to be set for these elements. This property is useful for initializing the panel section with specific values or updating its state based on external data. When the property changes, the corresponding child elements' values are updated to reflect the new state. This does not have a default value as it is a method for updating child elements' values.

Parametersโ€‹

NameType
dataRecord<string, any>

Returnsโ€‹

void

Default

undefined

Example

<bim-panel-section></bim-panel-section> <!-- Usage in HTML not directly applicable as this is a setter -->

Example

const section = document.createElement('bim-panel-section');
section.value = { 'user-settings': 'John Doe' }; // Programmatically sets the value of a child element named 'user-settings'

Implementation ofโ€‹

HasValue.value

Defined inโ€‹

packages/core/src/components/Panel/src/Section.ts:171

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Selector/index.html b/build/api/classes/thatopen_ui.Selector/index.html index 70d9ab48..0be3554f 100644 --- a/build/api/classes/thatopen_ui.Selector/index.html +++ b/build/api/classes/thatopen_ui.Selector/index.html @@ -4,7 +4,7 @@ Class: Selector | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

Class: Selector

@thatopen/ui.Selector

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ Selector

Implementsโ€‹

Accessorsโ€‹

valueโ€‹

โ€ข set value(value): void

Sets the value of the selector. It finds the matching option based on the provided value and sets it as the selected option. If no matching option is found, it does nothing.

Parametersโ€‹

NameTypeDescription
valueanyThe value to set for the selector.

Returnsโ€‹

void

Implementation ofโ€‹

HasValue.value

Defined inโ€‹

packages/core/src/components/Selector/index.ts:60

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Tab/index.html b/build/api/classes/thatopen_ui.Tab/index.html index e198cc91..836d30d7 100644 --- a/build/api/classes/thatopen_ui.Tab/index.html +++ b/build/api/classes/thatopen_ui.Tab/index.html @@ -4,13 +4,13 @@ Class: Tab | That Open Docs - +
Skip to main content

Class: Tab

@thatopen/ui.Tab

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ Tab

Propertiesโ€‹

iconโ€‹

โ€ข Optional icon: string

The icon of the tab. This property is optional and can be used to display an icon next to the tab's label or name.

Defined inโ€‹

packages/core/src/components/Tabs/src/Tab.ts:38

labelโ€‹

โ€ข Optional label: string

The label of the tab. This property is optional and can be used to display a custom label instead of the tab's name.

Defined inโ€‹

packages/core/src/components/Tabs/src/Tab.ts:32

nameโ€‹

โ€ข name: string

The name of the tab. If not provided, a default name will be assigned based on its position in the parent element.

Defined inโ€‹

packages/core/src/components/Tabs/src/Tab.ts:26

Accessorsโ€‹

hiddenโ€‹

โ€ข set hidden(value): void

Sets the hidden state of the tab.

Parametersโ€‹

NameTypeDescription
valuebooleanThe new hidden state. If true, the tab will be hidden. If false, the tab will be visible.

Returnsโ€‹

void

Fires

hiddenchange - Dispatched when the hidden state changes.

Example

const tab = document.querySelector('bim-tab');
tab.hidden = true; // hides the tab

Overridesโ€‹

LitElement.hidden

Defined inโ€‹

packages/core/src/components/Tabs/src/Tab.ts:55

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Table/index.html b/build/api/classes/thatopen_ui.Table/index.html index 9264e164..ddcb589c 100644 --- a/build/api/classes/thatopen_ui.Table/index.html +++ b/build/api/classes/thatopen_ui.Table/index.html @@ -4,7 +4,7 @@ Class: Table | That Open Docs - + @@ -31,7 +31,7 @@ If a simple string is provided, the table will filter rows based on the string's presence in any column. If a complex query is provided, the table will filter rows based on the query's conditions and values.

Parametersโ€‹

NameTypeDescription
_valuenull | stringThe search string or null to clear the search.

Returnsโ€‹

void

Example

table.queryString = "example";

Example

table.queryString = "column1="Jhon Doe" & column2=20";

Defined inโ€‹

packages/core/src/components/Table/index.ts:191

tsvโ€‹

โ€ข get tsv(): string

A getter function that generates a Tab Separated Values (TSV) representation of the table data.

Returnsโ€‹

string

A string containing the TSV representation of the table data.

Example

const tsvData = table.tsv;
console.log(tsvData); // Output: "Column 1\tColumn 2\nValue 1\tValue 2\nValue 3\tValue 4"

Defined inโ€‹

packages/core/src/components/Table/index.ts:397

valueโ€‹

โ€ข get value(): TableGroupData[]

Getter for the value property. Returns the filtered data if a search string is provided, otherwise returns the original data.

Returnsโ€‹

TableGroupData[]

Example

const tableValue = table.value;
console.log(tableValue); // Output: The filtered or original data.

Defined inโ€‹

packages/core/src/components/Table/index.ts:162

Methodsโ€‹

downloadDataโ€‹

โ–ธ downloadData(fileName?, format?): void

The downloadData method is used to download the table data in different formats.

Parametersโ€‹

NameTypeDefault valueDescription
fileNamestring"BIM Table Data"The name of the downloaded file. Default is "BIM Table Data".
format"json" | "tsv" | "csv""json"The format of the downloaded file. Can be "json", "tsv", or "csv". Default is "json".

Returnsโ€‹

void

Example

table.downloadData("MyTableData", "tsv");

Defined inโ€‹

packages/core/src/components/Table/index.ts:427

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Tabs/index.html b/build/api/classes/thatopen_ui.Tabs/index.html index 1cb431b8..adf3921f 100644 --- a/build/api/classes/thatopen_ui.Tabs/index.html +++ b/build/api/classes/thatopen_ui.Tabs/index.html @@ -4,7 +4,7 @@ Class: Tabs | That Open Docs - + @@ -13,7 +13,7 @@ and sets its hidden property to false. It also updates the corresponding tab switcher's data-active attribute to reflect the active state.

If the provided value does not match any tab name, no tab will be selected.

If the tab property is already set to the provided value, this method will deselect all tabs by setting the tab property to undefined.

Example

// Set the active tab to "tab1"
tabs.tab = "tab1";

// Deselect all tabs
tabs.tab = undefined;

Defined inโ€‹

packages/core/src/components/Tabs/src/Tabs.ts:169

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.TextInput/index.html b/build/api/classes/thatopen_ui.TextInput/index.html index f27904f3..8a3fb440 100644 --- a/build/api/classes/thatopen_ui.TextInput/index.html +++ b/build/api/classes/thatopen_ui.TextInput/index.html @@ -4,7 +4,7 @@ Class: TextInput | That Open Docs - + @@ -25,7 +25,7 @@ The type property determines the behavior of the input field. It can be any of the following: "date", "datetime-local", "email", "month", "password", "search", "tel", "text", "time", "url", "week". If an invalid type is provided, the type will not be changed.

Parametersโ€‹

NameType
valuestring

Returnsโ€‹

void

Example

// Set the type to "email"
textInput.type = "email";

Defined inโ€‹

packages/core/src/components/TextInput/index.ts:148

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Toolbar/index.html b/build/api/classes/thatopen_ui.Toolbar/index.html index 3603ed9d..a95a0bed 100644 --- a/build/api/classes/thatopen_ui.Toolbar/index.html +++ b/build/api/classes/thatopen_ui.Toolbar/index.html @@ -4,7 +4,7 @@ Class: Toolbar | That Open Docs - + @@ -14,7 +14,7 @@ When labelsHidden is false, labels in the toolbar sections will be visible.

Default Value

false

Defined inโ€‹

packages/core/src/components/Toolbar/src/Toolbar.ts:59

Accessorsโ€‹

verticalโ€‹

โ€ข set vertical(value): void

Sets the vertical property of the toolbar. When vertical is true, the toolbar will be displayed in a vertical layout. When vertical is false, the toolbar will be displayed in a horizontal layout.

Parametersโ€‹

NameType
valueboolean

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/components/Toolbar/src/Toolbar.ts:69

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.ToolbarGroup/index.html b/build/api/classes/thatopen_ui.ToolbarGroup/index.html index c81bf0c8..548c2e04 100644 --- a/build/api/classes/thatopen_ui.ToolbarGroup/index.html +++ b/build/api/classes/thatopen_ui.ToolbarGroup/index.html @@ -4,7 +4,7 @@ Class: ToolbarGroup | That Open Docs - + @@ -12,7 +12,7 @@
Skip to main content

Class: ToolbarGroup

@thatopen/ui.ToolbarGroup

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ ToolbarGroup

Propertiesโ€‹

rowsโ€‹

โ€ข rows: number = 2

The number of rows to display in the toolbar group.

Default Value

2

Defined inโ€‹

packages/core/src/components/Toolbar/src/Group.ts:25

Accessorsโ€‹

verticalโ€‹

โ€ข set vertical(value): void

Sets the vertical property of the ToolbarGroup. When vertical is true, the toolbar group will display its children vertically. When vertical is false, the toolbar group will display its children horizontally.

Parametersโ€‹

NameType
valueboolean

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/components/Toolbar/src/Group.ts:35

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.ToolbarSection/index.html b/build/api/classes/thatopen_ui.ToolbarSection/index.html index 3fd220b2..347c8c9d 100644 --- a/build/api/classes/thatopen_ui.ToolbarSection/index.html +++ b/build/api/classes/thatopen_ui.ToolbarSection/index.html @@ -4,13 +4,13 @@ Class: ToolbarSection | That Open Docs - +
Skip to main content

Class: ToolbarSection

@thatopen/ui.ToolbarSection

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ ToolbarSection

Implementsโ€‹

Accessorsโ€‹

labelHiddenโ€‹

โ€ข set labelHidden(value): void

Sets the value of the labelHidden property and updates the children accordingly.

Parametersโ€‹

NameType
valueboolean

Returnsโ€‹

void

Example

toolbarSection.labelHidden = true;

Example

<bim-toolbar-section label-hidden></bim-toolbar-section>

Defined inโ€‹

packages/core/src/components/Toolbar/src/Section.ts:82

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui.Viewport/index.html b/build/api/classes/thatopen_ui.Viewport/index.html index a72b54d0..3ddcc0f4 100644 --- a/build/api/classes/thatopen_ui.Viewport/index.html +++ b/build/api/classes/thatopen_ui.Viewport/index.html @@ -4,13 +4,13 @@ Class: Viewport | That Open Docs - +
Skip to main content

Class: Viewport

@thatopen/ui.Viewport

Heloooooooooo

Hierarchyโ€‹

  • LitElement

    โ†ณ Viewport

- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui_obc.Manager/index.html b/build/api/classes/thatopen_ui_obc.Manager/index.html index 8d9ac4db..e906007b 100644 --- a/build/api/classes/thatopen_ui_obc.Manager/index.html +++ b/build/api/classes/thatopen_ui_obc.Manager/index.html @@ -4,13 +4,13 @@ Class: Manager | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui_obc.ViewCube/index.html b/build/api/classes/thatopen_ui_obc.ViewCube/index.html index ccb05c53..86290a09 100644 --- a/build/api/classes/thatopen_ui_obc.ViewCube/index.html +++ b/build/api/classes/thatopen_ui_obc.ViewCube/index.html @@ -4,13 +4,13 @@ Class: ViewCube | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/classes/thatopen_ui_obc.World2D/index.html b/build/api/classes/thatopen_ui_obc.World2D/index.html index 2c40d2b6..3de2f8f9 100644 --- a/build/api/classes/thatopen_ui_obc.World2D/index.html +++ b/build/api/classes/thatopen_ui_obc.World2D/index.html @@ -4,13 +4,13 @@ Class: World2D | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/index.html b/build/api/index.html index 441584df..d069bb57 100644 --- a/build/api/index.html +++ b/build/api/index.html @@ -4,13 +4,13 @@ Open BIM Docs | That Open Docs - +
Skip to main content

Open BIM Docs

TOC|documentation|demo|community|npm package

cover

That Open Docs

This library contains the official docs for all the libraries of That Open Company.

  • It uses docusaurus to build them.
  • It gathers code from our repos and build the API docs using TypeDoc.
  • It gathers the HTML examples from our repos and build the tutorials.

If you see anything outdated in the docs page, feel free to open an issue. If the issue is specific to a specific repository, please open the issue in that repository!

If you have any questions, you can also ask around in our community.

Local developmentโ€‹

Requirements

Install all dependencies

yarn install

Run docusaurus local devserver

yarn start

Generating tutorials and api docs

This script clonse both openbim-components and bim-fragments repos into a temp/ folder and generates the api docs.

yarn build:remote
- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.BVHGeometry/index.html b/build/api/interfaces/thatopen_components.BVHGeometry/index.html index a309e3f9..9ff9bcaa 100644 --- a/build/api/interfaces/thatopen_components.BVHGeometry/index.html +++ b/build/api/interfaces/thatopen_components.BVHGeometry/index.html @@ -4,13 +4,13 @@ Interface: BVHGeometry | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.CameraControllable/index.html b/build/api/interfaces/thatopen_components.CameraControllable/index.html index 4bcd7239..cb4638fd 100644 --- a/build/api/interfaces/thatopen_components.CameraControllable/index.html +++ b/build/api/interfaces/thatopen_components.CameraControllable/index.html @@ -4,13 +4,13 @@ Interface: CameraControllable | That Open Docs - +
Skip to main content

Interface: CameraControllable

@thatopen/components.CameraControllable

Whether a camera uses the Camera Controls library.

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Configurable/index.html b/build/api/interfaces/thatopen_components.Configurable/index.html index ce7c9433..69128950 100644 --- a/build/api/interfaces/thatopen_components.Configurable/index.html +++ b/build/api/interfaces/thatopen_components.Configurable/index.html @@ -4,14 +4,14 @@ Interface: Configurable<T> | That Open Docs - +
Skip to main content

Interface: Configurable<T>

@thatopen/components.Configurable

Whether this component supports to be configured.

Type parametersโ€‹

NameType
Textends Record<string, any>

Implemented byโ€‹

Propertiesโ€‹

configโ€‹

โ€ข config: Required<T>

Object holding the tool configuration. Is not meant to be edited directly, if you need to make changes to this object, use () just after the tool is instantiated.

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:128

isSetupโ€‹

โ€ข isSetup: boolean

Wether this components has been already configured.

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:117

onSetupโ€‹

โ€ข Readonly onSetup: Event<any>

Fired after successfully calling ()

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:123

setupโ€‹

โ€ข setup: (config?: Partial<T>) => void | Promise<void>

Type declarationโ€‹

โ–ธ (config?): void | Promise<void>

Use the provided configuration to setup the tool.

Parametersโ€‹
NameType
config?Partial<T>
Returnsโ€‹

void | Promise<void>

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:120

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Createable/index.html b/build/api/interfaces/thatopen_components.Createable/index.html index 52824f6e..d020d691 100644 --- a/build/api/interfaces/thatopen_components.Createable/index.html +++ b/build/api/interfaces/thatopen_components.Createable/index.html @@ -4,7 +4,7 @@ Interface: Createable | That Open Docs - + @@ -14,7 +14,7 @@ dimensions.

Implemented byโ€‹

Propertiesโ€‹

cancelCreationโ€‹

โ€ข Optional cancelCreation: (data: any) => void

Type declarationโ€‹

โ–ธ (data): void

Cancels the creation process of the component, going back to the state before starting to create.

Parametersโ€‹
NameType
dataany
Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:106

createโ€‹

โ€ข create: (data: any) => void

Type declarationโ€‹

โ–ธ (data): void

Creates a new instance of an element (e.g. a new Dimension).

Parametersโ€‹
NameType
dataany
Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:94

deleteโ€‹

โ€ข delete: (data: any) => void

Type declarationโ€‹

โ–ธ (data): void

Deletes an existing instance of an element (e.g. a Dimension).

Parametersโ€‹
NameType
dataany
Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:109

endCreationโ€‹

โ€ข Optional endCreation: (data: any) => void

Type declarationโ€‹

โ–ธ (data): void

Finish the creation process of the component, successfully creating an instance of whatever the component creates.

Parametersโ€‹
NameType
dataany
Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:100

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Disposable/index.html b/build/api/interfaces/thatopen_components.Disposable/index.html index 79b1ddfa..8f55a1ee 100644 --- a/build/api/interfaces/thatopen_components.Disposable/index.html +++ b/build/api/interfaces/thatopen_components.Disposable/index.html @@ -4,7 +4,7 @@ Interface: Disposable | That Open Docs - + @@ -15,7 +15,7 @@ This also ensures that the DOM events created by that component will be cleaned up.

Implemented byโ€‹

Propertiesโ€‹

disposeโ€‹

โ€ข dispose: () => void | Promise<void>

Type declarationโ€‹

โ–ธ (): void | Promise<void>

Destroys the object from memory to prevent a memory leak.

Returnsโ€‹

void | Promise<void>

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:17

onDisposedโ€‹

โ€ข Readonly onDisposed: Event<any>

Fired after the tool has been ()

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:20

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Hideable/index.html b/build/api/interfaces/thatopen_components.Hideable/index.html index ac9933dc..d02e688c 100644 --- a/build/api/interfaces/thatopen_components.Hideable/index.html +++ b/build/api/interfaces/thatopen_components.Hideable/index.html @@ -4,7 +4,7 @@ Interface: Hideable | That Open Docs - + @@ -14,7 +14,7 @@ Three.js scene.

Implemented byโ€‹

Propertiesโ€‹

visibleโ€‹

โ€ข visible: boolean

Whether the geometric representation of this component is currently visible or not in the Three.js scene.

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:34

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.NavigationMode/index.html b/build/api/interfaces/thatopen_components.NavigationMode/index.html index 3e08e19c..9503e0df 100644 --- a/build/api/interfaces/thatopen_components.NavigationMode/index.html +++ b/build/api/interfaces/thatopen_components.NavigationMode/index.html @@ -4,7 +4,7 @@ Interface: NavigationMode | That Open Docs - + @@ -13,7 +13,7 @@ and the user input (e.g. 2D floor plan mode, first person mode, etc).

Implemented byโ€‹

Propertiesโ€‹

enabledโ€‹

โ€ข enabled: boolean

Whether this navigation mode is active or not.

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:30

idโ€‹

โ€ข id: NavModeID

The unique ID of this navigation mode.

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:17

setโ€‹

โ€ข set: (active: boolean, options?: any) => void

Type declarationโ€‹

โ–ธ (active, options?): void

Enable or disable this navigation mode. When a new navigation mode is enabled, the previous navigation mode must be disabled.

Parametersโ€‹
NameTypeDescription
activebooleanwhether to enable or disable this mode.
options?anyany additional data required to enable or disable it.
Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:27

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Progress/index.html b/build/api/interfaces/thatopen_components.Progress/index.html index 1d6873c0..5707b273 100644 --- a/build/api/interfaces/thatopen_components.Progress/index.html +++ b/build/api/interfaces/thatopen_components.Progress/index.html @@ -4,13 +4,13 @@ Interface: Progress | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Resizeable/index.html b/build/api/interfaces/thatopen_components.Resizeable/index.html index 9c630be1..c514c80e 100644 --- a/build/api/interfaces/thatopen_components.Resizeable/index.html +++ b/build/api/interfaces/thatopen_components.Resizeable/index.html @@ -4,7 +4,7 @@ Interface: Resizeable | That Open Docs - + @@ -18,7 +18,7 @@ component.

Returnsโ€‹

Vector2

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:60

onResizeโ€‹

โ€ข onResize: Event<Vector2>

Event that fires when the component has been resized.

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:53

resizeโ€‹

โ€ข resize: (size?: Vector2) => void

Type declarationโ€‹

โ–ธ (size?): void

Sets size of this component (e.g. the resolution of a Renderer component.

Parametersโ€‹
NameType
size?Vector2
Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:50

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Updateable/index.html b/build/api/interfaces/thatopen_components.Updateable/index.html index 76315e46..5f353595 100644 --- a/build/api/interfaces/thatopen_components.Updateable/index.html +++ b/build/api/interfaces/thatopen_components.Updateable/index.html @@ -4,14 +4,14 @@ Interface: Updateable | That Open Docs - +
Skip to main content

Interface: Updateable

@thatopen/components.Updateable

Whether this component should be updated each frame.

Implemented byโ€‹

Propertiesโ€‹

onAfterUpdateโ€‹

โ€ข onAfterUpdate: Event<any>

Actions that should be executed after updating the component.

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:66

onBeforeUpdateโ€‹

โ€ข onBeforeUpdate: Event<any>

Actions that should be executed before updating the component.

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:69

Methodsโ€‹

updateโ€‹

โ–ธ update(delta?): void

Function used to update the state of this component each frame. For instance, a renderer component will make a render each frame.

Parametersโ€‹

NameType
delta?number

Returnsโ€‹

void

Defined inโ€‹

packages/core/src/core/Types/src/interfaces.ts:75

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_ui.ColumnData/index.html b/build/api/interfaces/thatopen_ui.ColumnData/index.html index d28905e5..9eaed135 100644 --- a/build/api/interfaces/thatopen_ui.ColumnData/index.html +++ b/build/api/interfaces/thatopen_ui.ColumnData/index.html @@ -4,13 +4,13 @@ Interface: ColumnData | That Open Docs - +
Skip to main content

Interface: ColumnData

@thatopen/ui.ColumnData

Heloooooooooo

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_ui.EntryQuery/index.html b/build/api/interfaces/thatopen_ui.EntryQuery/index.html index b9f354cc..0400a482 100644 --- a/build/api/interfaces/thatopen_ui.EntryQuery/index.html +++ b/build/api/interfaces/thatopen_ui.EntryQuery/index.html @@ -4,13 +4,13 @@ Interface: EntryQuery | That Open Docs - +
Skip to main content

Interface: EntryQuery

@thatopen/ui.EntryQuery

Heloooooooooo

- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_ui.HasName/index.html b/build/api/interfaces/thatopen_ui.HasName/index.html index 4c28fb87..e9be92bc 100644 --- a/build/api/interfaces/thatopen_ui.HasName/index.html +++ b/build/api/interfaces/thatopen_ui.HasName/index.html @@ -4,13 +4,13 @@ Interface: HasName | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_ui.HasValue/index.html b/build/api/interfaces/thatopen_ui.HasValue/index.html index 732ed117..099836db 100644 --- a/build/api/interfaces/thatopen_ui.HasValue/index.html +++ b/build/api/interfaces/thatopen_ui.HasValue/index.html @@ -4,13 +4,13 @@ Interface: HasValue | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_ui.QueryGroup/index.html b/build/api/interfaces/thatopen_ui.QueryGroup/index.html index 9b02d159..187f6789 100644 --- a/build/api/interfaces/thatopen_ui.QueryGroup/index.html +++ b/build/api/interfaces/thatopen_ui.QueryGroup/index.html @@ -4,13 +4,13 @@ Interface: QueryGroup | That Open Docs - +
Skip to main content

Interface: QueryGroup

@thatopen/ui.QueryGroup

Heloooooooooo

- + \ No newline at end of file diff --git a/build/api/modules/index.html b/build/api/modules/index.html index 22f12553..7e93a995 100644 --- a/build/api/modules/index.html +++ b/build/api/modules/index.html @@ -4,13 +4,13 @@ Open BIM Docs | That Open Docs - +
Skip to main content

Open BIM Docs

- + \ No newline at end of file diff --git a/build/api/modules/thatopen_components/index.html b/build/api/modules/thatopen_components/index.html index c0a3078f..c2eb0a35 100644 --- a/build/api/modules/thatopen_components/index.html +++ b/build/api/modules/thatopen_components/index.html @@ -4,13 +4,13 @@ Module: @thatopen/components | That Open Docs - +
Skip to main content

Module: @thatopen/components

Classesโ€‹

Interfacesโ€‹

Type Aliasesโ€‹

CameraProjectionโ€‹

ฦฌ CameraProjection: "Perspective" | "Orthographic"

The projection system of the camera.

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:4

ฦฌ NavModeID: "Orbit" | "FirstPerson" | "Plan"

The extensible list of supported navigation modes.

Defined inโ€‹

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:9

- + \ No newline at end of file diff --git a/build/api/modules/thatopen_components_front/index.html b/build/api/modules/thatopen_components_front/index.html index e1d30c95..0dc7c6da 100644 --- a/build/api/modules/thatopen_components_front/index.html +++ b/build/api/modules/thatopen_components_front/index.html @@ -4,13 +4,13 @@ Module: @thatopen/components-front | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/modules/thatopen_fragments/index.html b/build/api/modules/thatopen_fragments/index.html index 50091fad..22d4efd1 100644 --- a/build/api/modules/thatopen_fragments/index.html +++ b/build/api/modules/thatopen_fragments/index.html @@ -4,13 +4,13 @@ Module: @thatopen/fragments | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/api/modules/thatopen_ui/index.html b/build/api/modules/thatopen_ui/index.html index 9f2b1c05..58b38163 100644 --- a/build/api/modules/thatopen_ui/index.html +++ b/build/api/modules/thatopen_ui/index.html @@ -4,13 +4,13 @@ Module: @thatopen/ui | That Open Docs - +
Skip to main content

Module: @thatopen/ui

Classesโ€‹

Interfacesโ€‹

Type Aliasesโ€‹

ConditionFunctionsโ€‹

ฦฌ ConditionFunctions: { [queryCondition in QueryCondition]: Function }

Heloooooooooo

Defined inโ€‹

packages/core/src/core/types.ts:54

Queryโ€‹

ฦฌ Query: (EntryQuery | QueryGroup)[]

Heloooooooooo

Defined inโ€‹

packages/core/src/core/types.ts:49

QueryConditionโ€‹

ฦฌ QueryCondition: "=" | ">" | ">=" | "<" | "<=" | "?" | "/" | "#"

Heloooooooooo

Defined inโ€‹

packages/core/src/core/types.ts:21

QueryOperatorsโ€‹

ฦฌ QueryOperators: "&" | "|"

Heloooooooooo

Defined inโ€‹

packages/core/src/core/types.ts:26

- + \ No newline at end of file diff --git a/build/api/modules/thatopen_ui_obc/index.html b/build/api/modules/thatopen_ui_obc/index.html index 3457be36..595261bf 100644 --- a/build/api/modules/thatopen_ui_obc/index.html +++ b/build/api/modules/thatopen_ui_obc/index.html @@ -4,13 +4,13 @@ Module: @thatopen/ui-obc | That Open Docs - +
Skip to main content
- + \ No newline at end of file diff --git a/build/assets/js/5094df0e.a09abb95.js b/build/assets/js/5094df0e.a09abb95.js deleted file mode 100644 index fbd93128..00000000 --- a/build/assets/js/5094df0e.a09abb95.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7621],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>f});var r=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function o(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=r.createContext({}),s=function(e){var t=r.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},m=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),u=s(a),d=n,f=u["".concat(l,".").concat(d)]||u[d]||c[d]||i;return a?r.createElement(f,o(o({ref:t},m),{},{components:a})):r.createElement(f,o({ref:t},m))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=d;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[u]="string"==typeof e?e:n,o[1]=p;for(var s=2;s{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>f,frontMatter:()=>p,metadata:()=>s,toc:()=>u});var r=a(7462),n=a(3366),i=(a(7294),a(3905)),o=["components"],p={sidebar_position:4},l="Tutorial paths",s={unversionedId:"components/tutorial-paths",id:"components/tutorial-paths",title:"Tutorial paths",description:"As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you're not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library!",source:"@site/docs/components/tutorial-paths.md",sourceDirName:"components",slug:"/components/tutorial-paths",permalink:"/components/tutorial-paths",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Clean components ABC",permalink:"/components/clean-components-guide"},next:{title:"Get involved",permalink:"/components/contributing"}},m={},u=[],c={toc:u},d="wrapper";function f(e){var t=e.components,a=(0,n.Z)(e,o);return(0,i.kt)(d,(0,r.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"tutorial-paths"},"Tutorial paths"),(0,i.kt)("p",null,"As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you're not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library!"),(0,i.kt)("admonition",{title:"First steps in the library",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"The best place to start is playing the core components of our library. These are the basic building blocks you will need in all the apps you build on top of this!"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/SimpleScene.mdx"},"Create your first 3D app")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/SimpleRaycaster.mdx"},"Interact with your scene")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/SimpleRaycaster.mdx"},"Create some clipping planes")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ToolsComponent.mdx"},"Use some tools"))))),(0,i.kt)("admonition",{title:"Making great 3D apps",type:"danger"},(0,i.kt)("p",{parentName:"admonition"},"Basics are great, but that's not enough to build professional 3D apps. Let's discover some tools that will bring our BIM software to the next level:"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/OrthoPerspectiveCamera.mdx"},"Using a fancy camera")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ScreenCuller.mdx"},"Building scalable 3D scenes"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/PostproductionRenderer.mdx"},"Setting up beatiful graphics"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/UIManager.mdx"},"Creating UI fast"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/MiniMap.mdx"},"Creating a minimap"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ShadowDropper.mdx"},"Casting shadows"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/EdgesClipper.mdx"},"Clipping edges"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/LengthMeasurement.mdx"},"Measuring distances"))))),(0,i.kt)("admonition",{title:"Loading and editing BIM data",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"We are here to make BIM apps, and the library has tons of tools to make it super easy! Our library is based on ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_fragment"},"fragments"),", an open source geometric format that can load display big amounts of BIM data super efficiently. Let's learn how to build BIM apps with it!"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentManager.mdx"},"Discovering fragments"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentIfcLoader.mdx"},"Loading IFC files"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentHighlighter.mdx"},"Touching BIM models"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentExploder.mdx"},"Exploding models"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentCacher.mdx"},"Caching BIM data"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentPlans.mdx"},"Navigating floorplans"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/IfcPropertiesProcessor.mdx"},"Reading properties"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentTree.mdx"},"Building trees"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentHider.mdx"},"Filtering geometry"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/IfcPropertiesManager.mdx"},"Writing properties"))))),(0,i.kt)("p",null,"Keep in mind that this documentation assumes some basic level of web development and Three.js. If you are just starting or have never coded before in the web, don't worry! Get around our community, say hi, meet other aspiring BIM software developers and start your coding journey with us. \ud83d\ude80"))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/5094df0e.f834e59d.js b/build/assets/js/5094df0e.f834e59d.js new file mode 100644 index 00000000..2d99c98c --- /dev/null +++ b/build/assets/js/5094df0e.f834e59d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7621],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>d});var r=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function i(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var s=r.createContext({}),l=function(e){var t=r.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},m=function(e){var t=l(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,s=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),u=l(a),f=n,d=u["".concat(s,".").concat(f)]||u[f]||c[f]||o;return a?r.createElement(d,i(i({ref:t},m),{},{components:a})):r.createElement(d,i({ref:t},m))}));function d(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=f;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[u]="string"==typeof e?e:n,i[1]=p;for(var l=2;l{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>d,frontMatter:()=>p,metadata:()=>l,toc:()=>u});var r=a(7462),n=a(3366),o=(a(7294),a(3905)),i=["components"],p={sidebar_position:4},s="Tutorial paths",l={unversionedId:"components/tutorial-paths",id:"components/tutorial-paths",title:"Tutorial paths",description:"As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you're not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library!",source:"@site/docs/components/tutorial-paths.md",sourceDirName:"components",slug:"/components/tutorial-paths",permalink:"/components/tutorial-paths",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Clean components ABC",permalink:"/components/clean-components-guide"},next:{title:"Get involved",permalink:"/components/contributing"}},m={},u=[],c={toc:u},f="wrapper";function d(e){var t=e.components,a=(0,n.Z)(e,i);return(0,o.kt)(f,(0,r.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"tutorial-paths"},"Tutorial paths"),(0,o.kt)("p",null,"As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you're not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library!"),(0,o.kt)("admonition",{title:"First steps in the library",type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"The best place to start is playing the core components of our library. These are the basic building blocks you will need in all the apps you build on top of this!"),(0,o.kt)("ul",{parentName:"admonition"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/Worlds"},"Create your first 3D app")," ")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/Grids"},"Set up a grid")," ")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/Raycasters"},"Interact with your scene")," ")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/Clipper"},"Create some clipping planes")," ")))),(0,o.kt)("admonition",{title:"Making great 3D apps",type:"danger"},(0,o.kt)("p",{parentName:"admonition"},"Basics are great, but that's not enough to build professional 3D apps. Let's discover some tools that will bring our BIM software to the next level:"),(0,o.kt)("ul",{parentName:"admonition"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/OrthoPerspectiveCamera"},"Use a fancy camera")," ")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/Cullers"},"Build scalable 3D scenes"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Front/PostproductionRenderer"},"Set up beatiful graphics"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/MiniMap"},"Create a minimap"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Front/ShadowDropper"},"Cast shadows"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Front/EdgesClipper"},"Create clipping edges"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Front/LengthMeasurement"},"Measure distances"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,o.kt)("a",{parentName:"p",href:"../Tutorials/UserInterface/"},"Create UIs fast"))))),(0,o.kt)("admonition",{title:"Loading and editing BIM data",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"We are here to make BIM apps, and the library has tons of tools to make it super easy! Our library is based on ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_fragment"},"fragments"),", an open source geometric format that can load display big amounts of BIM data super efficiently. Let's learn how to build BIM apps with it!"),(0,o.kt)("ul",{parentName:"admonition"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/IfcLoader"},"Load IFC files"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/FragmentsManager"},"Discover fragments"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/UserInterface/OBC/ModelsList"},"See your loaded models"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,o.kt)("a",{parentName:"p",href:"/Tutorials/UserInterface/OBC/ElementProperties"},"Meet your model properties")))),(0,o.kt)("ul",{parentName:"admonition"},(0,o.kt)("li",{parentName:"ul"},"\ud83d\udcd5 ",(0,o.kt)("a",{parentName:"li",href:"/Tutorials/Components/Core/IfcRelationsIndexer"},"Know your model relations"))),(0,o.kt)("ul",{parentName:"admonition"},(0,o.kt)("li",{parentName:"ul"},"\ud83d\udcd5 ",(0,o.kt)("a",{parentName:"li",href:"/Tutorials/Components/Core/Hider"},"Filter geometry")))),(0,o.kt)("p",null,"Keep in mind that this documentation assumes some basic level of web development and Three.js. If you are just starting or have never coded before in the web, don't worry! Get around our community, say hi, meet other aspiring BIM software developers and start your coding journey with us. \ud83d\ude80"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/runtime~main.92778e8e.js b/build/assets/js/runtime~main.98d4045c.js similarity index 72% rename from build/assets/js/runtime~main.92778e8e.js rename to build/assets/js/runtime~main.98d4045c.js index 3c04353a..763290ce 100644 --- a/build/assets/js/runtime~main.92778e8e.js +++ b/build/assets/js/runtime~main.98d4045c.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,d,b,f,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var d=t[e]={id:e,loaded:!1,exports:{}};return c[e].call(d.exports,d,d.exports,r),d.loaded=!0,d.exports}r.m=c,r.c=t,e=[],r.O=(a,d,b,f)=>{if(!d){var c=1/0;for(i=0;i=f)&&Object.keys(r.O).every((e=>r.O[e](d[o])))?d.splice(o--,1):(t=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[d,b,f]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},d=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,b){if(1&b&&(e=this(e)),8&b)return e;if("object"==typeof e&&e){if(4&b&&e.__esModule)return e;if(16&b&&"function"==typeof e.then)return e}var f=Object.create(null);r.r(f);var c={};a=a||[null,d({}),d([]),d(d)];for(var t=2&b&&e;"object"==typeof t&&!~a.indexOf(t);t=d(t))Object.getOwnPropertyNames(t).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,r.d(f,c),f},r.d=(e,a)=>{for(var d in a)r.o(a,d)&&!r.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:a[d]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,d)=>(r.f[d](e,a),a)),[])),r.u=e=>"assets/js/"+({53:"935f2afb",94:"111feb22",155:"d9bc4fdf",261:"4f749076",282:"2aba4d5d",321:"ee29e6ad",327:"60d286c5",350:"14b2fcb7",372:"a19b4c2c",400:"23f0a572",440:"02b3ccc6",638:"8e79a5c7",761:"1c5bde81",835:"a599bc11",984:"3834acf5",1129:"255d81eb",1160:"bb95e244",1221:"1c46db60",1393:"0f647618",1513:"60f3e948",1625:"746b65d1",1764:"44d0ab4a",1842:"f45379a9",1860:"2a9a2072",2011:"b1f8f8a6",2154:"da19a474",2232:"e3702cd4",2238:"1567e004",2394:"1b39a4e0",2609:"9417cdd2",2720:"733d79ef",2837:"89d80fa0",3045:"c2bbc440",3132:"fba9713b",3149:"2895e020",3156:"5251865f",3208:"9cc62e14",3386:"140c5f61",3659:"0849f8a0",3738:"9064555a",3893:"7887f5d5",3941:"9d7eea47",3991:"98508be6",4125:"80bb5c14",4238:"a6a8c80c",4283:"5c7b714e",4321:"15cde90e",4335:"dc2a58ea",4376:"f77615d9",4394:"ca57013d",4591:"7f370fb4",4646:"d05ab5b9",4718:"753b1b55",4847:"7d516a78",4872:"f71f0617",5243:"17d65022",5260:"6aecd34e",5264:"bf390c76",5269:"035e0bbb",5282:"8f0e23c6",5362:"232409b2",5446:"ac8bbf91",5447:"c62bb28c",5499:"9b7b7fda",5648:"b86baa83",5662:"be95f796",6015:"6ff4b68b",6061:"9bd74671",6162:"5a3844a3",6383:"36f30aba",6631:"d60cd624",6635:"35bc646f",6644:"519cde36",6811:"72d46929",6812:"c1b3b982",7027:"57f3dce9",7054:"9dd8a0d2",7116:"0dcd76a4",7154:"73803af1",7283:"5416c1e0",7306:"f6aebfbf",7553:"fe22553b",7592:"e8a4ea3d",7597:"5e8c322a",7621:"5094df0e",7709:"fa23a143",7784:"f7901ade",7918:"17896441",7942:"6b4facaa",8046:"f70643aa",8092:"070f01c0",8094:"65e97039",8100:"3eac639e",8141:"16dd699a",8220:"d3dcb6ee",8230:"26cef902",8239:"a711233c",8400:"b46e04f8",8470:"416b2475",8491:"308c405f",8509:"0d0787b6",8553:"f0d87bf4",8604:"82c425bb",8645:"10d63750",8648:"63ea579c",8655:"87654e65",8892:"8004d10c",8985:"8368d781",8995:"4bf8fd60",9018:"96c1a8ad",9065:"cd5a87c7",9098:"02cb068a",9170:"072af5be",9231:"bbb18ae5",9311:"9f1bf482",9514:"1be78505",9595:"7cc95c1b",9671:"0e384e19",9763:"63603fbd",9772:"c9909429",9773:"c6f50999",9908:"27876b76",9926:"38ed86ac"}[e]||e)+"."+{53:"31d6cf59",94:"266da4a7",155:"6bfe57d5",261:"a67f50ca",282:"5a51494f",321:"4d7f9c3a",327:"e2961294",350:"fbe3f7c1",372:"8b2e4894",400:"857c346d",440:"27a59e49",638:"7f895758",761:"bf8f73be",835:"9c4bcfc0",984:"6d19b762",1129:"ded18f33",1160:"f28c28f6",1221:"65a5bb06",1393:"5e6582a3",1513:"2429a965",1625:"0f610a0c",1764:"a37673ab",1842:"11f6f82c",1860:"2cb88fcf",2011:"6fcba14f",2154:"93343e2d",2232:"899608fd",2238:"9f3fc591",2394:"0b12ca46",2609:"0e2ac479",2720:"d0ee394f",2837:"38b21b75",3045:"9d5623a9",3132:"d1723b16",3149:"792c2304",3156:"2c36c65b",3208:"0ba3ef58",3386:"3ab6c532",3659:"4781b459",3738:"f1cab61a",3893:"ffa6a7f0",3941:"716daa9f",3991:"19c326f7",4125:"204189b0",4238:"3dcf9849",4283:"24dcdc83",4321:"ac9f6ffd",4335:"8db72f50",4376:"3ebf0476",4394:"86ccfff3",4591:"b5dd2a8a",4646:"a01219f1",4718:"dfb3ad56",4847:"3a2f886f",4872:"7de1c1d7",4972:"96c55074",5243:"706ff005",5260:"d59b49b4",5264:"f5f57613",5269:"6649b65c",5282:"54409c5c",5362:"0ed1f941",5446:"3c97ce41",5447:"6814af35",5499:"db949411",5648:"5ea46c22",5662:"29e9bbb4",6015:"6518a81b",6061:"617ef87e",6162:"5e2d2c06",6383:"d1ec7265",6631:"27f53618",6635:"ed031adf",6644:"3ea114e4",6811:"7f48cd9b",6812:"58b6d040",7027:"e22ef023",7054:"32165b2d",7116:"beefad49",7154:"a5d9729d",7283:"9cbfeaac",7306:"3b73aec4",7553:"6fb1ffc4",7592:"e3ed6a35",7597:"1ab4294c",7621:"a09abb95",7709:"35c15e8f",7784:"87a29880",7918:"2a0ca96b",7942:"ff6009b2",8046:"5458bee7",8092:"47f9b41f",8094:"a7d77ebb",8100:"82b6f831",8141:"38a45d17",8220:"59f69836",8230:"a9405031",8239:"f505f77c",8400:"92a3a2f2",8470:"6f235372",8491:"c822385f",8509:"d065a635",8553:"4ae8315e",8604:"7d4f693b",8645:"75f3528c",8648:"ad7d04eb",8655:"24cdd71b",8892:"3082051c",8985:"ac800a77",8995:"34002f5e",9018:"f6ed53b8",9065:"724fe535",9098:"3e8b832a",9170:"0acc5b4e",9231:"7acd3cd4",9311:"0baa44d0",9514:"c3b88fa2",9595:"fcef41d0",9671:"6695c4ef",9763:"c1cdcce9",9772:"478ddff5",9773:"6d80854d",9908:"36af7355",9926:"2383296e"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),b={},f="docs:",r.l=(e,a,d,c)=>{if(b[e])b[e].push(a);else{var t,o;if(void 0!==d)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var f=b[e];if(delete b[e],t.parentNode&&t.parentNode.removeChild(t),f&&f.forEach((e=>e(d))),a)return a(d)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918","935f2afb":"53","111feb22":"94",d9bc4fdf:"155","4f749076":"261","2aba4d5d":"282",ee29e6ad:"321","60d286c5":"327","14b2fcb7":"350",a19b4c2c:"372","23f0a572":"400","02b3ccc6":"440","8e79a5c7":"638","1c5bde81":"761",a599bc11:"835","3834acf5":"984","255d81eb":"1129",bb95e244:"1160","1c46db60":"1221","0f647618":"1393","60f3e948":"1513","746b65d1":"1625","44d0ab4a":"1764",f45379a9:"1842","2a9a2072":"1860",b1f8f8a6:"2011",da19a474:"2154",e3702cd4:"2232","1567e004":"2238","1b39a4e0":"2394","9417cdd2":"2609","733d79ef":"2720","89d80fa0":"2837",c2bbc440:"3045",fba9713b:"3132","2895e020":"3149","5251865f":"3156","9cc62e14":"3208","140c5f61":"3386","0849f8a0":"3659","9064555a":"3738","7887f5d5":"3893","9d7eea47":"3941","98508be6":"3991","80bb5c14":"4125",a6a8c80c:"4238","5c7b714e":"4283","15cde90e":"4321",dc2a58ea:"4335",f77615d9:"4376",ca57013d:"4394","7f370fb4":"4591",d05ab5b9:"4646","753b1b55":"4718","7d516a78":"4847",f71f0617:"4872","17d65022":"5243","6aecd34e":"5260",bf390c76:"5264","035e0bbb":"5269","8f0e23c6":"5282","232409b2":"5362",ac8bbf91:"5446",c62bb28c:"5447","9b7b7fda":"5499",b86baa83:"5648",be95f796:"5662","6ff4b68b":"6015","9bd74671":"6061","5a3844a3":"6162","36f30aba":"6383",d60cd624:"6631","35bc646f":"6635","519cde36":"6644","72d46929":"6811",c1b3b982:"6812","57f3dce9":"7027","9dd8a0d2":"7054","0dcd76a4":"7116","73803af1":"7154","5416c1e0":"7283",f6aebfbf:"7306",fe22553b:"7553",e8a4ea3d:"7592","5e8c322a":"7597","5094df0e":"7621",fa23a143:"7709",f7901ade:"7784","6b4facaa":"7942",f70643aa:"8046","070f01c0":"8092","65e97039":"8094","3eac639e":"8100","16dd699a":"8141",d3dcb6ee:"8220","26cef902":"8230",a711233c:"8239",b46e04f8:"8400","416b2475":"8470","308c405f":"8491","0d0787b6":"8509",f0d87bf4:"8553","82c425bb":"8604","10d63750":"8645","63ea579c":"8648","87654e65":"8655","8004d10c":"8892","8368d781":"8985","4bf8fd60":"8995","96c1a8ad":"9018",cd5a87c7:"9065","02cb068a":"9098","072af5be":"9170",bbb18ae5:"9231","9f1bf482":"9311","1be78505":"9514","7cc95c1b":"9595","0e384e19":"9671","63603fbd":"9763",c9909429:"9772",c6f50999:"9773","27876b76":"9908","38ed86ac":"9926"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,d)=>{var b=r.o(e,a)?e[a]:void 0;if(0!==b)if(b)d.push(b[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var f=new Promise(((d,f)=>b=e[a]=[d,f]));d.push(b[2]=f);var c=r.p+r.u(a),t=new Error;r.l(c,(d=>{if(r.o(e,a)&&(0!==(b=e[a])&&(e[a]=void 0),b)){var f=d&&("load"===d.type?"missing":d.type),c=d&&d.target&&d.target.src;t.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",t.name="ChunkLoadError",t.type=f,t.request=c,b[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,d)=>{var b,f,[c,t,o]=d,n=0;if(c.some((a=>0!==e[a]))){for(b in t)r.o(t,b)&&(r.m[b]=t[b]);if(o)var i=o(r)}for(a&&a(d);n{"use strict";var e,a,b,d,f,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var b=t[e]={id:e,loaded:!1,exports:{}};return c[e].call(b.exports,b,b.exports,r),b.loaded=!0,b.exports}r.m=c,r.c=t,e=[],r.O=(a,b,d,f)=>{if(!b){var c=1/0;for(i=0;i=f)&&Object.keys(r.O).every((e=>r.O[e](b[o])))?b.splice(o--,1):(t=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[b,d,f]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},b=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var f=Object.create(null);r.r(f);var c={};a=a||[null,b({}),b([]),b(b)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=b(t))Object.getOwnPropertyNames(t).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,r.d(f,c),f},r.d=(e,a)=>{for(var b in a)r.o(a,b)&&!r.o(e,b)&&Object.defineProperty(e,b,{enumerable:!0,get:a[b]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,b)=>(r.f[b](e,a),a)),[])),r.u=e=>"assets/js/"+({53:"935f2afb",94:"111feb22",155:"d9bc4fdf",261:"4f749076",282:"2aba4d5d",321:"ee29e6ad",327:"60d286c5",350:"14b2fcb7",372:"a19b4c2c",400:"23f0a572",440:"02b3ccc6",638:"8e79a5c7",761:"1c5bde81",835:"a599bc11",984:"3834acf5",1129:"255d81eb",1160:"bb95e244",1221:"1c46db60",1393:"0f647618",1513:"60f3e948",1625:"746b65d1",1764:"44d0ab4a",1842:"f45379a9",1860:"2a9a2072",2011:"b1f8f8a6",2154:"da19a474",2232:"e3702cd4",2238:"1567e004",2394:"1b39a4e0",2609:"9417cdd2",2720:"733d79ef",2837:"89d80fa0",3045:"c2bbc440",3132:"fba9713b",3149:"2895e020",3156:"5251865f",3208:"9cc62e14",3386:"140c5f61",3659:"0849f8a0",3738:"9064555a",3893:"7887f5d5",3941:"9d7eea47",3991:"98508be6",4125:"80bb5c14",4238:"a6a8c80c",4283:"5c7b714e",4321:"15cde90e",4335:"dc2a58ea",4376:"f77615d9",4394:"ca57013d",4591:"7f370fb4",4646:"d05ab5b9",4718:"753b1b55",4847:"7d516a78",4872:"f71f0617",5243:"17d65022",5260:"6aecd34e",5264:"bf390c76",5269:"035e0bbb",5282:"8f0e23c6",5362:"232409b2",5446:"ac8bbf91",5447:"c62bb28c",5499:"9b7b7fda",5648:"b86baa83",5662:"be95f796",6015:"6ff4b68b",6061:"9bd74671",6162:"5a3844a3",6383:"36f30aba",6631:"d60cd624",6635:"35bc646f",6644:"519cde36",6811:"72d46929",6812:"c1b3b982",7027:"57f3dce9",7054:"9dd8a0d2",7116:"0dcd76a4",7154:"73803af1",7283:"5416c1e0",7306:"f6aebfbf",7553:"fe22553b",7592:"e8a4ea3d",7597:"5e8c322a",7621:"5094df0e",7709:"fa23a143",7784:"f7901ade",7918:"17896441",7942:"6b4facaa",8046:"f70643aa",8092:"070f01c0",8094:"65e97039",8100:"3eac639e",8141:"16dd699a",8220:"d3dcb6ee",8230:"26cef902",8239:"a711233c",8400:"b46e04f8",8470:"416b2475",8491:"308c405f",8509:"0d0787b6",8553:"f0d87bf4",8604:"82c425bb",8645:"10d63750",8648:"63ea579c",8655:"87654e65",8892:"8004d10c",8985:"8368d781",8995:"4bf8fd60",9018:"96c1a8ad",9065:"cd5a87c7",9098:"02cb068a",9170:"072af5be",9231:"bbb18ae5",9311:"9f1bf482",9514:"1be78505",9595:"7cc95c1b",9671:"0e384e19",9763:"63603fbd",9772:"c9909429",9773:"c6f50999",9908:"27876b76",9926:"38ed86ac"}[e]||e)+"."+{53:"31d6cf59",94:"266da4a7",155:"6bfe57d5",261:"a67f50ca",282:"5a51494f",321:"4d7f9c3a",327:"e2961294",350:"fbe3f7c1",372:"8b2e4894",400:"857c346d",440:"27a59e49",638:"7f895758",761:"bf8f73be",835:"9c4bcfc0",984:"6d19b762",1129:"ded18f33",1160:"f28c28f6",1221:"65a5bb06",1393:"5e6582a3",1513:"2429a965",1625:"0f610a0c",1764:"a37673ab",1842:"11f6f82c",1860:"2cb88fcf",2011:"6fcba14f",2154:"93343e2d",2232:"899608fd",2238:"9f3fc591",2394:"0b12ca46",2609:"0e2ac479",2720:"d0ee394f",2837:"38b21b75",3045:"9d5623a9",3132:"d1723b16",3149:"792c2304",3156:"2c36c65b",3208:"0ba3ef58",3386:"3ab6c532",3659:"4781b459",3738:"f1cab61a",3893:"ffa6a7f0",3941:"716daa9f",3991:"19c326f7",4125:"204189b0",4238:"3dcf9849",4283:"24dcdc83",4321:"ac9f6ffd",4335:"8db72f50",4376:"3ebf0476",4394:"86ccfff3",4591:"b5dd2a8a",4646:"a01219f1",4718:"dfb3ad56",4847:"3a2f886f",4872:"7de1c1d7",4972:"96c55074",5243:"706ff005",5260:"d59b49b4",5264:"f5f57613",5269:"6649b65c",5282:"54409c5c",5362:"0ed1f941",5446:"3c97ce41",5447:"6814af35",5499:"db949411",5648:"5ea46c22",5662:"29e9bbb4",6015:"6518a81b",6061:"617ef87e",6162:"5e2d2c06",6383:"d1ec7265",6631:"27f53618",6635:"ed031adf",6644:"3ea114e4",6811:"7f48cd9b",6812:"58b6d040",7027:"e22ef023",7054:"32165b2d",7116:"beefad49",7154:"a5d9729d",7283:"9cbfeaac",7306:"3b73aec4",7553:"6fb1ffc4",7592:"e3ed6a35",7597:"1ab4294c",7621:"f834e59d",7709:"35c15e8f",7784:"87a29880",7918:"2a0ca96b",7942:"ff6009b2",8046:"5458bee7",8092:"47f9b41f",8094:"a7d77ebb",8100:"82b6f831",8141:"38a45d17",8220:"59f69836",8230:"a9405031",8239:"f505f77c",8400:"92a3a2f2",8470:"6f235372",8491:"c822385f",8509:"d065a635",8553:"4ae8315e",8604:"7d4f693b",8645:"75f3528c",8648:"ad7d04eb",8655:"24cdd71b",8892:"3082051c",8985:"ac800a77",8995:"34002f5e",9018:"f6ed53b8",9065:"724fe535",9098:"3e8b832a",9170:"0acc5b4e",9231:"7acd3cd4",9311:"0baa44d0",9514:"c3b88fa2",9595:"fcef41d0",9671:"6695c4ef",9763:"c1cdcce9",9772:"478ddff5",9773:"6d80854d",9908:"36af7355",9926:"2383296e"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},f="docs:",r.l=(e,a,b,c)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==b)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var f=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),f&&f.forEach((e=>e(b))),a)return a(b)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918","935f2afb":"53","111feb22":"94",d9bc4fdf:"155","4f749076":"261","2aba4d5d":"282",ee29e6ad:"321","60d286c5":"327","14b2fcb7":"350",a19b4c2c:"372","23f0a572":"400","02b3ccc6":"440","8e79a5c7":"638","1c5bde81":"761",a599bc11:"835","3834acf5":"984","255d81eb":"1129",bb95e244:"1160","1c46db60":"1221","0f647618":"1393","60f3e948":"1513","746b65d1":"1625","44d0ab4a":"1764",f45379a9:"1842","2a9a2072":"1860",b1f8f8a6:"2011",da19a474:"2154",e3702cd4:"2232","1567e004":"2238","1b39a4e0":"2394","9417cdd2":"2609","733d79ef":"2720","89d80fa0":"2837",c2bbc440:"3045",fba9713b:"3132","2895e020":"3149","5251865f":"3156","9cc62e14":"3208","140c5f61":"3386","0849f8a0":"3659","9064555a":"3738","7887f5d5":"3893","9d7eea47":"3941","98508be6":"3991","80bb5c14":"4125",a6a8c80c:"4238","5c7b714e":"4283","15cde90e":"4321",dc2a58ea:"4335",f77615d9:"4376",ca57013d:"4394","7f370fb4":"4591",d05ab5b9:"4646","753b1b55":"4718","7d516a78":"4847",f71f0617:"4872","17d65022":"5243","6aecd34e":"5260",bf390c76:"5264","035e0bbb":"5269","8f0e23c6":"5282","232409b2":"5362",ac8bbf91:"5446",c62bb28c:"5447","9b7b7fda":"5499",b86baa83:"5648",be95f796:"5662","6ff4b68b":"6015","9bd74671":"6061","5a3844a3":"6162","36f30aba":"6383",d60cd624:"6631","35bc646f":"6635","519cde36":"6644","72d46929":"6811",c1b3b982:"6812","57f3dce9":"7027","9dd8a0d2":"7054","0dcd76a4":"7116","73803af1":"7154","5416c1e0":"7283",f6aebfbf:"7306",fe22553b:"7553",e8a4ea3d:"7592","5e8c322a":"7597","5094df0e":"7621",fa23a143:"7709",f7901ade:"7784","6b4facaa":"7942",f70643aa:"8046","070f01c0":"8092","65e97039":"8094","3eac639e":"8100","16dd699a":"8141",d3dcb6ee:"8220","26cef902":"8230",a711233c:"8239",b46e04f8:"8400","416b2475":"8470","308c405f":"8491","0d0787b6":"8509",f0d87bf4:"8553","82c425bb":"8604","10d63750":"8645","63ea579c":"8648","87654e65":"8655","8004d10c":"8892","8368d781":"8985","4bf8fd60":"8995","96c1a8ad":"9018",cd5a87c7:"9065","02cb068a":"9098","072af5be":"9170",bbb18ae5:"9231","9f1bf482":"9311","1be78505":"9514","7cc95c1b":"9595","0e384e19":"9671","63603fbd":"9763",c9909429:"9772",c6f50999:"9773","27876b76":"9908","38ed86ac":"9926"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,b)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)b.push(d[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var f=new Promise(((b,f)=>d=e[a]=[b,f]));b.push(d[2]=f);var c=r.p+r.u(a),t=new Error;r.l(c,(b=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var f=b&&("load"===b.type?"missing":b.type),c=b&&b.target&&b.target.src;t.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",t.name="ChunkLoadError",t.type=f,t.request=c,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,b)=>{var d,f,[c,t,o]=b,n=0;if(c.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(b);n Clean components ABC | That Open Docs - +

Clean components ABC

Basicsโ€‹

Always extend from the base Component class.

import * as OBC from "openbim-components"

export MyComponent extends OBC.Component<any> {}

If your component has more than one file, name the base file index.ts. If you need to include other supporting files for your component, create a src folder in the component folder. You can call those supporting file whatever you want. This is a basic folder structure, making sure you name the component folder as the class name:

  • MyComponent

    • src

      • supporting-file-1.ts

      • supporting-file-2.ts

      • index.ts

TypeScriptโ€‹

Avoid using ! in property fields. If a property element is not initialized in the constructor, you can either use ?, or create a getter to assert that it exists before getting it.

Always name private members with underscore.

import {Component} from "src/base-types/component"

export MyComponent extends Component<any> {
    private _privateProperty: any;
}

Never define private properties in the constructor. Make them explicit beforehand:

/*Incorrect*/
constructor(private _components: Components)

/*Correct*/
private _components: Components
constructor(components: Components) {
    this._components = components
}

Always make events readonly and initialize them directly.

readonly onCreated = new Event<any>()

Follow the Single Responsibility Principle.

Always make sure to know the interfaces you can implement when creating your component (i.e. Creatable, Hideable, UI, etc), that way we keep things uniform in terms of properties and methods naming and types.

Documentationโ€‹

In tutorials, try to not reference functions inside paragraphs. That allows to easily update the tutorial code without need to also update the paragraphs.

/*Incorrect*/
/*MD
To add a cube to the scene, you need to call scene.add()
*/

scene.add(cube)

/*Correct*/
/*MD
To add a cube to the scene, just add the following code line!
*/

scene.add(cube)

Memory managementโ€‹

Memory management is critical when using Open BIM components. Not paying attention to this can result in applications that consume more and more memory, up to a point in which it freeze and / or crash. This is especially relevant when using SPA (Single Page Application) libraries and frameworks, like React, Angular, Vue, etc.

To make sure your component doesnโ€™t cause any memory leaks and stays efficient, you need to make sure that:

  • It is added to the components object like this: components.tools.add("name", yourComponent) .

  • It implements the Disposable interface. This will force you to implement a dispose() method that will be called automatically by the library when itโ€™s disposed. You can add all the clean up logic inside this method.

There are some things that you want to clean up inside the dispose method:

3D objects and materialsโ€‹

Three.js needs to manually release the memory of the geometry and materials that are not used anymore. If your component creates any new geometry or material, you need to keep track of it and get rid of it. You can do this in 2 ways:

  1. Using the Three.js dispose method to get rid of all geometries and materials, including their children recursively.

  2. Using the disposer object provided by the components library, which does everything for you.

You can also make sure that the browser gets rid of this memory fast by leaving this data out of scope (e.g. emptying the array where they are after disposing it). For instance, if you are keeping track of all your meshes in an array called meshes, you can get rid of it like this:

import * as THREE from "three";
import * as OBC from "openbim-components";

class YourComponent extends Component<THREE.Mesh[]> implements Disposable {

    // ...

    private _meshes: Mesh[];
    private _disposer = new OBC.Disposer();

    dispose() {
        // ...
        for(const mesh of this.meshes) {
            this._disposer.dispose(mesh);
        }
        this._meshes = [];
    }

}

UI Components / HTML elementsโ€‹

If your components has any kind of menu, itโ€™s probably made of UI Components or raw HTML elements. When you dispose your component, you should also get rid of them to make sure that they are not left hidden somewhere consuming memory. You can easily do this by:

  • Calling the dispose method of the UI Components that you create.

  • Calling the remove method of any HTML element that you create.

The only exception to this rule is if your component takes external UI components or HTML elements. In this case, itโ€™s possible that it is used by other components that are not being disposed yet. In that case, you can just de-reference it (e.g. assigning them an empty value).

Eventsโ€‹

Events are a nice way of binding HTML elements to JS logic. A common way of doing that is using addEventListener. Thatโ€™s fine if all the events are bound to HTML elements that you create inside your component (and thus are destroyed when your component is disposed).

But in some situations youโ€™ll need to add events to HTML elements outside your components, or even to the global window object. In those cases, you will need to make sure that you get rid of these events when your component is disposed. You can do that with removeEventListener, and making sure that you keep a reference to the logic as an arrow function.

To make sure you donโ€™t forget about getting rid of your events, itโ€™s a good practice to create a setupEvents method that allows you to toggle them like this:

import * as THREE from "three";
import * as OBC from "openbim-components";

class YourComponent extends Component<THREE.Mesh[]> implements Disposable {

    // ...

    constructor() {
        this.setupEvents(true);
    }

    dispose() {
        // ...
        this.setupEvents(false);
    }

    private _setupEvents(active: boolean) {
        if(active) {
            window.addEventListener("mousemove", this.logMessage);
        } else {
            window.removeEventListener("mousemove", this.logMessage);
        }
    }

    private logMessage = () => {
        console.log("Hey!");
    }
}

Huge objects / arraysโ€‹

Some components are data-heavy. You should make sure that that memory is released when your component is disposed. To achieve that, you can just assign them an empty value:

import * as THREE from "three";
import * as OBC from "openbim-components";

class YourComponent extends Component<THREE.Mesh[]> implements Disposable {

    dataArray: any = [];
    dataObject: any = {};

    dispose() {
        // ...
        this.dataArray= [];
        this.dataObject= {};
    }
}
- + \ No newline at end of file diff --git a/build/components/contributing/index.html b/build/components/contributing/index.html index 736a0128..2f95a522 100644 --- a/build/components/contributing/index.html +++ b/build/components/contributing/index.html @@ -4,13 +4,13 @@ Get involved | That Open Docs - +

Get involved

Want to help us make this project even more amazing? Great! Contributing is easy, and on this page you'll find a quick guide on how to do it.

There are basically 3 places where you can help:

Spotting bugsโ€‹

Have you found a bug / something to improve? Create an issue (if it doesn't exist yet) so that we can start working on it!

Visiting the communityโ€‹

Our community is the heart of our project. It's the place where all BIM software developers meet, share their wins and learn from each other.

You can be part of it by:

  • Showing us what you built with IFC.js!

  • Answer questions of other BIM software developers.

  • Sharing resources / tutorials

  • Starting interesting debates and conversations

Codingโ€‹

What you'll need

The knowledge you need to help us depend on which part of the libraries you want to help us with. In general, basic knowledge of web development, TypeScript and Three.js should suffice. If you are not sure, don't hesitate to ask us!

This includes adding features that you miss, enhancing existing features, fixing bugs or writing tests. The steps to contribute are the following:

Pick a repositoryโ€‹

We have multiple libraries, and you might be interested in contributing in a specific one. Some of them are:

  • components: our main library. It contains a bunch of tools to create 3D BIM software in no time, like 3D measurements, clipping planes, DXF exporters, etc. If you like fun 3D features and Three.js, start here!

  • web-ifc: our IFC engine. It's written in C++ and compiled with WebAssembly. It's pretty low level, but not hard at all once you get started. If you are interested in the details of reading and writing IFC, C++ or WebAssembly, start here!

Pick or create an issueโ€‹

Create a new issue telling us what you want to do, or pick an existing issue and tell us that you will do it. That way, we'll make sure that nobody else is working on it. We'll also give you some pointers to help you get started!

We'll also make sure to include it in the roadmap.

Start codingโ€‹

To add / edit code of the library, you will need to:

  1. Create a fork of the repository

  2. Work on your fork of the repository locally. Please follow the basic clean rules!

  3. Create a pull request. The name should follow the conventional commits convention. If you are not sure, check out the title past pull requests!

Then, someone from our team will reviewed it and, if everything is ok, merge it. That's it! Easy, right? ๐Ÿ˜‹ We'll help you get started and give you anything you needs, so don't hesitate to reach out!

- + \ No newline at end of file diff --git a/build/components/creating-components/index.html b/build/components/creating-components/index.html index cc24419c..2fa2c7c9 100644 --- a/build/components/creating-components/index.html +++ b/build/components/creating-components/index.html @@ -4,7 +4,7 @@ Creating new components | That Open Docs - + @@ -12,7 +12,7 @@

Creating new components

Componentsโ€‹

Our libraries have many components, but the BIM world is vast and it's impossible to cover all use cases. But that's the biggest power of components: they are flexible and can be extended to cover all use cases.

We like types, but you don't have to

We are going to do the examples in TypeScript, but don't worry if you only know JavaScript! Translating these examples to JavaScript would be exactly the same but removing all the type definitions.

Creating a component is as simple as creating a class that extends the basic Component class. It is a generic class, which means that you can specify a type when defining it. This type is what we call the core of the component: the type of data it stores inside that best represents what the component does.

For example, let's create a "Hello world" component, whose only mission is to log a greeting message in the console. 

import * as OBC from "openbim-components";

/**
 * A basic component to say hello in the console.
 */
export class HelloWorldComponent extends OBC.Component<string> {
  enabled = true;

  private readonly _message = "Hello";

  constructor(components: OBC.Components) {
    super(components);
  }

  get() {
    return this._message;
  }

  greet(name: string) {
    const message = `${this._message} ${name}!`;
    console.log(message);
  }
}

As you can see, the structure of the component is very simple. The Component base class requires it to have certain things:

  • A constructor where at least one of the arguments will be the main object components. This components object will be available as a public property of the class.

  • An enabled property that indicates whether the component is active or not.

  • A get() method that returns the main data of the component.

Now, you can use this component just as any of the components you will get to know in the tutorials!

User Interfaceโ€‹

Creating the UI of a whole BIM application can be a pain, even if you have a BIM library that does the heavy lifting for you. Luckily, the components library also comes with a set of pre-made UI elements that you can use to build it in minutes!

UI Components

You don't need to use them if you don't want to, but it will allow you to build the same UI that you see in our editor and in some tools of our library.

You can check out the UIComponents tutorial for a more in-depth look of what you can do with them, or simply check out the code of some of our components.

To add them to your component, you just need to use the UI interface and use the UIElement object: 

import * as OBC from "openbim-components";

/**
 * A basic component to say hello in the console.
 */
export class HelloWorldComponent extends OBC.Component<string> 
  implements OBC.UI {
  enabled = true;
    
  uiElement = new OBC.UIElement<{greet: OBC.Button}>(); 

  private readonly _message = "Hello";

  constructor(components: OBC.Components) {
    super(components);
        
    const greet = new OBC.Button(components);
    greet.materialIcon = "handshake";
    greet.tooltip = "Greet";
    greet.onClick.add(() => this.greet("stranger"));
    this.uiElement.set({ greet });
  }

  get() {
    return this._message;
  }

  greet(name: string) {
    const message = `${this._message} ${name}!`;
    console.log(message);
  }
}

Great! Now you can use them like this:

const greetButton = helloWorldTool.uiElement.get("greet");
const toolbar = new OBC.Toolbar(components);
components.ui.addToolbar(toolbar);
toolbar.addChild(greetButton);

Keep it cleanโ€‹

It's important that you keep your components clean and tidy! To do that, check out the short guide for avoiding smells when creating components.

Toolsโ€‹

Creating a tool is very similar to creating a component. It just has a bunch of extra requirements:

import * as OBC from "openbim-components";

/**
 * A basic component to say hello in the console.
 */
export class HelloWorldTool extends OBC.Component<string> {
  static readonly uuid = "0f89b34b-fc6b-4b97-b56d-1edeb0a308a2";
  
  enabled = true;

  private readonly _message = "Hello";

  constructor(components: OBC.Components) {
    super(components);
    components.tools.add(HelloWorldTool.uuid, this);    
  }

  get() {
    return this._message;
  }

  greet(name: string) {
    const message = `${this._message} ${name}!`;
    console.log(message);
  }
}

Let's see the benefits we get for making a tool instead of a simple component:

Availabilityโ€‹

As you can see, tools have a static UUID (v4) and are registered in the ToolsComponent. That way, we make sure that they are unique and globally available through your entire application. If you want to access that tool anywhere else in your application like this:

// Somewhere in your app:

const helloWorldTool = new HelloWorldTool(components);

// Somewhere else in your app:

const hwTool = await components.get(HelloWorldTool.uuid);

Lifecycleโ€‹

The library will take care of updating your tools (if needed) and releasing their memory when your 3D app is diposed, preventing memory leaks. You can set up your tool easily using the interfaces provided by the library. For example:

  • With updateable, the library will automatically update your component every frame.

  • With disposable, the library will release the memory of your component when the application is disposed, preventing memory leaks.

Let's see them in action!

import * as THREE from "three";
import * as OBC from "openbim-components";

/**
 * A basic component to say hello in the console.
 */
export class HelloWorldTool extends OBC.Component<string> 
  implements OBC.Disposable, OBC.Updateable  {
    static readonly uuid = "0f89b34b-fc6b-4b97-b56d-1edeb0a308a2";

    readonly onAfterUpdate = new OBC.Event();

    readonly onBeforeUpdate = new OBC.Event();

    enabled = true;
    someMesh = new THREE.Mesh(); 

    private readonly _message = "Hello";

    constructor(components: OBC.Components) {
        super(components);
        components.tools.add(HelloWorldTool.uuid, this);
    }
    
    get() {
        return this._message;
    }

    greet(name: string) {
        const message = `${this._message} ${name}!`;
        console.log(message);
    }

    async dispose() {
        this.enabled = false;
        // Make sure to clean up the events
        this.onBeforeUpdate.reset();
        this.onAfterUpdate.reset();
        // Use the disposer tool to easily dispose THREE.js objects
        const disposer = await this.components.tool.get(OBC.Disposer);
        disposer.destroy(this.someMesh);
    }

    async update() {
        this.onBeforeUpdate.trigger();
        console.log("Updated!");
        this.onAfterUpdate.trigger();
    }
}

This is it! Now, the library will take care of updating and disposing your component automatically.

Cloud nativeโ€‹

To find out how to bring your tools to the cloud, check out the cloud tools tutorial!

๐Ÿš€๐Ÿš€๐Ÿš€

- + \ No newline at end of file diff --git a/build/components/getting-started/index.html b/build/components/getting-started/index.html index a8816ce3..c6ef72fe 100644 --- a/build/components/getting-started/index.html +++ b/build/components/getting-started/index.html @@ -4,7 +4,7 @@ Getting started | That Open Docs - + @@ -12,7 +12,7 @@

Getting started

Component ABCโ€‹

Components are the building blocks of all our libraries. In short, a component is a bunch of tested code that has a specific set of features and can be used through a documented API. Components can do anything: viewing a 3D scene, loading an IFC, exporting floor plans, and even 3D modelling.

Why components?

Our goal is to allow everyone to create BIM software. But that's not enough; creating a BIM software is no easy task, especially when doing it alone (as a company or individual).

Wouldn't it be nice if all the software that we develop spoke the same language? That way, we could all share, buy and sell it to solve each other's problem, creating a decentralised ecosystem. That's exactly what Components are: a very basic set of rules that allows everyone to build their own tools on top of the same foundations, so that everything is compatible.

The cool thing about components is that they are extensible. We provide a wide set of components that cover the basic features of any BIM app, but buildings are complex and there are many use cases. Using our technology as a basis, you'll be able to create your own components in no time. We also cover this in this documentation. ๐Ÿ˜‰

But first, let's get our feet wet with the basics: start using components in one of your projects!

Try them!โ€‹

We have many libraries of components. The reason is that some of those components are big, and having everything in a single repository would be a mess! However, the main one is this one. You can import it in your project using npm, yarn or any other package manager of your choice:

npm i openbim-components

Most of our libraries are based on Three.js, so you'll also need to import it. Make sure it's the same version as the one used by openbim-components!

npm i three

Finally, you also need to install some peer dependencies. These are other libraries we made and didn't include as regular dependencies to enable more flexible bundling scenarios. Again, make sure it's the same version as the one used by openbim-components:

npm i bim-fragment
npm i web-ifc

That's it! Now you are ready to start using components. But where to start? Here you have a nice tutorial to make your first steps and build a 3D app that looks like this in less than 5 minutes:

Cool, right? But of course, as you can imagine, there's a long way between this simple app and a full-fledged BIM application. If you need some guidance in your journey to discover all the components that we offer, check out the tutorial paths. If you want to know more about components, keep reading! ๐Ÿ‘‡

Toolsโ€‹

Components are great, and soon you will learn how to use the ones in this library and create your own components. However, BIM applications are complex, and the components have several limitations:

  • Cloud-native behavior: we want to democratize BIM software, and for that it is imperative that software can be easily shared between applications through the cloud.

  • Globally availability: BIM applications have many parts, and in many occasions we will need to access logic from several places in our app easily and in a decoupled manner.

  • Lifecycle management: 3D applications need to be able to update their parts at every frame. In addition, Three.js applications need to manage memory to ensure that we don't have memory leaks, especially when using technologies like React, Angular, etc.

For this reason we have created a special type of component that is capable of all this and more: the Tools. Don't worry, in the tutorials of these docs you will learn how to use the tools provided by the library and how to create your own tools and share them through That Open Platform.

Compatibilityโ€‹

You might be wondering where you can use these components. In short, anywhere that runs JavaScript! You can use them on vanilla web apps, on any library/framework (Vue, React, Angular, Svelte, etc). Most of them are also compatible with Node.js (for backend apps), React Native (for mobile apps) and Electron (for desktop apps).

What about types?

We write all our code in TypeScript and document it with TSDoc. That means that our code is natively type-safe and that you'll get the same documentation that you'll find in the API section of these docs.

Testabilityโ€‹

Unit testsโ€‹

All our components are guaranteed to work while using their APIs directly or extending them, and our testing system guarantees that. All the code of all our libraries is unit-tested using AI, Jest, Typescript and human beings ๐Ÿ™‚. You can check it for each repository in real time looking at the badge:

Regarding the coverage, each component in our repositories is contained in a folder that follows the following structure:

  • index.ts: the entry point for the logic.
  • index.d.ts: the typed tests.
  • index.html: a tutorial app showing how to use it.

Following this structure, it's easy to check that all the components in the library are fully tested.

Community testsโ€‹

All the 3D apps that you see in these docs are not hardcoded: they are automatically deployed from the latest version of the code of our repositories and imported here. Any change in the repositories will automatically show up here.

Each component has a minimal, self-contained tutorial app exposing all its features. That means that each person looking at a tutorial of a specific component and trying it in the 3D app is actually testing that component. Having thousands of users navigating through these docs, if anything breaks, we'll know it right away!

- + \ No newline at end of file diff --git a/build/components/tutorial-paths/index.html b/build/components/tutorial-paths/index.html index a8152685..d89422cc 100644 --- a/build/components/tutorial-paths/index.html +++ b/build/components/tutorial-paths/index.html @@ -4,13 +4,13 @@ Tutorial paths | That Open Docs - +
-

Tutorial paths

As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you're not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library!

First steps in the library

The best place to start is playing the core components of our library. These are the basic building blocks you will need in all the apps you build on top of this!

Making great 3D apps

Basics are great, but that's not enough to build professional 3D apps. Let's discover some tools that will bring our BIM software to the next level:

Loading and editing BIM data

We are here to make BIM apps, and the library has tons of tools to make it super easy! Our library is based on fragments, an open source geometric format that can load display big amounts of BIM data super efficiently. Let's learn how to build BIM apps with it!

Keep in mind that this documentation assumes some basic level of web development and Three.js. If you are just starting or have never coded before in the web, don't worry! Get around our community, say hi, meet other aspiring BIM software developers and start your coding journey with us. ๐Ÿš€

- +

Tutorial paths

As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you're not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library!

First steps in the library

The best place to start is playing the core components of our library. These are the basic building blocks you will need in all the apps you build on top of this!

Making great 3D apps

Basics are great, but that's not enough to build professional 3D apps. Let's discover some tools that will bring our BIM software to the next level:

Loading and editing BIM data

We are here to make BIM apps, and the library has tons of tools to make it super easy! Our library is based on fragments, an open source geometric format that can load display big amounts of BIM data super efficiently. Let's learn how to build BIM apps with it!

Keep in mind that this documentation assumes some basic level of web development and Three.js. If you are just starting or have never coded before in the web, don't worry! Get around our community, say hi, meet other aspiring BIM software developers and start your coding journey with us. ๐Ÿš€

+ \ No newline at end of file diff --git a/build/index.html b/build/index.html index 5c423f31..5c40749e 100644 --- a/build/index.html +++ b/build/index.html @@ -4,13 +4,13 @@ That Open Docs - +
- + \ No newline at end of file diff --git a/build/intro/index.html b/build/intro/index.html index 64d67241..cc067bc8 100644 --- a/build/intro/index.html +++ b/build/intro/index.html @@ -4,14 +4,14 @@ Introduction | That Open Docs - +

Introduction

Welcome to That Open Docs! Have you ever wanted to create your own BIM software, but don't know where to start? Here you will find everything you need to go from zero to hero! ๐Ÿข๐Ÿ‘ฉโ€๐Ÿ’ป

Getting Startedโ€‹

What you can doโ€‹

You can use all the libraries covered in this documentation to create your own 3D BIM software in minutes. All the technology is free and open source, so you are free to distribute and sell anything you create.

These libraries are written in JavaScript, so you can use them to build BIM applications for:

  • ๐ŸŒ Web: using HTML, CSS and (optionally) React, Angular, Vue, etc.
  • ๐Ÿ“Servers: using Node.js.
  • ๐Ÿ’ป Desktop: using Electron.
  • ๐Ÿ“ฑ Mobile: using React Native or importing them as iframes (e.g. in Flutter).

In terms of features, these libraries offer you a wide set of handy tools to create BIM software, such as:

  • ๐Ÿข IFC import, display, navigate, edit and export.
  • ๐ŸŒณ Import, display and navigate other 3D formats.
  • ๐Ÿš€ 3D+2D modelling and editing (work in progress!).
  • ๐Ÿ“ฆ Store, process and distribute BIM models and files.
  • ๐Ÿ”Ž 3D+2D navigation tools
  • โœ 3D+2D annotations.
  • ๐Ÿ“ BIM models measurement.
  • ๐Ÿ“‹ Documentation import and export.
  • ๐Ÿค Integration with data systems (e.g. Sharepoint, PowerBI, Google Drive, etc).
  • ๐ŸŒŽ Integration with GIS systems (e.g. Mapbox).
Do you need another features?

Don't worry! You can check out the marketplace to see if someone has already done it. Many of the tools there are free, so don't forget to pass by! Additionally, all these libraries are made by a Components system that is extensible and allow you to make your own custom Components easily. ๐Ÿš€

What you'll needโ€‹

The concept BIM software has two words, and you'll need some familiarity with both before you can jump into the pool and have fun. ๐ŸŠโ€โ™‚๏ธ

BIM...โ€‹

You have probably seen architects and engineers in movies drawing 2D blueprints and handling them to construction companies to make things like buildings and bridges. That's the way we have built for a long time, but now there's a better way: BIM.

BIM stands for Building Information Model. In a nutshell, instead of drawing each blueprint one by one, we make a 3D model (M) with information (I) of the object to build (B). We can then generate all the 2D blueprints automatically from that 3D model. This has many advantages: errors in the design can be detected earlier, the design process is more traceable, we can make simulations, etc.

Never heard of BIM before?

Don't worry! You don't be to be an architect/building engineer to follow these docs and create BIM software, but keep in mind that this is the domain that we will constantly refer to. Feel free to get to our open community and ask around! We'll be happy to help. ๐Ÿป

...Softwareโ€‹

Programming is a broad topic, so we can't just start from scratch. This documentation assumes some basic knowledge of web development technologies. You will need to be familiar with basic concepts like frontend, backend, server, library and debugging, as well as some familiarity with:

TechnologyDescription
HTMLMarkdown langage used to define the structure of any web application.
CSSStyling sheets to define the appearance of all the HTML elements within a web app.
JavaScriptProgramming language of all frontend web applications, used to define their logic. Naturally, knowing TypeScript is even better, but it's not a requirement!
NPMNode Package Manager is the most popular repository to import and publish JavaScript libraries.
BundlingTools used to pack the code in bundles. Examples are Rollup and Webpack. Alternatively, if you are familiar with a frontend library/framework like React, Angular or Vue, that's more than enough!
Three.jsThe most popular web 3D library in the world.

If you have never programmed before, this might sound overwhelming, but it's actually quite easy to learn. Anyone can learn to code, and web programming is one of the best places to start. Look around for some tutorials, get your feet wet there first, and then come back here!

How to become a BIM software developer?

There are many free resources out there to learn to code for the web, although they are not specific to BIM or the construction industry. For that reason, we have made some courses that cover all these topics, starting from scratch and oriented to BIM software developer.

Reporting bugsโ€‹

We work very hard to make this library better every day, and you can help us! If you find any error while using it, don't hesitate to let us know and we will take care of it as soon as possible.

This is how you can report a bug:

  1. Go to the Github library that has the code you are using. If you are not sure, don't worry: just go to the components repository.

  2. Go to the issues tab.

  3. Create a new issue. Try to ellaborate as much as possible, explaining what you are trying to do, the behavior you expect and what the library is doing. Providing a minimal code example we can test is also super useful!

That's it! If you have questions, you can also get into our community, meet everyone and ask anything! We'll be super happy to see you there. ๐Ÿ˜Š

These docs are organized in 4 different sections. This is a lot of information and it can be hard to find just what you are looking for, so here's a short guide of where to go from here:

Componentsโ€‹

Everything in these libraries are components. Here, you will learn the basics and how to import, use and even create your own custom components. You will also find some useful tutorial paths that will help you progress throughout these docs!

That open platformโ€‹

To create BIM apps you need more than just code: authentication, databases, cloud processing, cybersecurity, etc. You could do all of this yourself, but many companies have whole software teams only for this. Luckily, you can find all these services plug-and-play in That Open Platform and add them to your apps in minutes!

APIโ€‹

Here you will find all the description of the classes, properties, methods and interfaces of the libraries. It's automatically generated and corresponds to the docs that you will see in your IDE when using any of the libraries.

Tutorialsโ€‹

Step by step tutorials covering how to use different components, including a live application where you can see it in action. This is the best way to get your feet wet with the libraries. Check out the recommended tutorial paths! ๐Ÿš€

- + \ No newline at end of file diff --git a/build/that-open-platform/getting-started/index.html b/build/that-open-platform/getting-started/index.html index 38c57c85..d969affd 100644 --- a/build/that-open-platform/getting-started/index.html +++ b/build/that-open-platform/getting-started/index.html @@ -4,14 +4,14 @@ Getting started | That Open Docs - +

Getting started

That Open Platform is a cloud app where we bring the features of our libraries to the next level! One of the things you will find in the platform is a free IFC viewer and editor that you can extend with your own custom tools. How cool is that? Let's see how to do that: ๐Ÿ‘‡

Extending the editorโ€‹

A cool thing about Tools is that you can upload them to That Open Platform to extend the online editor or make money with them in the store. Don't worry: this is so easy that you can put your components in the cloud in less than 2 minutes!

First, you'll need to install the library that will set up a cloud tool project for you:

npm i -g openbim-tools@latest

Now, you can create a new tool by running the command:

new-open-tool

This will start a CLI app that will help you create a tool project. You just have to select which template you want to use and give it a name.

Watch out!

The name must be a valid JS class name (e.g. it can't have spaces or start with a number). We recommend using PascalCase as naming convention.

A folder with your tool name will be created. You can open it with your favourite IDE and install all the dependencies like a normal web dev project:

npm i

Now, you can build it with the build command:

npm run build

And test it locally with the start command:

npm run start

Now, to upload it to That Open Platform, check out the Tools tab in your dashboard. You just need to upload the .zip file generated in the dist folder of your app project. Then, you can check the

Check the index.json actions

You need to define the name of the Buttons defined in the uiElement of your tool to be able to add them to the platform editor. Check how the basic template is build and make sure to keep that consistent when you create your own tools.

Once your tool has been uploaded, simply open the editor and load them in a custom Tab. Easy, right? In the future, you'll be able to share this tools with other end users and programmers in the store and even make money out of it. ๐Ÿš€๐Ÿš€๐Ÿš€

- + \ No newline at end of file