This demo shows how you can highlight nodes. Select 'Highlighting' or 'Ghosting', and click on an object to add/remove it from the selection. Highlighting and Ghosting are independent selections.

var sceneId = 'f0c8e126-a224-4cf2-a47f-08a62875ec8c';
var api = claraplayer('player');
api.sceneIO.fetchAndUse(sceneId);

var colorCustom = document.getElementById('colorCustom');
var opacityEl = document.getElementById('opacity');
var resetHl = document.getElementById('reset-highlighter');
var resetGh = document.getElementById('reset-ghoster');

var highlighter = api.selection.setHighlighting(true);
var ghoster = api.selection.addGhoster({});
var highlightChoice = document.getElementById('highlight-choice');

api.on('loaded', function() {
  highlighter.setColor('#' + colorCustom.value);
  document
    .getElementById('baseScene')
    .setAttribute('href', 'https://clara.io/view/' + sceneId);
});

api.player.addTool({
  click: function(ev) {
    var nodes = api.player.filterNodesFromPosition(ev);
    if (!nodes.length) return;
    if (highlightChoice.checked) {
      highlighter.selectionSet.toggle(nodes[0]);
    } else {
      ghoster.selectionSet.toggle(nodes[0]);
    }
  },
});

colorCustom.addEventListener('change', function(ev) {
  highlighter.setColor('#' + ev.target.value);
});

opacityEl.addEventListener('change', function(ev) {
  ghoster.setOpacity(Number(ev.target.value));
});

resetHl.addEventListener('click', function(ev) {
  api.selection.setHighlighting(false);
  highlighter = api.selection.setHighlighting(true, {
    color: '#' + colorCustom.value,
  });
});

resetGh.addEventListener('click', function(ev) {
  api.selection.removeGhoster(ghoster.id);
  ghoster = api.selection.addGhoster({ opacity: Number(opacityEl.value) });
});