Getting started ​

Introduction ​

The BIMData Viewer is a tool for interacting with models of different formats like :

  • IFC
  • Image (PDF, PNG, JPG)
  • DWG
  • DXF
  • Point Cloud (PLY, LAS, LAZ).

Each model format is handled by its own native built-in viewer and interactions include display, navigation, measurement and annotation.

The BIMData Viewer is binded to the BIMData API and you can directly upload models using it or using the BIMData platform.

The UI can be customized to organize the workspace as you need and a flexible javascript API using Vue 3 allows to create custom plugins to match your business perfectly. However, you don't need to master Vue.js to develop a plugin and you can still update the DOM with jQuery if you like!

Guide
🗺️
The guide walks you through every aspect of the BIMDataViewer in full detail.
Examples
🏗️
A series of practical examples to help you learn how to use the BIMDataViewer.
Reference
📚
The detailed API reference of the BIMDataViewer.

Installation ​

You can directly download the BIMDataViewer from a CDN or you can install the @bimdata/viewer package using NPM.

html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>BIMDataViewer - Quick start</title>
  </head>

  <body>
    <div style="height: 100vh;">
      <div id="viewer"></div>
    </div>

    <script type="module">
      import makeBIMDataViewer from "https://cdn.jsdelivr.net/npm/@bimdata/viewer@latest";

      const bimdataViewer = makeBIMDataViewer({
        api: {
          // demo identifications
          modelIds: [15097],
          cloudId: 10344,
          projectId: 237466,
          accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
        },
      });

      bimdataViewer.mount("#viewer");
    </script>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>BIMDataViewer - Quick start</title>
  </head>

  <body>
    <div style="height: 100vh;">
      <div id="viewer"></div>
    </div>

    <script type="module">
      import makeBIMDataViewer from "@bimdata/viewer"; // bundler needed

      const bimdataViewer = makeBIMDataViewer({
        api: {
          // demo identifications
          modelIds: [15097],
          cloudId: 10344,
          projectId: 237466,
          accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
        },
      });

      bimdataViewer.mount("#viewer");
    </script>
  </body>
</html>