Getting Started

Use the 3D Viewer API to embed the 3D Viewer in your web applications.
Using jQuery? More information on using jQuery with the 3D Viewer here﻿.
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>
<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>
<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.
JS
bimsync.setOnLoadCallback(onViewer3dLoad);
bimsync.load();
bimsync.setOnLoadCallback(onViewer3dLoad);
bimsync.load();
﻿
4. Create a 3D Viewer instance
Provide the div element and an options object to the constructor method.
JS
const viewer3dElement = document.getElementById("viewer-3d");
const viewer3dOptions = {
  textRenderMode: "dom",
};
const viewer3d = new bimsync.viewer3d.Viewer3D(viewer3dElement, viewer3dOptions);
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.
JS
viewer3d.loadModelsFromToken(tokenUrl).then(() => {
  const objects = viewer3d.getObjects();
  if (objects.length > 0) {
    viewer3d.select(objects[0].id);
  }
});
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>
<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﻿.
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.
﻿

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

Updated 28 Aug 2024

Did this page help you?

3D Viewer SDK

BIM Models