This demo shows how you can move picture on object.
Clara.io demo resources:
Visit Base Scenevar 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);
}
}