Loft Reference Guide

The easiest way to add an Ocavu Experience to your website is by declaring data-ocavu- attributes on certain HTML elements to embed an experience launcher. (How do I embed an Experience Launcher Button?) However, it is sometimes necessary to take a more fine-grained approach and use code to launch the experience at a specific place or time.

The Ocavu Web SDK exposes the following methods for more controlled usage:

• whenReady
• checkKey
• launchExperience
• endExperience

ocavu.whenReady

ocavu.whenReady(function () {
    console.log('Ready to run ocavu.launchExperience');
});

This method accepts a callback function and is available for the convenience of ensuring that the Web SDK is fully initialized before executing desired behavior.

ocavu.checkKey

var key = 'Yamaha_Baby_Grand_Piano';
ocavu.checkKey(key, function (exists) {
    if (exists) {
        ocavu.launchExperience('view', {modelKey: key});
    } else {
        console.log('Model key does not exist: ' + key);
    }
});

This method accepts a model key and checks whether or not that key exists and is published within your Ocavu Portal account. The second argument is a callback function that will be passed a boolean, indicating whether the model key was found or not.

ocavu.launchExperience

ocavu.launchExperience('view', {modelKey: 'Yamaha_Baby_Grand_Piano'}, {experienceTarget: 'overlay'});

This method accepts three arguments:

1. Experience Key If a custom experience is desired, use the configured experience key here. Otherwise, use 'view' for the typical experience.
2. Experience Context This argument is an object containing the necessary information for the experience to run. Typically, modelKey is required, but additional options are available depending on the experience type and template customizations.
3. Launch Options This argument is optional, but when specified it is an object that controls how the experience is launched.

Requesting a specific viewer engine

ocavu.launchExperience('view', {modelKey: 'Yamaha_Baby_Grand_Piano', requestedEngine: 'webgl'});

To request a specific viewer engine, add requestedEngine to the experience context with one of the following values:

• webgl
• quicklook
• sceneviewer

Launching the experience within a container

var context = {modelKey: 'Yamaha_Baby_Grand_Piano', requesteEngine: 'webgl'};
var options = {experienceTarget: document.getElementById('container')};
// Or use a query selector:
// var options = {experienceTarget: '#container'};
ocavu.launchExperience('view', context, options);

To launch the experience iframe within a container, add experienceTarget to the launch options with a value of either an HTMLNode or a Query Selector.

ocavu.endExperience

var session_id = ocavu.launchExperience('view', {modelKey: 'Yamaha_Baby_Grand_Piano'});
ocavu.endExperience(session_id);

Use this method to manually quit a webgl experience. quicklook and sceneviewer cannot be closed this way, and usually you should let the user close out of the webgl experience themselves.