Back to Demos

This demo shows how you can add nodes to a scene.

Node Name:

Clara.io demo resources:

Visit Base 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 });
}