This demo shows how you can add nodes to a scene.
var sceneId = '2b2d8570-b8c4-4f9a-93d5-a44e9b64a048';
var types = {
PolyMesh: ['Box', 'Cone', 'Sphere', 'Cylinder', 'Plane', 'Torus', 'Capsule'],
Light: ['AreaLight', 'DirectionalLight', 'HemisphereLight', 'PointLight', 'SpotLight']
}
var typeSelect = document.getElementById('type');
var plugSelect = document.getElementById('plug');
var nameInput = document.getElementById('name');
populateSelect(typeSelect, Object.keys(types));
typeSelect.onchange = onTypeChange;
onTypeChange();
var api = claraplayer('player');
api.sceneIO.fetchAndUse(sceneId).then(function() {
document.getElementById('add').onclick = addNode;
document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
})
function onTypeChange() {
var value = typeSelect.options[typeSelect.selectedIndex].value;
populateSelect(plugSelect, types[value]);
}
function populateSelect(select, values) {
while (select.options.length > 0)
select.remove(0);
for (var i = 0; i < values.length; i++)
select.options[i] = new Option(values[i], values[i]);
}
function rand(to, from) {
return Math.floor((Math.random() * from) + to);
}
function addNode() {
var parent = api.scene.find({ name: 'Objects' });
var type = typeSelect.options[typeSelect.selectedIndex].value;
var plugs = {
Transform: [['Transform', {
translation: {
x: rand(1, 10),
y: rand(1, 10),
z: rand(1, 10)
}
}]],
Properties: [['Default', {}]]
};
plugs[type] = [[plugSelect.options[plugSelect.selectedIndex].value, {}]];
api.scene.addNode({ name: nameInput.value || 'default', type:type, plugs:plugs, parent:parent });
}