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