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