Back to Demos

This demo shows how you can change the frame

Objects

Scale

Clara.io demo resources:

Visit Base Scene


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