This demo shows how to set properties of a material.

var sceneId = '67d185b9-e187-49dc-b4e9-f4f367c5a845';
var materials = {};

var materialSelect = document.getElementById('material');
var roughnessInput = document.getElementById('roughness');
var metallicInput = document.getElementById('metallic');
var colorSelect = document.getElementById('color');

var api = claraplayer('player');
api.sceneIO.fetchAndUse(sceneId).then(function() {
  materialSelect.onchange = materialSelectHandler;
  colorSelect.onchange = changeHandler;
  [roughnessInput, metallicInput].map(function(item) {item.oninput = changeHandler});
});

api.on('loaded', function() {
  var materialIds = api.scene.filter({type: 'Material'});
  materialIds.map(function(id, i) {
    var name = api.scene.get({id:id, property: 'name'});
    materials[name] = id;
    materialSelect.options[i] = new Option(name, name);
  })
  materialSelectHandler();
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

function materialSelectHandler(event) {
  var id = materials[materialSelect.value];
  roughnessInput.value = api.scene.get({id:id, plug:'Material', property:'roughness'});
  metallicInput.value = api.scene.get({id:id, plug:'Material', property:'metallic'});
  colorSelect.jscolor.fromString(rgbToHex(api.scene.get({id:id, plug:'Material', property:'baseColor'})));
}

function changeHandler(event) {
  var id = materials[materialSelect.value];
  var rgbValue = colorSelect.jscolor.rgb;
  rgbValue = rgbValue.map(function(item) {return item / 255});

  api.scene.set({id:id, plug:'Material', property:'roughness'}, roughnessInput.value)
  api.scene.set({id:id, plug:'Material', property:'metallic'}, metallicInput.value)
  api.scene.set({id:id, plug:'Material', property:'baseColor'}, { r:rgbValue[0], g:rgbValue[1], b:rgbValue[2]});
}

function componentToHex(c) {
  c = Math.round(c * 255);
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(rgbValue) {
  return (componentToHex(rgbValue.r) + componentToHex(rgbValue.g) + componentToHex(rgbValue.b)).toUpperCase();
}