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!

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*asTHREEfrom"three";import*asOBCfrom"../..";constcontainer=document.getElementById("container")!;constcomponents=newOBC.Components();constworlds=components.get(OBC.Worlds);constworld=worlds.create<OBC.SimpleScene,OBC.SimpleCamera,OBC.SimpleRenderer>();world.scene=newOBC.SimpleScene(components);world.renderer=newOBC.SimpleRenderer(components,container);world.camera=newOBC.SimpleCamera(components);components.init();constmaterial=newTHREE.MeshLambertMaterial({color: "#6528D7"});constgeometry=newTHREE.BoxGeometry();constcube=newTHREE.Mesh(geometry,material);world.scene.three.add(cube);world.scene.setup();world.camera.controls.setLookAt(3,3,3,0,0,0);

🤝 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.