Back to Demos

This demo shows how you can move picture on object.

Clara.io demo resources:

Visit Base Scene


var sceneId = 'b502f414-2eef-4495-a007-a3d5816c7cea';
var api = claraplayer('player');
api.sceneIO.fetchAndUse(sceneId).then(function(){
  api.commands.addCommand({
    enabled: true,
    active: true,
    tool: {
      drag: function(ev){

        if(ev.which !== 1) return false;
        return {
          momentum: false,
          handle: moveCanvasComposite,
        }
      },
    },
  });
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
})

function moveCanvasComposite(ev){
  var rect = ev.rect;
  var x = ev.clientX;
  var y = ev.clientY;
  var ndc = {x: 2 * x / rect.width - 1, y: -2 * y / rect.height + 1};
  var hits = api._store.getTranslator().raycastSelect(ndc);
  var hit = hits[0];
  if(hit) {
    var uv = hit.data[0].uv;
    api.scene.set({name:'Canvas', plug:'Image', properties:{name:'CanvasComposite'}, property:'xRelativeOffset'}, uv.x);
    api.scene.set({name:'Canvas', plug:'Image', properties:{name:'CanvasComposite'}, property:'yRelativeOffset'}, 1-uv.y);
  }
}