This demo shows how to fire mode change event. You must have a vr supported device for this demo.

var sceneId = 'eef87e62-6b19-489e-b0bd-2e743223b7c0';
var api = claraplayer('player');

api.sceneIO.fetchAndUse(sceneId).then(function() {
  ['orbit', 'pan', 'zoom', 'home'].forEach(function(tool) {
    api.player.removeTool(tool);
  })
  api.scene.set({name:'Box', plug:'Properties', property:'visible'}, false);
});

// The renderingMode event will be fired when switch between vr and normal mode.
api.on('renderingMode', function(mode) {
  var boxMaterialId = api.scene.get({name:'Box', plug:'Material', property:'reference'})
  // mode is an array content the name of the current mode
  // there are three different mode: normal, vr and lenticular

  if (mode[0] === 'vr') {
    api.scene.set({name:'Box', plug:'Properties', property:'visible'}, true);
    api.scene.set({id:boxMaterialId, plug:'Material', property:'baseColor'}, {r: 0, g: 1, b: 0});
  } else if (mode[0] === 'normal') {
    api.scene.set({name:'Box', plug:'Properties', property:'visible'}, false);
    api.scene.set({id:boxMaterialId, plug:'Material', property:'baseColor'}, {r: 0.7, g: 0.7, b: 0.7});
  } else {
    api.scene.set({name:'Box', plug:'Properties', property:'visible'}, true);
    api.scene.set({id:boxMaterialId, plug:'Material', property:'baseColor'}, {r: 0, g: 0, b: 1});
  }
});