Back to Demos

Look at a mesh to change its material. 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 sceneId = '96da326c-45e2-4fa5-b9a8-8610819d9fa4';
var api = claraplayer('player');

api.on('threeinitialized', function() {
  var THREE = api.player.getThree().THREE;

  var dotMesh, idleMaterial, highlightMaterial, prevPosition = new THREE.Vector3();

  api.commands.addCommand({
    enabled: true,
    active: false,
    display: {
      playerTools: true,
    },
    options:{
      icon:'vrMode'
    },
    activate: function() {
      api.commands.activateCommand('vrMode');
      idleMaterial = api.scene.find({name:'Idle', type:'Material'})
      highlightMaterial = api.scene.find({name:'Highlight', type:'Material'})
    },
    deactivate: function() {
      return api.commands.deactivateCommand('vrMode');
    },
    widget: {
      draw: function(manipObject) {
        var dot = new THREE.SphereGeometry(0.01, 32, 32);
        var dotMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
        dotMesh = new THREE.Mesh(dot, dotMaterial);

        var cameraWorldTransform = api.player.getCameraWorldTransform();
        var armPostion = new THREE.Vector3(0,0,-1).applyMatrix4(cameraWorldTransform);

        dotMesh.position.copy(armPostion);
        manipObject.add(dotMesh);
      },
      position: function (manipObject) {
        var cameraWorldTransform = api.player.getCameraWorldTransform();
        var armPostion = new THREE.Vector3(0,0,-1).applyMatrix4(cameraWorldTransform);
        dotMesh.position.copy(prevPosition);
        prevPosition.copy(armPostion);

        var hits = api.player.filterNodesFromCenter();
        api.scene.setAll({name:'*', type:'PolyMesh', plug:'Material', property:'reference'}, idleMaterial).then(function(){
          if(hits.length) api.scene.set({id:hits[0], plug:'Material', property:'reference'}, highlightMaterial);
        });
      },
    },
  }, 'hitTesting');
});

api.sceneIO.fetchAndUse(sceneId).then( function() {
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
  return ['orbit', 'pan', 'zoom', 'vrMode', 'home', 'fullscreen'].map(function(tool) {return api.player.hideTool(tool)});
});