IFC Viewer Online — BIM on the Web

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/OrbitControls.js';

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ antialias: true });
const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000);
const controls = new OrbitControls(camera, renderer.domElement);

import { FragmentsModels } from '@thatopen/fragments';
import fragmentsWorkerUrl from '@thatopen/fragments/worker?url';

const fragments = new FragmentsModels(fragmentsWorkerUrl);
const bytes = new Uint8Array(
  await fetch('/models/building.frag').then(res => res.arrayBuffer())
);
const model = await fragments.load(bytes, { modelId: 'building', camera });
scene.add(model.object);

// Inspect IFC properties on click
canvas.addEventListener('click', (e) => {
  const hit = await model.raycast({ camera, mouse, dom: renderer.domElement });
  if (hit) showPanel(await model.getItemsData([hit.localId]));
});