This demo shows how you can create a explode clip along different axies and play it then.
var sceneId = 'd3421755-7070-475d-84b6-b40b359b62ef';
var api = claraplayer('player');
var mode = document.getElementById('mode');
mode.options[0] = new Option('xyz', 'xyz');
mode.options[1] = new Option('xy', 'xy');
mode.options[2] = new Option('xz', 'xz');
mode.options[3] = new Option('yz', 'yz');
mode.options[4] = new Option('x', 'x');
mode.options[5] = new Option('y', 'y');
mode.options[6] = new Option('z', 'z');
mode.onchange = function() {
if (!play.getAttribute('disabled')) create.removeAttribute('disabled');
};
var create = document.getElementById('create');
var play = document.getElementById('play');
var back = document.getElementById('back');
var autoExplode;
api.sceneIO.fetchAndUse(sceneId);
api.on('loaded', function() {
create.onclick = createClip();
play.onclick = playClip();
play.setAttribute('disabled', true);
back.onclick = backClip();
back.setAttribute('disabled', true);
document
.getElementById('baseScene')
.setAttribute('href', 'https://clara.io/view/' + sceneId);
});
function createClip() {
return function(ev) {
create.setAttribute('disabled', true);
play.removeAttribute('disabled');
var explodeMode = mode.options[mode.selectedIndex].value;
autoExplode = api.player.createExplode(explodeMode);
return;
};
}
function playClip() {
return function(ev) {
back.removeAttribute('disabled');
play.setAttribute('disabled', true);
autoExplode.then(result => {
api.player.animateCameraTo(result.dstCamera, 3000);
return api.animation.queueClip(result.explodeClipId, {
autoplay: true,
});
});
};
}
function backClip() {
return function(ev) {
play.removeAttribute('disabled');
back.setAttribute('disabled', true);
autoExplode.then(result => {
api.player.animateCameraTo(result.srcCamera, 3000);
return api.animation.queueClip(result.explodeClipId, {
playSpeed: -1,
autoplay: true,
});
});
};
}