Back to Demos

This demo shows how you can change the visibility of meshes.

Clara.io demo resources:

Visit Base Scene


var sceneId = "3863bcac-4192-4bf6-824d-bbd76ef4feb6";
var api = claraplayer("player");
var state = {
  Box: true,
  Cylinder: false,
  Cone: true,
}

api.sceneIO.fetchAndUse(sceneId).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({type:'PolyMesh', name: mesh, plug:'Properties', property:'visible'}, state[mesh]);
  });
document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);

});

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