Syyclops IFC Viewer

A simple, open-source web viewer for IFC (Industry Foundation Classes) building models. Upload an .ifc file and explore it in 3D — orbit, zoom, hover, and select elements.

Built on @thatopen/components and Three.js.

Getting Started

# Install dependencies
bun install

# Start the dev server
bun run dev

Open http://localhost:4000 and drag in an IFC file.

Project Structure

viewer/
├── apps/web/              # React web app
├── packages/ifc-viewer/   # Reusable IFC viewer package
└── tooling/tsconfig/      # Shared TypeScript configs

@syyclops/ifc-viewer

The viewer package can be used independently in any React project:

import { ViewerProvider, Viewer, useViewer } from "@syyclops/ifc-viewer"

function App() {
  return (
    <ViewerProvider config={{ backgroundColor: "#1c1b18", gridEnabled: true }}>
      <Viewer />
    </ViewerProvider>
  )
}

Load a model using the useViewer hook:

const { loadModel } = useViewer()

const buffer = await file.arrayBuffer()
await loadModel(buffer, file.name, (progress) => {
  console.log(`${Math.round(progress * 100)}%`)
})

Features

• IFC file loading with progress tracking
• Orbit, first-person, and plan camera modes
• Element hover and selection highlighting
• Multi-select with Ctrl/Cmd+click
• Orientation gizmo
• Floor plan extraction
• Drag-and-drop file upload

Tech Stack

• Bun — runtime & package manager
• React 19 — UI
• Vite — build tool
• Three.js — 3D rendering
• @thatopen/components — BIM engine
• Biome — linting & formatting