Back to Demos

This demo shows how to set the transform properties of a given node.

Translation (x)

Rotation (x)

Scale (x)

Shear (x)

Clara.io demo resources:

Visit Base Scene


var sceneId = '6819c802-826c-4408-8163-f0f7755ad515';
var translationInput = document.getElementById('translation');
var rotationInput = document.getElementById('rotation');
var scaleInput = document.getElementById('scale');
var shearInput = document.getElementById('shear');

var api = claraplayer('player');
api.sceneIO.fetchAndUse(sceneId).then(function() {
  [translationInput, rotationInput, scaleInput, shearInput].map(function(item) {item.oninput = changeHandler});
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

function changeHandler(event) {
  api.scene.set({name:'Box', plug:'Transform', property:'translation'}, [translationInput.value, 0, 0]);
  api.scene.set({name:'Box', plug:'Transform', property:'rotation'}, [rotationInput.value, 0, 0]);
  api.scene.set({name:'Box', plug:'Transform', property:'scale'}, [scaleInput.value, 1, 1]);
  api.scene.set({name:'Box', plug:'Transform', property:'shear'}, [shearInput.value, 0, 0]);
}