Back to Demos

This demo shows how you can import materials from one scene and apply them to another.

Clara.io demo resources:


var baseSceneId = 'b6fe7fc3-d8ed-43fa-8eda-2440c23fcc0a';
var librarySceneId = '905678bd-51e4-4b2c-87a1-e237f8a60145';
var api = claraplayer('player');
var materials = [];

api.sceneIO.fetchAndUse(baseSceneId).then(function() {
  api.sceneIO.fetch(librarySceneId).then(importMaterials);
  document
    .getElementById('baseScene')
    .setAttribute('href', 'https://clara.io/view/' + baseSceneId);
  document
    .getElementById('libraryScene')
    .setAttribute('href', 'https://clara.io/view/' + librarySceneId);
});

function importMaterials() {
  var materialIds = api.scene.filter({
    from: { id: librarySceneId },
    type: 'Material',
  });
  api.scene.clone(materialIds).then(function(nodeMap) {
    materials = materialIds.map(function(oldNodeId) {
      return nodeMap[oldNodeId];
    });
    materials.map(materialComponent);
  });
}

function materialComponent(materialId, i) {
  var matColor = api.scene.get({
    id: materialId,
    evalPlug: 'Material',
    property: 'baseColor',
  });
  var matMap = api.scene.get({
    id: materialId,
    evalPlug: 'Material',
    property: 'baseMap',
  });
  var foundAsset, assetUrl;
  if (matMap) {
    foundAsset = api.scene.get({
      id: matMap.id,
      evalPlug: 'Image',
      property: 'asset',
    });
    assetUrl = api.assets.getUrl(foundAsset);
  }

  if (!assetUrl) {
    var button = document.createElement('button');
    button.className = 'roundedButton';
    button.onclick = function(ev) {
      api.scene.set({ plug: 'Material', property: 'reference' }, materials[i]);
    };
    button.style.backgroundColor = '#' + matColor.getHexString();
    document.getElementById('colorLibrarys').appendChild(button);
  } else {
    var button = document.createElement('button');
    button.className = 'roundedButton';
    button.onclick = function(ev) {
      api.scene.set({ plug: 'Material', property: 'reference' }, materials[i]);
    };
    button.style.backgroundImage = 'url(' + assetUrl + ')';
    document.getElementById('materialLibrarys').appendChild(button);
  }
}

}