Back to Demos

This demo shows how you can create a explode clip along different axies and play it then.

Controls

Clara.io demo resources:

Visit Base Scene


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