Back to Demos

This demo shoes how you can set various pivot properties.

Pivot Offset

Current Pivot: (0, 0, 0)

Rotate On Y

Animations


var sceneId = 'b9e15118-ad68-438b-9f14-5bf5772dba6e';
var api = claraplayer('player');
var rotationInput = document.getElementById('rotateY');
var pivotText = document.getElementById('pivot');

api.sceneIO.fetchAndUse(sceneId);

api.on('loaded', function() {
  var anims = api.animation.getClips();
  for(var i = 0; i < anims.length; i++) {
    var button = document.createElement('button');
    button.innerText = anims[i].name;
    button.onclick = onClick(anims[i]);
    document.getElementById('content').appendChild(button);
  }

  document.getElementById('left').onclick = setPivot(-1, 0, 0);
  document.getElementById('center').onclick = setPivot(0, 0, 0);
  document.getElementById('right').onclick = setPivot(1, 0, 0);
  rotationInput.oninput = function(event) {
    return api.scene.set({name: 'Door', plug: 'Transform', property: 'rotation'}, [0, rotationInput.value, 0]);
  }
  addResources();
});

function setPivot(x, y, z) {
  return function(event) {
    api.scene.set({name: 'Door', plug: 'Transform', property: 'localRotatePivot'}, [x, y, z]);
    pivotText.textContent = '(' + x + ', ' + y + ', ' + z + ')';
  }
}

function onClick(anims) {
  return function(ev) {
    return api.animation.queueClip(anims.id, {
      onEnd: function() {},
      playSpeed: 2,
      autoplay: true
    });
  }
}

function addResources(){
  var text = document.createElement("u");  
  text.innerText = "Clara.io demo resources:";
  var subTitle = document.createElement('p');
  subTitle.appendChild(text);
  document.getElementById('content').appendChild(subTitle);
  var sceneLink = document.createElement('A');
  sceneLink.innerText = 'Visit Base Scene';
  sceneLink.setAttribute('href','https://clara.io/view/'+sceneId);
  sceneLink.setAttribute('target','_blank');
  document.getElementById('content').appendChild(sceneLink);
}