---
title: Getting Started
slug: viewer-3d/getting-started
docTags: 
createdAt: 2024-03-01T14:08:11.718Z
---

Use the 3D Viewer API to embed the 3D Viewer in your web applications.

:::hint{type="info"}
Using **jQuery**? More information on using **jQuery** with the 3D Viewer [here](docId:18q6QATEr8draKQLdYXsl).
:::

## Installation

### 1. Add the 3D Viewer to your project

Include the 3D Viewer in your HTML file using a script tag, this will add the global `bimsync` object to the `window` object.

```html
<script src="https://api.catenda.com/js/v1/viewer3d"></script>
```

### 2. Provide a container for the 3D Viewer

Create a `div` element for attaching a 3D Viewer instance to.

```html
<div id="viewer-3d"></div>
```

### 3. Initialize the 3D Viewer API

Set a callback function and then invoke the `load` method, the 3D Viewer is ready once callback invoked.

```javascript
bimsync.setOnLoadCallback(onViewer3dLoad);
bimsync.load();
```

### 4. Create a 3D Viewer instance

Provide the `div` element and an options object to the constructor method.

```javascript
const viewer3dElement = document.getElementById("viewer-3d");
const viewer3dOptions = {
  textRenderMode: "dom"
};
const viewer3d = new bimsync.viewer3d.Viewer3D(viewer3dElement, viewer3dOptions);
```

### 5. Interact with the 3D Viewer

Call methods on the 3D Viewer instance to interact with the 3D Viewer.

```javascript
viewer3d.loadModelsFromToken(tokenUrl).then(() => {
  const objects = viewer3d.getObjects();
  if (objects.length > 0) {
    viewer3d.select(objects[0].id);
  }
});
```

## Usage

```html
<html>
  <head>
    <script src="https://api.catenda.com/js/v1/viewer3d"></script>
    <style>
      #viewer-3d {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewer-3d"></div>
    <script type="text/javascript">
      bimsync.setOnLoadCallback(onViewer3dLoad);
      bimsync.load();

      function onViewer3dLoad() {
        const projectId = "YOUR_CATENDA_PROJECT_ID";
        const token = "YOUR_3D_VIEWER_TOKEN";

        const tokenUrl = `https://api.catenda.com/v2/projects/${projectId}/viewer3d/data?token=${token}`;

        const viewer3dOptions = {
          textRenderMode: "dom"
        };
        const viewer3dElement = document.getElementById("viewer-3d");
        const viewer3d = new bimsync.viewer3d.Viewer3D(viewer3dElement, viewer3dOptions);
        viewer3d.loadModelsFromToken(tokenUrl).then(() => {
          const objects = viewer3d.getObjects();
          if (objects.length > 0) {
            viewer3d.select(objects[0].id);
          }
        });
      }
    </script>
  </body>
</html>
```

## Options

Adjust the default behavior of the 3D Viewer by providing an options object when creating a 3D Viewer instance.

### Properties

| **Name**                         | **Type**                       | **Default** | **Description**                                        |
| -------------------------------- | ------------------------------ | ----------- | ------------------------------------------------------ |
| `activeClippingPlaneBorderColor` | String or Number               | `#2AB77C`   | Sets the CSS color of the active clipping plane border |
| `antiAliasingSamples`            | Number                         | `0`         | The number of samples used for anti-aliasing           |
| `elevationSpeed`                 | Number                         | `1.5`       | The elevation speed in meters per second               |
| `enableClippingPlaneWidget`      | Boolean                        | `false`     | Enable or disable the clipping plane widget            |
| `enableTouch`                    | Boolean                        | `false`     | Enable or disable touch event interaction              |
| `fieldOfView`                    | Number                         | `60`        | Camera frustum vertical field of view in degrees       |
| `logLevel`                       | Number                         | `2`         | The level of logging used                              |
| `navigationMode`                 | String or Map\[Array\[Object]] | `orbit`     | The navigation mode used                               |
| `navigationOrbitSphereColor`     | String or Number               | `#b1d059`   | Color of the sphere in orbit navigation mode           |
| `rotationSpeed`                  | Number                         | `40`        | The rotation speed in degrees per second               |
| `selectedColor`                  | String or Number               | `#a7f555`   | Sets the CSS color of selected objects                 |
| `textRenderMode`                 | String                         | `canvas`    | The text render mode                                   |
| `translucentOpacity`             | Number                         | `0.05`      | The opacity of translucent objects                     |
| `walkSpeed`                      | Number                         | `3`         | The walking speed in meters per second                 |

**navigationMode**

The navigation mode to use. Find out more about navigation modes [here](docId\:XppNs3dnXbhsBJfaIvezv).

**logLevel**

The level of logging to display.

Valid values are:

- `0` No logging
- `1` Error
- `2` Warning
- `3` Info
- `4` Debug

**textRenderMode**

The text render mode used.

Valid values are:

- `canvas` Renders text as a texture on a sprite in the viewer canvas.
- `dom` Renders text using HTML elements producing a higher quality text.