Back to Demos

This demo shows how to use events nodeenter, nodeleave for fast hit testing. Node you must have a VR supported device for VR interactive. If there is no goggle icon in the corner of the player, then you do not have a VR supported device

Clara.io demo resources:

Visit Base Scene


var api = claraplayer('player');
var sceneId = '07cfb6e0-250a-4d1b-adfe-4ad7e63db78f';

api.sceneIO.fetchAndUse(sceneId).then(function(){ 
  ['orbit', 'pan', 'zoom', 'home'].forEach(function(mode){
    api.player.removeTool(mode);
  });

  // set Boxes and Cylinders to be active with nodeenter/nodeleave event
  // the property can be set either with api as bellow or by modify the scene directly
  // so the cone, sphere and floor will not interactive in this demo

  api.scene.setAll({name:'Box', plug:'Properties', property:'interactive'}, true);
  api.scene.setAll({name:'Cylinder', plug:'Properties', property:'interactive'}, true);

  api.player.addTool({
    nodeenter: function(nodeId){
      var materialId = api.scene.get({id:nodeId, plug:'Material', property:'reference'});
      api.scene.set({id:materialId, plug:'Material', property:'baseColor'}, {r: 1, g: 0, b: 0});
    },
    nodeleave: function(nodeId){
      var materialId = api.scene.get({id:nodeId, plug:'Material', property:'reference'});
      api.scene.set({id:materialId, plug:'Material', property:'baseColor'}, {r: 0.7, g: 0.7, b: 0.7});
    },
  });
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});