Back to Demos

This demo shows how you can set the properties of any given material within a scene.

Min

x:0 y:0 z:0

Max

x:0 y:0 z:0

Clara.io demo resources:

Visit Base Scene


var sceneId = '496ee1d4-fc6c-4e82-b692-5cdc951807c9';
var api = claraplayer('player');
var materialIds = {}

var minEl = document.getElementById('min');
var maxEl = document.getElementById('max');

api.sceneIO.fetchAndUse(sceneId).then(function() {
  materialIds.none = api.scene.find({name:'None', type:'Material'});
  materialIds.click = api.scene.find({name:'Click', type:'Material'});
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

api.player.addTool({
  click: function(ev) {
    var selectedNode = api.player.filterNodesFromPosition(ev);
    api.scene.setAll({type:'PolyMesh', plug:'Material', property:'reference'}, materialIds.none).then(function() {
      if (selectedNode.length) {
        api.scene.set({id:selectedNode[0], plug:'Material', property:'reference'}, materialIds.click);
        var boundingBox = api.scene.getNodeBoundingBox(selectedNode[0]);

        minEl.textContent = 'x:' + boundingBox.min.x + ' y:' + boundingBox.min.y + ' z:' + boundingBox.min.z;
        maxEl.textContent = 'x:' + boundingBox.max.x + ' y:' + boundingBox.max.y + ' z:' + boundingBox.max.z;
      }
    });
  }
});