oxcabe / ifcjs-fragment

TOC | documentation | demo | community | npm package

BIM Fragment

This library is a geometric system to efficiently display 3D BIM data built on top of Three.js. Specifically, it uses InstancedMeshes to draw each set of repeated geometries (which are abundant in BIM models) using a single draw call.

• It uses flatbuffers to persist data as a binary format efficiently.
• It prevents memory leaks exposing a dispose() method.

You generally won't need to interact with this library direclty. Instead, you can use components, which provides an abstraction layer of tools that use this format and make the creation of BIM tools very easy.

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.

import * as FRAGS from 'bim-fragment';

const canvas = document.getElementById('container');

// Simple three.js scene: check the resources folder of this repo
const threeScene = new SimpleThreeScene(canvas);

let chairs;

const serializer = new FRAGS.Serializer();

async function importChairsBinary() {
  if (chairs !== undefined) return;
  const fetched = await fetch("../resources/chairs.frag");
  const rawData = await fetched.arrayBuffer();
  const buffer = new Uint8Array(rawData);
  chairs = serializer.import(buffer);

  for(const frag of chairs) {
    threeScene.scene.add(frag.mesh);
  }
}

function deleteChairs() {
  if (!chairs) return;
  for(const frag of chairs) {
    frag.dispose(true);
  }
  chairs = undefined;
}

async function exportChairsBinary() {
  if (!chairs) return;

  const buffer = serializer.export(chairs);
  const file = new File([new Blob([buffer])], "chairs.frag");
  const link = document.createElement('a');
  document.body.appendChild(link);

  link.download = 'chairs.frag';
  link.href = URL.createObjectURL(file);
  link.click();

  link.remove();
}