Back to Demos

This demo shows how you can change the visibility of mesh hierarchies.

Clara.io demo resources:

Visit Base Scene


var sceneId = "2800b63e-207f-46db-9552-81cac864a7aa";
var api = claraplayer("player");
var state = {
  North: true,
  East: true,
  South: true,
  West: true,
}
var hierarchyVisibility;

api.sceneIO.fetchAndUse(sceneId, null, { waitForPublish: true }).then(function() {
  var buttons = document.getElementById('buttons');
  Object.keys(state).forEach(function(mesh, i) {
    var label = document.createElement('p');
    label.innerText = mesh;
    buttons.appendChild(label);

    var button = document.createElement('button');
    button.onclick = handleClick(mesh);
    button.innerText = state[mesh] ? 'Hide' : 'Show';
    buttons.appendChild(button);
    api.scene.set({name: mesh, plug:'Properties', property:'visible'}, state[mesh]);
  });
  var label = document.createElement('p');
  label.innerText = 'Hierarchy Visibility';
  buttons.appendChild(label);
  var button2 = document.createElement('button');
  button2.onclick = updateScene();
  hierarchyVisibility = api.scene.get({type:'Scene', plug: 'Properties', property: 'hierarchyVisibility'}) === 'Enable'? true: false;
  button2.innerText = hierarchyVisibility? 'Enabled': 'Diabled';
  buttons.appendChild(button2);
document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

function handleClick(mesh) {
  return function(ev) {
    api.scene.set({ name: mesh, plug:'Properties', property:'visible'}, !state[mesh])
    state[mesh] = !state[mesh];
    ev.currentTarget.innerText = state[mesh] ? 'Hide' : 'Show';
  };
};

function updateScene() {
  return function(ev) {
    var hierarchy = hierarchyVisibility? 'Disable': 'Enable';
    api.scene.set({ type: 'Scene', name: 'Hierarchy Visibility', plug: 'Properties', property: 'hierarchyVisibility'}, hierarchy);
    hierarchyVisibility = !hierarchyVisibility;
    ev.currentTarget.innerText = hierarchyVisibility? 'Enabled': 'Diabled';
  }
}