This demo shows how you can change the frame
var sceneId = 'aa8c5650-9cc7-4ab6-9a80-46b05d282bd3';
var api = claraplayer('player');
var scale = document.getElementById('scale');
var frame = document.getElementById('frame');
var objectList = document.getElementById('objectSelect');
frame.innerText = 'Frame';
var selectObjectId = {};
api.sceneIO.fetchAndUse(sceneId);
api.on('loaded', function() {
frame.innerText = 'Frame';
var cameraId = api.scene.find({type:'Camera'});
api.player.animateCameraTo(cameraId, 500);
var objectIdNameMap = api.scene.getAll({type:'PolyMesh', property:'name'});
var i=0;
selectObjectId['Select All'] = [];
for(var id in objectIdNameMap){
objectList.options[i++] = new Option(objectIdNameMap[id],objectIdNameMap[id]);
selectObjectId[objectIdNameMap[id]] = [id];
selectObjectId['Select All'].push(id);
}
objectList.options[i] = new Option('Select All', 'Select All');
objectList.onchange = selectHandler;
document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
selectHandler();
});
function selectHandler() {
if(objectList.value !== 'Select All')
scale.value = api.scene.get({name:objectList.value, plug:'Transform',property:'scale'}).x;
scale.oninput = changeHandler(objectList.value);
frame.onclick = clickHandler(selectObjectId[objectList.value]);
}
function changeHandler(objectName){
if(objectName !== 'Select All'){
return function(){
api.scene.set({name:objectName, plug:'Transform', property:'scale'}, [scale.value, scale.value, scale.value]);
}
}else{
return function(){
api.scene.setAll({type:'PolyMesh', plug:'Transform', property:'scale'}, [scale.value, scale.value, scale.value]);
}
}
}
function clickHandler(objectId){
return function(ev){
return api.player.frameScene(objectId);
}
}