---
title: Using jQuery
slug: viewer-3d/using-jquery
docTags: 
createdAt: 2024-03-01T14:08:11.719Z
---

Using jQuery is also supported when working with the 3D Viewer API.

For legacy reasons small differences exist in the way you interact with the 3D Viewer when using jQuery.

## Installation

### 1. Add jQuery to your project

Include jQuery in your HTML file using a script tag.

```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
```

### 2. 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>
```

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

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

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

### 4. 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();
```

### 5. Create a 3D Viewer instance

Initialize the 3D Viewer by invoking the `viewer` method on the jQuery object for the `div` where you want to attach the 3D Viewer.

```javascript
const viewer3dOptions = {
  textRenderMode: "dom"
};
$("#viewer-3d").viewer(viewer3dOptions);
```

### 6. Interact with the 3D Viewer

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

```javascript
$("#viewer-3d")
  .viewer("loadModelsFromToken", tokenUrl)
  .then(() => {
    const objects = $("#viewer-3d").viewer("getObjects");
    if (objects.length > 0) {
      $("#viewer-3d").viewer("select", objects[0].id);
    }
  });
```

## Getting Started

**Usage**

```html
<html>
  <head>
    <script src="https://api.catenda.com/js/v1/viewer3d"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></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"
        };
        $("#viewer-3d").viewer(viewer3dOptions);
        $("#viewer-3d")
          .viewer("loadModelsFromToken", tokenUrl)
          .then(() => {
            const objects = $("#viewer-3d").viewer("getObjects");
            if (objects.length > 0) {
              $("#viewer-3d").viewer("select", objects[0].id);
            }
          });
      }
    </script>
  </body>
</html>
```

## Options

The [options](#) for the 3D Viewer are the same when using jQuery.

## Methods

In general, the methods are the same when using jQuery but the way you call them is different.

```javascript
$("#viewer-3d").viewer("methodName", arg1, arg2, ...)
```

Some methods are also available under their deprecated names.

| **Method**               | **Deprecated Names**                                 |
| ------------------------ | ---------------------------------------------------- |
| `captureScreenshot`      | `screenshot`                                         |
| `getBoundingBox`         | `boundingBox`, `boundingbox`                         |
| `getClippingPlanes`      | `clippingPlanes`, `clippingplanes`                   |
| `getModels`              | `modelInfo`                                          |
| `getObjectColors`        | `color`                                              |
| `getObjects`             | `objectInfo`, `objectinfo`                           |
| `getRenderSettings`      | `renderSettings`                                     |
| `getViewpoint`           | `viewpoint`                                          |
| `loadModelsFromToken`    | `loadUrl`, `loadurl`                                 |
| `resetObjectColors`      | `resetColors`, `resetcolors`                         |
| `setClippingPlanes`      | `clippingPlanes`, `clippingplanes`                   |
| `setObjectColors`        | `color`                                              |
| `setPlaneWidgetViewport` | `clippingPlaneWidgetViewport`, `planeWidgetViewport` |
| `setPointBudget`         | `pointBudget`                                        |
| `setRenderSettings`      | `renderSettings`                                     |
| `setTransform`           | `transformModel`, `transformmodel`                   |
| `setTransitionSettings`  | `transitionSettings`                                 |
| `setViewpoint`           | `viewpoint`                                          |
| `unloadModel`            | `unloadmodel`                                        |

It also possible to use most methods as both a getter or a setter.

Use a method as a getter by passing a callback as the last argument.

### getClippingPlanes

Also available under the deprecated method names `clippingPlanes` and `clippingplanes`.

```javascript
function onClippingPlanes(clippingPlanes) {
  console.log("clippingPlanes: ", clippingPlanes);
}

$("#viewer-3d").viewer("clippingPlanes", null, onClippingPlanes);
```

### getObjectColors

Also available under the deprecated method name `color`.

```javascript
function onObjectColors(objectColors) {
  console.log("objectColors: ", objectColors);
}
const objectIds = ["object-1", "object-2"];

$("#viewer-3d").viewer("color", null, objectIds, onObjectColors);
```

### getRenderSettings

Also available under the deprecated method name `renderSettings`.

```javascript
function onRenderSettings(renderSettings) {
  console.log("renderSettings: ", renderSettings);
}

$("#viewer-3d").viewer("renderSettings", null, onRenderSettings);
```

### getViewpoint

Also available under the deprecated method name `viewpoint`.

```javascript
function onViewpoint(viewpoint) {
  console.log("viewpoint: ", viewpoint);
}

$("#viewer-3d").viewer("viewpoint", null, onViewpoint);
```

## Events

Callbacks for 3D Viewer events may have different signatures when using jQuery. Each event documentation page details any differences.