General

load

load(viewerId: string, [callback: Function])

Load a viewer with the given viewer ID. This function is typically called internally during the initialization process, but can also be used to load a different viewer instance.

The viewerId is the unique identifier of the viewer to load.

api.load('123456789123456789', function() {
  console.log('Viewer loaded successfully');
});

---

start

start([callback: Function])

Start the product viewer. The callback will be invoked with no parameters.

api.start(function() {
  console.log('Viewer started');
});

---

stop

stop([callback: Function])

Stops/pauses the viewer. A call to start will resume the viewer. The callback will be invoked with no parameters.

api.stop(function() {
  console.log('Viewer stopped');
});

---

startRender

startRender([callback: Function])

Start the render loop for the viewer's engine.

api.startRender(function() {
  console.log('Render loop started');
});

---

stopRender

stopRender([callback: Function])

Stop the render loop for the viewer's engine.

api.stopRender(function() {
  console.log('Render loop stopped');
});

---

getScreenshot

getScreenshot(size: [width: number, height: number] | number, callback: Function, [fileType: string])

This function allows you to take a screenshot of the viewer. The width and height arguments specify the dimensions of the screenshot. The optional fileType parameter accepts "jpg", "png", or "webp" (defaults to "png"). The callback will be called with one parameter containing a base64-encoded image.

// Default PNG format
api.getScreenshot([1920, 1080], function(base64) {
  console.log(base64); // Result: 'data:image/png;base64,/9j/4AAQ...'
});

// Explicit JPG format
api.getScreenshot([1920, 1080], function(base64) {
  console.log(base64); // Result: 'data:image/jpeg;base64,/9j/4AAQ...'
}, 'jpg');

// PNG format with transparency support
api.getScreenshot([1920, 1080], function(base64) {
  console.log(base64); // Result: 'data:image/png;base64,iVBORw0KG...'
}, 'png');

// Single number size with File type
api.getScreenshot(1920, function(base64) {
  console.log(base64); // Result: 'data:image/png;base64,iVBORw0KG...'
}, 'png');

---

setCanvasFocus

setCanvasFocus([callback: Function])

This function lets you set focus on viewer's canvas

api.setCanvasFocus(function () {
  console.log('Focus set');
});

---

pickColor

pickColor(position: [x: number, y: number], [callback: Function])

Returns the color in the 3D viewer for the given screen coordinates. The callback returns a hex-color string.

api.pickColor([200, 300], function (colorHex) {
  console.log(colorHex); // Result: #ffd700
});

---

getWorldToScreenCoordinates

getWorldToScreenCoordinates(coords: [x: number, y: number, z: number], [callback: Function])

Returns the screen coordinates for the given world coordinates.

api.getWorldToScreenCoordinates([1, 1, 1], function (coords) {
  console.log(coords); // Result: [100, 100]
});

---

getScreenToWorldCoordinates

getScreenToWorldCoordinates(coords: [x: number, y: number], [callback: Function])

Returns the world coordinates for the given screen coordinates. The first hit point in the scene.

api.getScreenToWorldCoordinates([100, 100], function (coords) {
  console.log(coords); // Result: [1, 1, 1]
});

---

getBackground

getBackground(callback: Function)

Get current background type and value from the viewer.

api.getBackground(function (options) { // Color
  console.log('Background is', options.color); // Result: #ffd700
});
api.getBackground(function (options) { // Url
  console.log('Background is', options.url); // Result: https://via.placeholder.com/600
});

---

setBackground

setBackground(options: object, [callback: Function])

Sets a background image or color in the viewer.

Options: color or url

api.setBackground({color: '#ffd700'}, function () {
  console.log('Background changed');
});
api.setBackground({url: 'https://via.placeholder.com/600'}, function () {
  console.log('Background changed');
});

---

getSkyColor

getSkyColor(callback: Function)

Get current skycolor from the viewer.

api.getSkyColor(function (color) {
  console.log('Skycolor is', color); // Result: #ffd700
});

---

setSkyColor

setSkyColor(color: string, [callback: Function])

Sets a skycolor in the viewer.

api.setSkyColor('#ffd700', function () {
  console.log('Skycolor changed');
});

---

getGroundColor

getGroundColor(callback: Function)

Get current groundcolor from the viewer.

api.getGroundColor(function (color) {
  console.log('Groundcolor is', color); // Result: #ffd700
});

---

setGroundColor

setGroundColor(color: string, [callback: Function])

Sets a groundcolor in the viewer.

api.setGroundColor('#ffd700', function () {
  console.log('Groundcolor changed');
});

---

getEnvironment

getEnvironment(callback: Function)

Returns information about the HDR environment in the viewer.

intensity - The environment intensity rotation - The rotation in degrees

Work in Progress

This function is currently not available in the API, but will be available soon.

api.getEnvironment(function (options) {
  console.log('Environment intensity is ', options.intensity); // Result: 1.5
  console.log('Environment rotation is ', options.rotation); // Result: 30
});

---

setEnvironment

setEnvironment(options: object, [callback: Function])

Sets the HDR environment of the viewer.

intensity or rotation (degree)

Work in Progress

This function is currently not available in the API, but will be available soon.

api.setEnvironment({intensity: 1.0, rotation: 90}, function () {
  console.log('Environment changed');
});

---

startAR

startAR()

Displays the AR popup.

api.startAR(function() {
  console.log('Starting AR');
});