Developer

Appearance

General ​

start ​

start([callback: Function])

Start the model given by the user. Callback will be invoked with no parameter.

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

stop ​

stop([callback: Function])

Stops/pauses the viewer, a call to start will resume the viewer. Callback will be invoked with no parameter.

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

startRender ​

startRender([callback: Function])

Starts render loop for viewer's engine

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

stopRender ​

stopRender([callback: Function])

Stops render loop for viewer's engine

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

getScreenshot ​

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

This function lets you take a screenshot of the viewer. The width and height arguments are the width and the height of the screenshot. The callback will be called with one parameter and will be a base64 encoded image.

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

setCanvasFocus ​

setCanvasFocus([callback: Function])

This function lets you set focus on viewer's canvas

js
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.

js
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.

js
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.

js
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.

js
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

js
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.

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

setSkyColor ​

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

Sets a skycolor in the viewer.

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

getGroundColor ​

getGroundColor(callback: Function)

Get current groundcolor from the viewer.

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

setGroundColor ​

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

Sets a groundcolor in the viewer.

js
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.

js
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.

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

startAR ​

startAR()

Displays the AR popup.

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