BimCT SDK / WebGL2 Viewer
    Preparing search index...

    BimCT Getting Started - TypeScript + Vite

    A minimal example demonstrating how to integrate the BimCT Viewer into a TypeScript + Vite application.

    Download the complete getting started project:

    Download bimct-getting-started.zip

    Extract the zip file and follow the setup instructions below.

    • Node.js (v16 or higher)
    • npm
    • A BimCT domain API key (contact Nomitech for a free trial)

    Create a .npmrc file in your project root (or in your home directory ~/.npmrc):

    @nomitech:registry=https://npm.nomitech.com/

    Login to the Nomitech npm registry:

    Contact Nomitech to request npm registry credentials.

    Once you have your credentials, login using:

    npm login --registry=https://npm.nomitech.com/ --scope=@nomitech

    When prompted, enter the username and password provided by Nomitech.

    This will authenticate you with the Nomitech registry and allow you to install the @nomitech/bimct-viewer package.

    npm install

    This will automatically run the postinstall script to copy required assets (WASM files, Cesium assets, fonts) to the public folder.

    Open src/main.ts and replace <PUT_YOUR_DOMAIN_API_KEY_HERE> with your actual domain key:

    const options: RendererInitializationOptions = {
      key: "your-domain-api-key-here",
      // ... other options
    };

    The zip file already contains a demo Model for you but you can place your own .bimct model file in the bimct_files folder at the project root:

    bimct-getting-started/
       bimct_files/
          YourModel.bimct

    Update the model path in src/main.ts:

    await renderer.loadModelFromUrl("/bimct_files/YourModel.bimct");

    If you want to convert your own file to .bimct file:

    You can convert your IFC, Revit, or other BIM files to .bimct format using one of these options:

    1. Online Converter (Demo up to 20MB files): https://bimct-converter.nomitech.com/converter/demo/upload-new

      • Quick and easy for testing
      • ⚠️ Warning: This demo server has limited resources (2GB RAM). Large or complex models may cause the conversion to fail. Use only for small to medium-sized files.

    2. Converter API: Create your own converter instance for better performance and reliability

    npm run dev

    Open your browser to http://localhost:5173

    • npm run dev - Start development server
    • npm run build - Build for production
    • npm run preview - Preview production build
    • npm run sync-assets - Manually sync BimCT assets to public folder
    • npm run clean - Remove generated assets and build files
    bimct-getting-started/
    ├── bimct_files/           # Place your .bimct model files here
    ├── public/                # Static assets (generated)
    │   ├── assets/           # BimCT viewer assets (WASM, Cesium, fonts)
    │   ├── bimct_files/      # Copied model files
    │   ├── bimct-viewer.css  # BimCT viewer styles
    │   └── favicon.ico       # BimCT favicon
    ├── scripts/
    │   └── prepare-bimct-assets.cjs  # Asset copying script
    ├── src/
    │   ├── main.ts           # Main application entry point
    │   ├── style.css         # Application styles
    │   └── vite-env.d.ts     # TypeScript declarations
    ├── index.html            # HTML entry point
    ├── package.json
    ├── tsconfig.json
    └── vite.config.ts

    This example demonstrates:

    1. Basic Viewer Setup - Initialize and configure the BimCT WebGL2 renderer
    2. Model Loading - Load .bimct files from a URL
    3. Custom Context Menu - Add custom menu items with the following features:
      • Select elements by class (e.g., all walls)
      • Save selected element IDs to browser localStorage
      • Load previously saved selections
      • Take PNG snapshots of the current view
    4. Event Handling - Subscribe to selection and model loaded events
    5. Asset Management - Proper setup of WASM, Cesium, and font assets

    API Documentation & Resources

    Full documentation: RendererInitializationOptions

    • renderer.selectByClass(className) - Select elements by class name
    • renderer.getHighlightedState() - Get currently highlighted elements
    • renderer.setHighlightedState(state) - Restore highlighted elements
    • renderer.takeSnapshot(width?, height?) - Capture screenshot
    • renderer.loadModelFromUrl(url) - Load a BIM model
    • selectionChangeEvent - Fires when element selection changes
    • modelLoadedEvent - Fires when model finishes loading
    • elementClickEvent - Fires when an element is clicked

    Run npm run sync-assets to manually copy assets to the public folder.

    Ensure the bimct-viewer.css is loaded from the root path (/bimct-viewer.css in index.html).

    If using BimCT viewer version 190+, you may need to downgrade to version 181 or wait for a package fix. See package.json to change versions.

    • Verify your .bimct file is in the bimct_files folder
    • Check the console for 404 errors
    • Ensure the path in loadModelFromUrl() matches your file location

    This example is provided for demonstration purposes. The BimCT Viewer library requires a valid license key from Nomitech.

    • The postinstall script automatically copies required assets after npm install
    • WASM preference can be changed in main.ts ('wasm32', 'wasm64', or 'wasm-threads32')
    • The viewer requires a valid domain API key to function
    • Generated assets in public/ folder are git-ignored and recreated on install

    Settings

    Member Visibility

    On This Page

    BimCT Getting Started - TypeScript + Vite