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