Back to Demos

This demo shows use of scene.attachModel:

  • Each of the for corners has an anchor point null with different alignment.
  • The model has two attach points: 'Left', and 'Right'.
  • Select the anchor and attach point in the dropdowns, and the Model will be moved so that the anchor and attach points align.
  • If 'With Rotation' is selected, the two Nulls will also be aligned in rotation.

Clara.io demo resources:

Visit Base Scene


var anchorNodesSelect = document.getElementById('anchor-nodes');
var attachNodesSelect = document.getElementById('model-attach-nodes');
var withRotationInput = document.getElementById('with-rotation');

var sceneId = '1528fec0-e40e-443a-b17b-a707f06597fd';
var api = claraplayer('player');

api.sceneIO.fetchAndUse(sceneId).then(function() {
  var modelId = api.scene.find('Model');

  var anchors = api.scene.getAll({
    type: 'Null',
    name: 'Anchor*',
    property: 'name',
  });

  anchorNodesSelect.options[0] = new Option('Select Anchor', '');
  Object.keys(anchors).forEach(function(anchorId, i) {
    anchorNodesSelect.options[i + 1] = new Option(anchors[anchorId], anchorId);
  });

  attachNodesSelect.options[0] = new Option(
    'Left',
    api.scene.find({ from: modelId, name: 'Left' })
  );
  attachNodesSelect.options[1] = new Option(
    'Right',
    api.scene.find({ from: modelId, name: 'Right' })
  );

  anchorNodesSelect.onchange = onChange;
  attachNodesSelect.onchange = onChange;
  withRotationInput.onchange = onChange;

  document
    .getElementById('baseScene')
    .setAttribute('href', 'https://clara.io/view/' + sceneId);

  function onChange() {
    var anchorId = anchorNodesSelect.value;
    var attachNodeId = attachNodesSelect.value;
    var withRotation = withRotationInput.checked;

    if (!anchorId) {
      api.scene.set(
        { id: modelId, plug: 'Transform', property: 'translation' },
        { x: 0, y: 0, z: 0 }
      );
    } else {
      api.scene.attachModel(anchorId, modelId, attachNodeId, withRotation);
    }
  }
});