General

start

start([callback: Function])

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

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.

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

startRender

startRender([callback: Function])

Starts render loop for viewer's engine

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

stopRender

stopRender([callback: Function])

Stops render loop for viewer's engine

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.

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

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
});

getMinimapSize

getMinimapSize(callback: Function)

Gets current minimap size in screen pixels, if exists.

api.getMinimapSize(function (val) {
  console.log(val); // Result: [100, 100]
});

showMinimap

showMinimap([callback: Function])

Show the minimap

api.showMinimap(function (val) {
  console.log('Minimap visible');
});

hideMinimap

hideMinimap([callback: Function])

Hide the minimap

api.hideMinimap(function (val) {
  console.log('Minimap hidden');
});

setQuality

setQuality(level: string, [callback: Function])

Set the quality level from 3d scene and reload the viewer after that automatically.

api.setQuality('HD', function () {
  console.log('Level changed');
});

muteAmbientSound

muteAmbientSound([callback: Function])

Mute the ambient sound in the background.

api.muteAmbientSound(function () {
  console.log('Ambient sound muted');
});

unmuteAmbientSound

unmuteAmbientSound([callback: Function])

Unmute the ambient sound in the background.

api.unmuteAmbientSound(function () {
  console.log('Ambient sound unmuted');
});

muteAllSound

muteAllSound([callback: Function])

Mute all sounds in the scene.

api.muteAllSound(function () {
  console.log('All sounds muted');
});

unmuteAllSound

unmuteAllSound([callback: Function])

Unmute all sounds in the scene.

api.unmuteAllSound(function () {
  console.log('All sounds unmuted');
});

getVideos

getVideos(callback: Function)

Returns list of videos.

api.getVideos(function (videoIds) {
  console.log(videoIds); // Result: ['1-video', '2-video']
});

playVideo

playVideo(videoId:string, [callback: Function])

Plays selected video. The videoId is the ID of the video, which can be found via getVideos.

api.playVideo('1-video', function () {
  console.log('Video is playing');
});

pauseVideo

pauseVideo(videoId:string, [callback: Function])

Pauses selected video. The videoId is the ID of the video, which can be found via getVideos.

api.pauseVideo('1-video', function () {
  console.log('Video is paused');
});

setVideoTime

setVideoTime(videoId:string, time: number, [callback: Function])

Set current time for selected video. The videoId is the ID of the video, which can be found via getVideos. The time is new current time in seconds.

api.setVideoTime('1-video', 10, function () {
  console.log('Video current time is set to 10 sec');
});

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]
});

importMesh

importMesh(url: string, filename: string, [options: Record<string, any>], [callback: Function])

Load gltf|glb file into scene. supports animation.

arguments:

url: url where the file is located
filename: name of gltf|glb file
options: key:value object with more options
- transform: transform coordinates for the imported mesh
- skeletonsEnabled: boolean gets or sets a boolean indicating if skeletons are enabled on this scene
- playAnimation: string play named animation if existing
callback: function with arry of nodeIds as arguments

api.importMesh(
  'https://www.example.com/path/to/file/',
  'example-file.glb',
  {
      transform: [
          {
              position: [Math.random(), 0, Math.random()],
              rotation: [0, Math.random() * 2 * Math.PI, 0],
              scale: [1, 1, 1],
          }
      ],
      skeletonsEnabled: true,
      playAnimation: true,
  },
  function (result) { console.log(result) };
  );

loadAssetContainer

loadAssetContainer(url: string, filename: string, [options: Record<string, any>], [callback: Function])

Load gltf|glb file as asset container and optionally creates instances of them.

arguments:

url: url where the file is located
filename: name of gltf|glb file
options: key:value object with more options
- instanceTransforms: array of transform coordinates for the created instances
- transform: transform coordinates for the root node
- skeletonsEnabled: boolean gets or sets a boolean indicating if skeletons are enabled on this scene
- cloneMaterials: boolean defines an optional boolean that defines if materials must be cloned as well (false by default)
- doNotInstantiate: boolean defines if the model must be instantiated or just cloned
- playAnimation: string play named animation if existing
callback: function with arry of nodeIds as arguments

api.loadAssetContainer(
  'https://www.example.com/path/to/file/',
  'example-file.glb',
  {
      instanceTransforms: [
          {
              position: [Math.random(), 0, Math.random()],
              rotation: [0, Math.random() * 2 * Math.PI, 0],
              scale: [1, 1, 1],
          },
          {
              position: [Math.random(), 0, Math.random()],
              rotation: [0, Math.random() * 6, 0],
              scale: [1, 1, 1],
          },
      ],
      transform: {
        position: [Math.random(), 0, Math.random()],
        rotation: [0, Math.random() * 2 * Math.PI, 0],
        scale: [2, 2, 2],
      },
      skeletonsEnabled: true,
      cloneMaterials: false,
      doNotInstantiate: false,
      playAnimation: true,
  },
  function (result) { console.log(result) };
  );

setIdentToken

setIdentToken(identToken: string, [callback: Function])

Set an identToken for the client avatar. This will be sent around to all other avatars and can be validated. You can listen to the avatar.identToken.change Avatar-Event and call your validation.

api.setIdentToken("abcdefghijklmnopqrstuvwxyz", function (coords) {
  console.log('identToken was set');
});

setVerifiedIcon

setVerifiedIcon(avatarId: string, state: boolean, [callback: Function])

Set a verified icon for an avatar. You may want to use the identToken for validation. You can listen to the avatar.identToken.change Avatar-Event and call your validation. If you want to set it for your own avatar: avatarId can be empty ("")

api.setVerifiedIcon("avatarId", true, function (coords) {
  console.log('identToken was set');
});

complete example

// this sends your identToken to all connected avatars
api.setIdentToken("your_ident_token");

const validateAvatar = (avatar) => {
  // use your custom validation here
  let valid = !!avatar.identToken;

  api.setVerifiedIcon(avatar.id, valid);
}

api.on('avatar.enter', validateAvatar);
api.on('avatar.identToken.change', validateAvatar);

# General

# start

# stop

# startRender

# stopRender

# getScreenshot

# setCanvasFocus

# pickColor

# getMinimapSize

# showMinimap

# hideMinimap

# setQuality

# muteAmbientSound

# unmuteAmbientSound

# muteAllSound

# unmuteAllSound

# getVideos

# playVideo

# pauseVideo

# setVideoTime

# getWorldToScreenCoordinates

# getScreenToWorldCoordinates

# importMesh

# loadAssetContainer

# setIdentToken

# setVerifiedIcon

# complete example