Skip to main content

​
Overview

The AI-BIM App features a powerful 3D IFC viewer that enables you to visualize and navigate Industry Foundation Classes (IFC) building models in your browser. Built on Three.js and ThatOpen Components, the viewer provides professional-grade rendering and interaction capabilities.

​
Core Technologies

The IFC viewer leverages several cutting-edge technologies:
  • Three.js: High-performance 3D graphics rendering
  • ThatOpen Components (@thatopen/components): BIM-specific functionality and IFC processing
  • ThatOpen Components Front (@thatopen/components-front): Advanced rendering features
  • web-ifc: Native IFC file parsing

​
Camera System

The viewer implements a flexible dual-camera system that adapts to different visualization needs.

​
OrthoPerspectiveCamera

The app uses the OBC.OrthoPerspectiveCamera which supports both orthographic and perspective projections: 
world.camera = new OBC.OrthoPerspectiveCamera(components);

​
Camera Controls

Fit Model

Automatically frames all loaded models in the viewport with optimal zoom level (0.8x padding)

Lock/Unlock

Toggle camera controls on/off to prevent accidental navigation changes

Focus Selection

Zoom camera to focus on currently selected elements with 1.2x radius padding

Rest Detection

Camera detects when movement stops (0.25 threshold) to trigger optimizations

​
Rendering Engine

​
PostproductionRenderer

The viewer uses an advanced PostproductionRenderer that provides enhanced visual quality through post-processing effects: 
world.renderer = new OBF.PostproductionRenderer(components, viewport);
const { postproduction } = world.renderer;

postproduction.enabled = true;
postproduction.customEffects.excludedMeshes.push(worldGrid.three);
postproduction.setPasses({ custom: true, ao: true, gamma: true });
postproduction.customEffects.lineColor = 0x17191c;

​
Post-Processing Effects

Enables custom post-processing pipeline for enhanced visual quality. Line rendering uses dark color (0x17191c) for edge detection.
Adds realistic shadows in corners and crevices where ambient light is occluded, enhancing depth perception.
Ensures accurate color representation by correcting the gamma curve for proper display output.

​
Scene Configuration

The viewer creates a complete world environment with scene, camera, and renderer: 
const world = worlds.create<
  OBC.SimpleScene,
  OBC.OrthoPerspectiveCamera,
  OBF.PostproductionRenderer
>();
world.name = "Main";

world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null;

​
World Grid

A customizable grid system helps with spatial orientation: 
const worldGrid = components.get(OBC.Grids).create(world);
worldGrid.material.uniforms.uColor.value = new THREE.Color(0x424242);
worldGrid.material.uniforms.uSize1.value = 2;
worldGrid.material.uniforms.uSize2.value = 8;
  • Grid Color: Dark gray (0x424242) for subtle background reference
  • Primary Grid Size: 2 units
  • Secondary Grid Size: 8 units

​
IFC Loading

​
Supported Loading Methods

The viewer supports multiple ways to load IFC models:
1

Standard IFC Loading

Load complete IFC files using the IfcLoader component. Files are parsed, processed, and rendered in the 3D scene.
2

Streaming IFC Loading

For large models, the IfcStreamer loads geometry progressively with level-of-detail (LOD) optimization.

​
IFC Loader Configuration

const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

​
IFC Streamer for Large Models

The streaming loader optimizes performance for large buildings: 
const tilesLoader = components.get(OBF.IfcStreamer);
tilesLoader.world = world;
tilesLoader.culler.threshold = 10;
tilesLoader.culler.maxHiddenTime = 1000;
tilesLoader.culler.maxLostTime = 40000;
Performance Optimization: The culler automatically hides geometry outside the viewport with a threshold of 10 units, hiding objects after 1 second and removing them from memory after 40 seconds.

​
Model Processing Pipeline

When an IFC model is loaded, the system automatically processes it through several stages: 
fragments.onFragmentsLoaded.add(async (model) => {
  if (model.hasProperties) {
    await indexer.process(model);
    classifier.byEntity(model);
  }

  if (!model.isStreamed) {
    for (const fragment of model.items) {
      world.meshes.add(fragment.mesh);
    }
  }

  world.scene.three.add(model);

  if (!model.isStreamed) {
    setTimeout(async () => {
      world.camera.fit(world.meshes, 0.8);
    }, 50);
  }
});
1

Property Indexing

The IfcRelationsIndexer processes the model to extract IFC relationships and properties for quick access.
2

Entity Classification

The Classifier organizes elements by their IFC entity types (walls, slabs, beams, etc.).
3

Mesh Registration

All fragment meshes are added to the world for rendering and interaction.
4

Auto-Framing

The camera automatically fits to show the entire model after a 50ms delay.

​
Supported IFC Types

The viewer processes and displays all standard IFC entity types, with special handling for:

Structural Elements

  • IFCWALL / IFCWALLSTANDARDCASE
  • IFCSLAB
  • IFCBEAM
  • IFCCOLUMN

Spatial Structure

  • IFCBUILDINGSTOREY
  • IFCBUILDING
  • IFCSITE
  • IFCSPACE

Materials & Properties

  • IFCMATERIAL
  • IFCPROPERTYSET
  • IFCELEMENTQUANTITY
  • IFCRELASSOCIATESMATERIAL

​
Performance Optimization

​
Culling System

The viewer implements frustum culling to improve performance: 
const culler = components.get(OBC.Cullers).create(world);

world.camera.controls.restThreshold = 0.25;
world.camera.controls.addEventListener("rest", () => {
  tilesLoader.cancel = true;
  tilesLoader.culler.needsUpdate = true;
});
The culling system only updates when the camera stops moving (rest threshold: 0.25), reducing unnecessary computations during navigation.

​
Responsive Viewport

The viewer automatically adjusts to window size changes: 
const resizeWorld = () => {
  world.renderer?.resize();
  world.camera.updateAspect();
};

viewport.addEventListener("resize", resizeWorld);
The viewer provides intuitive navigation similar to professional CAD applications:

Orbit

Left Mouse Drag: Rotate the camera around the model center

Pan

Right Mouse Drag or Middle Mouse Drag: Move the camera parallel to the view plane

Zoom

Mouse Wheel: Zoom in and out relative to the cursor position

Fit View

Fit Model Button: Automatically frame all models in the viewport

​
Visual Quality Features

High-Resolution Rendering

Native WebGL rendering with anti-aliasing for smooth edges and professional appearance

Realistic Lighting

Ambient occlusion simulates realistic soft shadows in model crevices and corners

Edge Detection

Custom edge rendering highlights model geometry for better clarity

Transparent Background

Clean visualization with null background allows focus on the model

​
Best Practices

File Size Considerations: For IFC files larger than 100MB, use the streaming loader for optimal performance. The standard loader works best for files under 50MB.
Navigation Tip: Use the “Fit Model” button after loading a new IFC file to ensure the entire model is visible in the viewport.
The viewer automatically processes IFC properties and relationships in the background, enabling advanced features like element selection and AI analysis.

Build docs developers (and LLMs) love

Get started for freeTalk to us