Using jQuery

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>
<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>
<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>
<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.
JS
bimsync.setOnLoadCallback(onViewer3dLoad);
bimsync.load();
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.
JS
const viewer3dOptions = {
  textRenderMode: "dom",
};
$("#viewer-3d").viewer(viewer3dOptions);
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.
JS
$("#viewer-3d")
  .viewer("loadModelsFromToken", tokenUrl)
  .then(() => {
    const objects = $("#viewer-3d").viewer("getObjects");
    if (objects.length > 0) {
      $("#viewer-3d").viewer("select", objects[0].id);
    }
  });
$("#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>
<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.
JS
$("#viewer-3d").viewer("methodName", arg1, arg2, ...)
$("#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.
JS
function onClippingPlanes(clippingPlanes) {
  console.log("clippingPlanes: ", clippingPlanes);
}

$("#viewer-3d").viewer("clippingPlanes", null, onClippingPlanes);
function onClippingPlanes(clippingPlanes) {
  console.log("clippingPlanes: ", clippingPlanes);
}

$("#viewer-3d").viewer("clippingPlanes", null, onClippingPlanes);
﻿
getObjectColors
Also available under the deprecated method name color.
JS
function onObjectColors(objectColors) {
  console.log("objectColors: ", objectColors);
}
const objectIds = ["object-1", "object-2"];

$("#viewer-3d").viewer("color", null, objectIds, onObjectColors);
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.
JS
function onRenderSettings(renderSettings) {
  console.log("renderSettings: ", renderSettings);
}

$("#viewer-3d").viewer("renderSettings", null, onRenderSettings);
function onRenderSettings(renderSettings) {
  console.log("renderSettings: ", renderSettings);
}

$("#viewer-3d").viewer("renderSettings", null, onRenderSettings);
﻿
getViewpoint
Also available under the deprecated method name viewpoint.
JS
function onViewpoint(viewpoint) {
  console.log("viewpoint: ", viewpoint);
}

$("#viewer-3d").viewer("viewpoint", null, onViewpoint);
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.
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
Updated 07 Jun 2024
Did this page help you?
Changelog
Viewer Widget