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