Back to Demos

This demo shows how you can switch from one camera to another with an animation.

Clara.io demo resources:

Visit Base Scene


var api = claraplayer('player');
var sceneId = '43e76ab0-f50a-4a18-b73a-024cc280e529';

function constructTranslationObject(){
  return ['x', 'y', 'z'].reduce(function(obj, axis){
    var axisValue = document.getElementById(axis+'Input').value;
    obj[axis] = axisValue;
    return obj;
  },{});
}

api.sceneIO.fetchAndUse(sceneId).then(function(){
  var transformPanel = document.getElementById('transformInput');
  ['x', 'y', 'z'].forEach(function(axis){
    var axisLabel = document.createElement('p');
    axisLabel.innerHTML = 'Translation ('+axis+')';

    var axisInput = document.createElement('input');
    axisInput.id = axis+'Input';
    axisInput.type = 'range';
    axisInput.min = axis === 'z' ? '3' : '-1';
    axisInput.max = axis === 'z' ? '5' : '1';
    axisInput.step = '0.01';
    axisInput.oninput = function(){
      var translation = constructTranslationObject();
      var cameraId = api.player.getCamera();
      api.scene.set({id:cameraId, plug:'Transform', property:'translation'}, translation);
    }

    var axisBreak = document.createElement('br');

    transformPanel.appendChild(axisLabel);
    transformPanel.appendChild(axisInput);
    transformPanel.appendChild(axisBreak);
  });
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

api.on('rendered', function(){
  var cameraId = api.player.getCamera();
  var translation = api.scene.get({id:cameraId, plug:"Transform", property:'translation'});
  Object.keys(translation).forEach(function(axis){
    var axisValue = document.getElementById(axis+'Input');
    axisValue.value = translation[axis];
  })
})