This demo shows how you can change the visibility of mesh hierarchies.
Clara.io demo resources:
Visit Base Scenevar 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';
}
}