This demo shows how to use vr controllerupdate event. Note your device must have at least one actived controller for this demo. If there is no goggle icon in the corner of the player, then you do not have a VR supported device

var api = claraplayer('player');
var sceneId = 'c5b16240-f9d8-4b36-a246-cb9b5e4b1cc5';

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

  var sphereMaterialId = api.scene.get({name:'Sphere', plug:'Material', property:'reference'});
  var boxMaterialId = api.scene.get({name:'Box', plug:'Material', property:'reference'});
  var spherePosition = api.scene.get({name:'Sphere', plug:'Transform', property:'translation'});
  var boxRotation = api.scene.get({name:'Box', plug:'Transform', property:'rotation'});

  api.player.addTool({

    controllerupdate: function(ev){
      // the controllerupdate event will be fired for each single framce
      // the argument of the function is an object contained controller's information such position, rotation, button pressed, axes etc.

      //set the sphere to green if any button of controller one is pressed.
      var controllerOneButtonPressed = false;
      ev.states[0].buttons.forEach(function(button){
        controllerOneButtonPressed = controllerOneButtonPressed || button.pressed;
      });

      if(controllerOneButtonPressed) {
        api.scene.set({id:sphereMaterialId, plug:'Material', property:'baseColor'}, {r: 0, g: 1, b: 0});
      } else {
        api.scene.set({id:sphereMaterialId, plug:'Material', property:'baseColor'}, {r: 0.7, g: 0.7, b: 0.7});
      }

      // set the sphere's position with the axes of first controller.
      var axesOne = ev.states[0].axes;
      api.scene.set({name:'Sphere', plug:'Transform', property:'translation'}, {x: spherePosition.x + axesOne[0] * 5, y: spherePosition.y, z: spherePosition.z - axesOne[1] * 5});

      if (ev.states[1]) {
        //set the Box to blue if any button of controller two is pressed.
        var controllerTwoButtonPressed = false;
        ev.states[1].buttons.forEach(function(button){
          controllerTwoButtonPressed = controllerTwoButtonPressed || button.pressed;
        });

        if(controllerTwoButtonPressed) {
          api.scene.set({id:boxMaterialId, plug:'Material', property:'baseColor'}, {r: 0, g: 0, b: 1});
        } else {
          api.scene.set({id:boxMaterialId, plug:'Material', property:'baseColor'}, {r: 0.7, g: 0.7, b: 0.7});
        }

        // set the Box's rotation with the axes of second controller.
        var axesTwo = ev.states[1].axes;
        api.scene.set({name:'Box', plug:'Transform', property:'rotation'}, {x: boxRotation.x + axesTwo[1] * 180, y: boxRotation.y + axesTwo[0] * 180, z: boxRotation.z});
      }
    },
  });
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});