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 Scenevar 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)});
});