Toggle materials on model

Hi,

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 https://github.com/sketchfab/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,
Ole

  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;
api.getMaterialList(function(err,materials){
     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];         
  }

}

1 Like

i don’t find the channels name of new viewer.api.
where can i find them. such as channels.Emitcolor.

just loop the channels object and read the property names … these will be the channel names.

for (var prop in materialRef.channels){
console.log(prop);
}

anyway they are:

AOPBR
AlbedoPBR
BumpMap
CavityPBR
DiffuseColor
DiffuseIntensity
DiffusePBR
EmitColor
GlossinessPBR
MetalnessPBR
NormalMap
Opacity
RoughnessPBR
SpecularColor
SpecularF0
SpecularHardness
SpecularPBR
ClearCoat
ClearCoatNormalMap
ClearCoatRoughness
Matcap
SubsurfaceScattering
SubsurfaceTranslucency

1 Like