Components

TOC | documentation | demo | community | npm package

Open BIM Components

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.

🤝 Want our help?

Are you developing a project with our technology and would like our help? Apply now to join That Open Accelerator Program!

🧩 Integration with fragments

As you might know, we have 4 open source libraries:

• web-ifc: the IFC parser and geometry engine.
• fragments: the open source format and 3D engine.
• components: a set of tools to build BIM software fast.
• ui components: our agnostic UI system.

Components doesn't work with this new version of Fragments yet. In the next release, at the end of Q2, all components will be updated to work with this new version of Fragments. In the meantime, you have 3 options:

• Work with Fragments and build your own BIM components from scratch.
• Work with Components (which don't use this new version of Fragments).
• Check out our Accelerator Program to get previous access to the upcoming components.

Once the release at the end of Q2 is made, Components will work natively with this new version of Fragments.

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