OpenBIM Viewer

A modern, high-performance IFC model viewer built with React, TypeScript, and @thatopen/components. This application allows users to upload, visualize, and interact with Building Information Models (BIM) directly in the browser.

Features

🏗️ Advanced IFC Visualization

• Fast Loading: Utilizes web-ifc and fragment rendering for efficient handling of large models.
• Lighting: Optimized scene lighting (Ambient, Directional, Hemisphere) for clear model visibility.
• Camera Controls:
  • Switch between Perspective and Orthographic projection.
  • Fit View to automatically focus the camera on the entire model.

🔍 Project Explorer

• Categorized View: Browse model elements organized by their IFC type (e.g., IfcWall, IfcSlab, IfcWindow).
• Visibility Toggle: Easily show or hide entire categories by clicking the Eye icon next to the group name.
• Element Selection: Click any item in the tree to select and highlight it in the 3D view.

📋 Properties Panel

• Detailed Metadata: Inspect identification data (Name, Type, Express ID) for any selected element.
• Raw Properties: View all raw IFC properties associated with the element.
• Contextual Info: Automatically updates when an element is selected in the 3D view or Project Explorer.

🛠️ Toolbar Tools

• Screenshot: Capture high-quality PNG images of the current 3D view with a single click.
• Clear Selection: Quickly deselect elements to return to a neutral state.
• View Modes: Toggle between camera projections seamlessly.

Tech Stack

• Framework: React + Vite
• Language: TypeScript
• BIM Engine: @thatopen/components
• Parser: web-ifc
• Styling: TailwindCSS
• Icons: Lucide React
• State Management: Zustand

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• MPM

Installation

1. Clone the repository:

   git clone https://github.com/your-username/openbim-viewer.git
   cd openbim-viewer

2. Install dependencies:

   npm install

   Note: This will also install the necessary WASM files for web-ifc.

3. Start the development server:

   npm run dev

4. Open your browser and navigate to: http://localhost:5173

Usage Guide

1. Upload Model: Click the "Upload IFC" button and select an .ifc file from your computer.
2. Navigate:
   • Left Click + Drag: Rotate/Orbit
   • Right Click + Drag: Pan
   • Scroll: Zoom
3. Inspect: Click on any 3D element to see its properties in the Right Sidebar.
4. Manage: Use the Left Sidebar to hide specific categories (e.g., hide Roofs to see inside).
5. Capture: Use the Camera icon in the bottom toolbar to save a screenshot.

License

MIT