Back to Demos

This demo shows how to select nodes from mouse events.

Clara.io demo resources:

Visit Base Scene


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