Toggle materials on model

(Cytel) #1


I want to build a configurator with the viewer-API where a user can toggle different colors / materials on the model through buttons. So I went through your experiments There are two relevant examples: The “watch-configurator” and the “material-showcase”.

If I understand correctly, the watch-configurator works by having multiple nodes with different materials in the same position that you can toggle on and off. This approach is not suitable for me as I do not want to upload all possible combinations (too many configuration options) into one model.

The “material-showcase” is quite hard to understand for me. I see from the code that when clicking a button the iframe url is changed in place with different query params that relate to materials. [1] Is this documented anywhere? I cant find the connection between the query params and the viewer-API.

I have a test-model uploaded with 5 different material versions of the model (so it is like the watch-configurator). I can log the nodes and different materials, but I cannot find any relation between the nodes and the materials from the JSON-Objects.

[2] How are materials and nodes related in the API?
[3] How do I assign a material to a specific node?
[4] Is it possible to upload just one object and different materials into one model and then just assign the materials to the object (without adjusting opacity on the materials)?

Thanks in advance,

(Paul Sketch) #2
  1. Nodes comes from the hierarchy in the 3D software used to create the 3d model. Material are affecting drawing of geometry.
  2. You cannot affect material, you can change existing materials.
  3. No assignation of material, so it’s not the way to do it with viewer api.

Idea is apply their value to the materials when using viewer-api.
You get the list of material from the API, and then you change the part you need.
If you just change diffuse/albedo texture, just change that part in the material.

var myMaterials;
     myMaterials = materials;

then on some user event like “make my model blue” click button:

function makeMyModelBlue(){
    for (var i=0; i<myMaterials.length; i++){
      var m = myMaterials[i];
      // here change only the channel you need to change
      m.channels.EmitColor.factor = 1; 
      m.channels.EmitColor.enable = true; 
      m.channels.EmitColor.color = [0.0,0.0,1.0];         


Drag and Drop texture