# Getting started

# Installation

You can quickly launch the BIMData Viewer with demo identifications.

# Using `<script>` tag

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>BIMDataViewer - Quick start</title>
    <script src="https://cdn.jsdelivr.net/npm/@bimdata/viewer@1.10.2"></script>
  </head>

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

    <script>
      const bimdataViewer = makeBIMDataViewer({
        api: {
          modelIds: [15097],
          cloudId: 10344,
          projectId: 237466,
          accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
        },
      });

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

# Using npm

Install it using npm :

npm i @bimdata/viewer

And import it with ES module :

import makeBIMDataViewer from "@bimdata/viewer";

Usage in Vue.js component :

<template>
  <div class="viewer-container">
    <div id="viewer"></div>
  </div>
</template>

<script>
import makeBIMDataViewer from "@bimdata/viewer";

export default {
  mounted() {
    const bimdataViewer = makeBIMDataViewer({
      api: {
        modelIds: [15097],
        cloudId: 10344,
        projectId: 237466,
        accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
      },
    });

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

<style>
.viewer-container {
  height: 100vh;
}
</style>

# Use your own models

To use your own models on the BIMData Viewer, you first need to upload them using the BIMData API.

Then, you can display them on the viewer using their identifications :

const bimdataViewer = makeBIMDataViewer({
  api: {
    modelIds: [XXX, XXX], // Your model ids
    cloudId: XXX, // Your cloud id
    projectId: XXX, // Your project id
    accessToken: XXX, // Your access token
    apiUrl: XXX, // The BIMData API URL you use
  },
});

bimdataViewer.mount("#viewer");

# Disable native plugins

UI elements like plugins, viewer version and BIMData logo can be configured. To do so, use the makeBIMDataViewer function configuration object.

Here is an example to get an empty 3d viewer :

const viewer = makeBIMDataViewer({
  api: {
    // ...
  },
  ui: {
    version: false,
    bimdataLogo: false,
  },
  plugins: {
    bcf: false,
    fullscreen: false,
    measure3d: false,
    projection: false,
    search: false,
    section: false,
    "structure-properties": false,
    viewer3d: {
      navCube: false,
      help: false,
      modelLoader: "hidden",
    },
    "viewer3d-parameters": false,
    "window-split": false,
  }
});

The result :

Viewer with one window empty

TIP

To see all the UI configuration possibilities, see the viewer UI documentation.

← Introduction Introduction →