Skip to main content

​
Prerequisites

Before you begin, ensure you have:
  • Node.js 16+ installed
  • An OpenAI API key (for AI querying features)
  • An IFC file to test with

​
Quick Setup

1

Clone the repository

git clone <your-repository-url>
cd bim-app
2

Install dependencies

npm install
This installs all required packages including:
  • Three.js and ThatOpen components for 3D rendering
  • OpenAI SDK for AI queries
  • Chart.js for data visualization
  • TypeScript and Vite build tools
3

Configure OpenAI API key

Create a .env file in the project root:
echo "VITE_OPENAI_API_KEY=your_api_key_here" > .env
Never commit your .env file to version control. It’s already included in .gitignore.
4

Start the development server

npm run dev
The app will be available at http://localhost:5173 (or another port if 5173 is in use).

​
Loading Your First IFC Model

Once the application is running in your browser:
1

Navigate to the Import tab

Click on the Import tab in the toolbar at the bottom of the viewport.You’ll see three import options:
  • IFC: Load standard IFC files
  • Fragments: Load pre-converted fragment files
  • Tiles: Load streamed BIM tiles for large models
2

Click the IFC button

Click the IFC button to open the file picker.
// Behind the scenes, the app uses the IfcLoader component
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

const buffer = new Uint8Array(fileArrayBuffer);
const model = await ifcLoader.load(buffer);
3

Select your IFC file

Choose an IFC file from your computer. The app supports:
  • IFC2x3
  • IFC4
  • IFC4.3
The model will automatically:
  • Convert to optimized fragments
  • Parse IFC properties and relationships
  • Render in the 3D viewport
  • Fit to camera view
4

Explore the model

Use mouse controls to navigate:
  • Left click + drag: Rotate camera
  • Right click + drag: Pan
  • Scroll wheel: Zoom in/out
  • Double-click element: Select and view properties

​
Making Your First AI Query

Now let’s use the AI-powered querying feature:
1

Load IFC for AI processing

Navigate to the Load to tab in the toolbar.Click the Add button and select your IFC file again. This loads the file content as text for AI processing.
// The LoadIfcFile component reads the file as text
const reader = new FileReader();
reader.onload = function(event) {
  const fileContent = event.target?.result;
  chatGpt.fileData = fileContent; // Store for AI queries
};
reader.readAsText(file);
This step is separate from 3D visualization to optimize performance and prepare data for AI analysis.
2

Access the AI Panel

The AI panel interface allows you to write natural language questions about your model.Example queries you can try:
  • “How many walls are in the building?”
  • “What materials are used for slabs?”
  • “List all elements on the ground floor”
  • “What is the building height?”
3

Submit your query

Type your question in the text input field and click the Querry button.
// The ChatGpt component processes your query
const response = await chatGpt.sendQuerryToGPT({
  message: "How many walls are in the building?",
  fileData: ifcFileContent
});

// Uses GPT-3.5-turbo with IFC-specific context
model: "gpt-3.5-turbo",
messages: [
  { 
    role: "system",
    content: "Based on the given data answer questions about ifc file..."
  },
  { 
    role: "user", 
    content: `Here is the file content:\n${fileData}\n\nQuestion: ${message}`
  }
]
4

View the AI response

The response appears in the text area below your query.The AI analyzes the IFC entities including:
  • IFCWALL and IFCWALLSTANDARDCASE
  • IFCSLAB
  • IFCBEAM
  • IFCMATERIAL
  • IfcBuildingStorey
  • IfcRelAssociatesMaterial
  • IfcRelContainedInSpatialStructure
For best results, ask specific questions about element counts, properties, or relationships.

​
Exploring Selection Tools

The Selection tab provides powerful element interaction: 
// Select elements in the viewport
const highlighter = components.get(OBF.Highlighter);
highlighter.setup({ world });
highlighter.zoomToSelection = true; // Auto-zoom to selected elements
Available tools:
  • Camera controls: Switch between orthographic and perspective views
  • Element selection: Click to select and view detailed properties
  • Measurement tools: Measure distances, areas, and angles
  • Custom selections: Save groups of elements for later analysis

​
Viewing Project Information

Click the Project tab in the left panel to view:
  • Model name and metadata
  • IFC schema version
  • Building hierarchy (Building → Storey → Space)
  • Total element counts by type
  • Loaded fragments information
// The app automatically indexes relationships
const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);

// Classify elements by entity type
const classifier = components.get(OBC.Classifier);
classifier.byEntity(model);

​
Working with Large Models

For large IFC files (>100MB), use the Tiles streaming option:
1

Pre-process your IFC

Convert large IFC files to tiled format using ThatOpen’s processing tools.
2

Load tiles

Click Tiles in the Import tab and select the directory containing:
  • {model}-processed.json (geometry data)
  • {model}-processed-properties.json (property data)
  • Individual tile fragments
const tilesLoader = components.get(OBF.IfcStreamer);
tilesLoader.world = world;
tilesLoader.culler.threshold = 10;
tilesLoader.culler.maxHiddenTime = 1000;
3

Benefit from streaming

Only visible tiles are loaded, enabling smooth performance even with massive models.

​
Analyzing with Charts

The ChartData component provides analytics: 
const chartData = components.get(ChartData);

// Get element counts by type
const entityData = await chartData.getAllEntitiesOfType();
// Returns: [{elementType: "IfcWall", expressIds: [...], color: "..."}, ...]

// Get elements by building storey
const levelData = await chartData.getPropertiesOfSpecificLevel();
// Returns storey-based breakdown for pie charts

​
Next Steps

Installation Guide

Learn about advanced configuration and troubleshooting

API Reference

Explore the component API in detail
Pro tip: Save frequently used models as Fragments (.zip format) for instant loading without IFC conversion overhead.

Build docs developers (and LLMs) love

Get started for freeTalk to us