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

// Server-side IFC conversion via IfcOpenShell
const res = await fetch('/api/v1/ifc/convert', {
  method: 'POST',
  body: ifcFile
});
const { meshUrl, metadata } = await res.json();

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// Load converted mesh
const loader = new GLTFLoader();
const gltf = await loader.loadAsync(meshUrl);
scene.add(gltf.scene);

// Inspect IFC properties on click
canvas.addEventListener('click', (e) => {
  const hit = raycaster.intersectObjects(scene.children);
  if (hit.length) showPanel(hit[0].object.userData.ifc);
});