Skip to main content

index

TOC | documentation | demo | community | npm package

cover

Open BIM Components

Components NPM Package Components NPM Package Components Front NPM Package Components Front NPM Package

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!

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

WebGPU (opt-in)​

WebGL is the default and needs nothing. To run on WebGPU, pass mode: "webgpu" to the renderer:

world.renderer = new OBF.PostproductionRenderer(components, container, { mode: "webgpu" });

Requirements:

  • three@>=0.185. An older three throws a clear error.
  • The application resolves three to three/webgpu (one module graph: the libraries read WebGPURenderer and the node materials off the same three they use for everything else, which is why WebGL apps load none of it).
  • The WebGL-only addons the libraries import (fat lines, the EffectComposer passes) cannot link against three/webgpu, so they are aliased to two modules this package ships: webgpu/lines.mjs (three's WebGPU fat lines under the same names) and webgpu/webgl-addons-stub.mjs (postprocessing classes that throw if a WebGL path is ever constructed under WebGPU).

With Vite:

// vite.config.js
export default {
  resolve: {
    alias: [
      { find: /^three$/, replacement: "three/webgpu" },
      {
        find: /^three\/(examples\/jsm|addons)\/lines\/(Line2|LineSegments2|LineMaterial|Wireframe)\.js$/,
        replacement: "@thatopen/components-front/webgpu/lines.mjs",
      },
      {
        find: /^three\/(examples\/jsm|addons)\/postprocessing\/.*$/,
        replacement: "@thatopen/components-front/webgpu/webgl-addons-stub.mjs",
      },
    ],
  },
};

Under WebGPU, renderer.postproduction keeps its API (enabled, style, outlinePass, basePass.isolatedMaterials, occlusion passes) and is drawn by a TSL composition with the look of the WebGL deferred pipeline. Known divergences: GPU picks and outline masks do not cut by local clipping planes of their own (the scene's clipping group does the cut), and the near-plane guard of NearPlaneLineMaterial has no TSL port yet.

🤝 Contributing​

Thinking of sending a PR? Awesome! Please read our contributing guide first — it covers the code conventions we follow (JSDoc, examples, resources, etc.) so your changes sail through review.