This demo shows how you can switch from one camera to another with an animation.
Clara.io demo resources:
Visit Base Scenevar 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];
})
})