---

Commands

The following commands are available for our interactive embeds through both the jQuery and the basic JavaScript APIs:

fullScreen

Toggle the player fullscreen:

$('#my-clara-scene').clara('fullScreen');

script

Execute a script on the scene:

var script = function(ctx) {
  ctx('%Objects').addNode('My Light', 'Light');
};
$('#my-clara-scene').clara('script', {fn: script});

frame

Frame the entire scene (sets the camera to center and show all objects):

$('#my-clara-scene').clara('frame');

assignMaterial

This command will import a material into the scene, and assign it to the desired nodes.

$('#my-clara-scene').clara('assignMaterial', {
  importSceneId: 'uuid',    // Optional, this is the id of the scene you are importing from.
                            // If it is not provided, the command will look up the material
                            // from the loaded scene.
                            // This scene must be made public
  material: 'RedFabric',    // This is a selector for the material you are importing.
                            // ie, The name of the material as a string
  assignTo: ['Seat','Back'],// A selector for the nodes you are assigning the material to.
                            // ie, A string with the name of the node, or an array of strings.
  callback: function(err, result) { // Optional callback, will return and object with `imported`
                                    // as a list of new nodes added.
  }
});

importNode

This command is a more generic version of assignMaterial. It will import a node from another scene,
and optionally assign it to a given operator.

$('#my-clara-scene').clara('importNode', {
  importSceneId: 'uuid',            // The id of the scene you are importing from.
  importSelector: "MyImage.png",    // The ctx selector for the node you are importing. This must
                                    // resolve to exactly one node.
  parentId: '%MaterialLibrary',     // The id of the node which will become the parent of the imported node.
  assignTo: {                       // Optional object, to assign the imported node to an operator
    selector: 'MyMat#Material[diffuseMap]',  // selector pointing to the operator
    attribute: 'diffuseMap'                  // the attribute that the new node will be assigned to.
  },
  callback: function(err, result) { // Optional callback, will be called after the node has been imported,
                                    // with the new node as the result argument.
                                    // The new node will also have an `imported` property, that contains
                                    // a list of new nodes added.
  }
});

screenshot

This command will capture the current view of the embed as a high quality PNG data url.

$('#my-clara-scene').clara('screenshot', {
  callback: function( err, results ) {      // callback, called when screenshot has been captured
    var myImage = results.image;
    var mySceneVersion = results.version;
  } );
});

prefetch

This command will prefetch a scene, so when it is asked for it will be cached.

$('#my-clara-scene').clara('prefetch', {
  sceneId: 'uuid',           // id of the scene to fetch.
  callback: function() {}    // Optional callback, called when scene has been fetched.
});

THREE

Access clara’s copy of THREE.js.

$('#my-clara-scene').clara('THREE').then(function(THREE) {
  // use THREE
});

** click to load **

It’s easy to delay loading the player until the user clicks on it:

$('#my-clara-scene').one('click', function() {
  $('#my-clara-scene').clara({id: '1234'});
});

---