@ifc-viewer/core

A production-ready, feature-rich BIM viewer that lets you load, inspect, and interact with Building Information Model (IFC) files directly in the browser. Built on top of Three.js and the That Open Company ecosystem with zero native installations required.


✨ Features

- 🏗️ Full IFC Support - Load and render IFC 2x3 and IFC4 files
- 📐 Measurement Tools - Volume, length, area, angle measurements
- 🗺️ Interactive Minimap - Real-time overhead navigation view
- ✂️ Clipping Planes - Section cuts with transform gizmos
- 🎨 AI Visualizer - Transform BIM views into photorealistic renders (powered by HuggingFace)
- 📸 Screenshots - Capture high-resolution images
- 🎯 Element Selection - Click to inspect IFC properties
- 🌳 Relations Tree - Navigate spatial structure (Sites → Buildings → Storeys)
- 🎮 Multiple Navigation Modes - Orbit, First-Person, Plan view
- 📱 Mobile Friendly - Touch-optimized controls
- 🎨 Customizable - Theme, appearance, and feature flags
- ⚡ High Performance - Optimized for large models with fragment streaming

📦 Installation

``bash
npm install @ifc-viewer/core
`

🚀 Quick Start

$3

`javascript
import { createIFCViewer } from '@ifc-viewer/core';
import '@ifc-viewer/core/styles';

const viewer = createIFCViewer({
container: document.getElementById('viewer-container'),
onModelLoaded: (meta) => console.log('Model loaded!', meta),
onError: (error) => console.error('Error:', error)
});
`

$3

`html











`

🎨 Configuration

$3

`typescript
import { createIFCViewer } from '@ifc-viewer/core';
import '@ifc-viewer/core/styles';

const viewer = createIFCViewer({
// Required: Container element
container: document.getElementById('viewer-container'),

// Optional: Customize appearance
appearance: {
world: {
backgroundColor: '#050816',
directionalLightColor: '#f1f5f9',
directionalLightPosition: [20, 35, 10],
},
grid: {
enabled: true,
color: '#10b981',
primarySize: 6,
secondarySize: 1,
distance: 250,
},
},

// Optional: Load a model on startup
initialModel: {
url: '/models/demo-project.ifc',
// OR use a File/Blob:
// file: myIfcFileBlob
},

// Optional: Enable/disable features
features: {
minimap: true,
measurement: true,
clipping: true,
floorplans: true,
aiVisualizer: false, // Requires HuggingFace API token
},

// Optional: Callbacks
onModelLoaded: (meta) => {
console.log('Model loaded:', meta);
},
onObjectSelected: (selection) => {
console.log('Selected objects:', selection);
},
onError: (error) => {
console.error('Viewer error:', error);
},

// Optional: Custom theme
theme: {
'--primary-color': '#667eea',
'--background-color': '#1a1a1a',
}
});
`

🎯 API Reference

$3

The createIFCViewer function returns a handle with the following methods:

#### loadModelFromUrl(url: string): Promise

Load an IFC model from a URL:

`javascript
await viewer.loadModelFromUrl('/path/to/model.ifc');
`

#### loadModelFromFile(file: File): Promise

Load an IFC model from a File object:

`javascript
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
await viewer.loadModelFromFile(file);
});
`

#### captureScreenshot(): Promise

Capture a screenshot as a base64 data URL:

`javascript
const screenshot = await viewer.captureScreenshot();
// Use as image src or download
const img = document.createElement('img');
img.src = screenshot;
`

#### getCameraState(): Promise

Get current camera position and target:

`javascript
const cameraState = await viewer.getCameraState();
console.log('Position:', cameraState.position);
console.log('Target:', cameraState.target);
`

#### setCameraState(state: CameraState): Promise

Set camera position and target:

`javascript
await viewer.setCameraState({
position: { x: 10, y: 20, z: 30 },
target: { x: 0, y: 0, z: 0 }
});
`

#### unmount(): void

Cleanup and unmount the viewer:

`javascript
viewer.unmount();
`

🎨 Embedding in Your Website

$3

`html



`

$3

When embedding the viewer in a page section (not full-page), you need to override some default styles:

`html



`

$3

`html


Open Viewer


`

🎯 Advanced Examples

$3

`javascript
const viewer = createIFCViewer({
container: document.getElementById('viewer'),

// Custom colors and lighting
appearance: {
world: {
backgroundColor: '#0b1120',
directionalLightColor: '#f8fafc',
directionalLightPosition: [25, 40, 10],
},
grid: {
color: '#22d3ee',
enabled: true,
primarySize: 8,
secondarySize: 1,
},
},

// Pre-load a model
initialModel: {
url: '/models/showroom.ifc',
},

// Minimal UI - disable some features
features: {
minimap: false,
aiVisualizer: false,
measurement: true,
clipping: true,
},

// Handle events
onModelLoaded: async (meta) => {
console.log('Model loaded with metadata:', meta);

// Capture initial view
const screenshot = await viewer.captureScreenshot();
console.log('Initial screenshot captured');
},

onObjectSelected: (selection) => {
// selection is a Map: fragmentID -> Set
for (const [fragmentId, expressIds] of selection.entries()) {
console.log(Fragment ${fragmentId}: Selected ${expressIds.size} elements);
}
},
});
`

$3

`tsx
import { useEffect, useRef } from 'react';
import { createIFCViewer, ViewerHandle } from '@ifc-viewer/core';
import '@ifc-viewer/core/styles';

function IFCViewerComponent() {
const containerRef = useRef(null);
const viewerRef = useRef(null);

useEffect(() => {
if (!containerRef.current) return;

const viewer = createIFCViewer({
container: containerRef.current,
onModelLoaded: (meta) => {
console.log('Model loaded:', meta);
},
features: {
minimap: true,
measurement: true,
}
});

viewerRef.current = viewer;

return () => {
viewer.unmount();
};
}, []);

const handleLoadModel = async () => {
if (viewerRef.current) {
await viewerRef.current.loadModelFromUrl('/model.ifc');
}
};

return (