This demo shows how to select nodes from mouse events.
Clara.io demo resources:
Visit Base Scenevar sceneId = '496ee1d4-fc6c-4e82-b692-5cdc951807c9';
var api = claraplayer('player');
var materialIds = {}
var state = {
hoverNode : null,
selectedNode : null,
}
api.sceneIO.fetchAndUse(sceneId).then(function() {
materialIds.none = api.scene.find({name:'None', type:'Material'});
materialIds.hover = api.scene.find({name:'Hover', type:'Material'});
materialIds.click = api.scene.find({name:'Click', type:'Material'});
document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});
api.player.addTool({
click: function(ev) {
var selectedNode = api.player.filterNodesFromPosition(ev);
api.scene.setAll({type:'PolyMesh', plug:'Material', property:'reference'}, materialIds.none).then(function(){
if (selectedNode.length) api.scene.set({id:selectedNode[0], plug:'Material', property:'reference'}, materialIds.click);
state.selectedNode = selectedNode[0];
});
},
hover: function (ev){
var hoverNode = api.player.filterNodesFromPosition(ev);
api.scene.setAll({type:'PolyMesh', plug:'Material', property:'reference'}, materialIds.none).then(function(){
if (hoverNode.length) api.scene.set({id:hoverNode[0], plug:'Material', property:'reference'}, materialIds.hover);
if (state.selectedNode) api.scene.set({id:state.selectedNode, plug:'Material', property:'reference'}, materialIds.click);
});
}
});