Next (Custom Annotations) Previous (Basic JavaScript API)


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


Toggle the player fullscreen:



Execute a script on the scene:

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


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



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.


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.


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


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.


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

Next (Custom Annotations) Previous (Basic JavaScript API)