Color change - viewer API

viewer-api

(Empe2301) #1

Hi, I have problem with change color model in viewer API.

I got the model from my client and he wants to have possibility to change a color of car body by button.

I tried to build on the examples from this forum and blog but these don't work in my case.

I tried to use color for all materials to see how it works, but it doesn't change a color.

I have only urlid and I can't edit this model. All properties (materials, nodes etc) I'm reading from console).

Below is my script.

     var sketchfabAPIUtility = new SketchfabAPIUtility('',  document.getElementById('api-frame'), onSketchfabUtilityReady);

     function onSketchfabUtilityReady() {
         $("#test").click(function(event) {
                 sketchfabAPIUtility.DiffusePBR);
                 for (var prop in sketchfabAPIUtility.materialHash) {
                 sketchfabAPIUtility.setColor(prop, sketchfabAPIUtility.DiffuseColor, "#00ff00");
             }
             ChangeObjectsMaterialColors(prop)
             function ChangeObjectsMaterialColors(materialName) {
                 var currentSlectedMaterial = "";
                 if (currentSlectedMaterial != "") {
                     sketchfabAPIUtility.setColor(currentSlectedMaterial, sketchfabAPIUtility.DiffusePBR, "#00ff00");
                 }
                 currentSlectedMaterial = materialName;
                 sketchfabAPIUtility.resetColor(currentSlectedMaterial, sketchfabAPIUtility.DiffusePBR)

             }
         });
     };

</script>

(Shaderbytes) #2

You dont seem to have any understanding of javascript by the looks of things. To begin with this code would throw a snytax error. Secondly you seem to have just copy and pasted things all over the place where they should not be.

did you omit the urlid in the code above on purpose?

why not remove all other code except the constructor , the ready callback function , and only one line of code inside that to change a color eg:

var sketchfabAPIUtility = new SketchfabAPIUtility('"your_urlid_here",  document.getElementById('api-frame'), onSketchfabUtilityReady);

function onSketchfabUtilityReady() {

 sketchfabAPIUtility.setColor("your_material_name_here", sketchfabAPIUtility.DiffusePBR, "#yourhexcolor");


};

Of coarse the channel name could be something else .. all depends on your model setup. If it is not DiffusePBR try the others until you see a change. Once you have that working. then try to add in your other code to do whatever you need done via your UI.


(Empe2301) #3

Thank you for reply. You are right there was syntax error (I made mistake by coping wrong version).
I special omit urlid.

For example please try urlid: "234d4daeb1f04d9d93f61f063ada9330"
I want to change the wheel to green color - just wheel should be green:
1. How to find what is related to this?
2. How to change wheel to color green

I iterated all channels by all materials, and something is colored something not.
In this case I do something like this:

  var sketchfabAPIUtility = new SketchfabAPIUtility("234d4daeb1f04d9d93f61f063ada9330",  document.getElementById('api-frame'), onSketchfabUtilityReady);
  var channels = [
    sketchfabAPIUtility.AOPBR,
    sketchfabAPIUtility.AlbedoPBR,
    sketchfabAPIUtility.BumpMap,
    sketchfabAPIUtility.CavityPBR,
    sketchfabAPIUtility.DiffuseColor,
    sketchfabAPIUtility.DiffuseIntensity,
    sketchfabAPIUtility.DiffusePBR,
    sketchfabAPIUtility.EmitColor,
    sketchfabAPIUtility.GlossinessPBR,
    sketchfabAPIUtility.MetalnessPBR,
    sketchfabAPIUtility.NormalMap,
    sketchfabAPIUtility.Opacity,
    sketchfabAPIUtility.RoughnessPBR,
    sketchfabAPIUtility.SpecularColor,
    sketchfabAPIUtility.SpecularF0,
    sketchfabAPIUtility.SpecularHardness,
    sketchfabAPIUtility.SpecularPBR
  ]      

  function onSketchfabUtilityReady() {
    for (var prop in sketchfabAPIUtility.materialHash) {
      for ( var i = 0; i < channels.length; i++) {
        sketchfabAPIUtility.setColor(prop, channels[i], "#00ff00");
      }
    }
  };

two screens:
before:
http://ifotos.pl/z/anhheep
after:
http://ifotos.pl/z/anhheew

Thank you for help.


(Empe2301) #4

Thank you for reply. You are right there was syntax error (I made mistake by coping wrong version).
I special omit urlid.

For example please try urlid: "234d4daeb1f04d9d93f61f063ada9330"
I want to change the wheel to green color - without texture, just wheel should be green:
1. How to find what is related to this?
2. How to change wheel color to green?

I iterate all channels by all materials, and something is colored something not.
In this case I do something like:

  var sketchfabAPIUtility = new SketchfabAPIUtility("234d4daeb1f04d9d93f61f063ada9330",  document.getElementById('api-frame'), onSketchfabUtilityReady);
  var channels = [
    sketchfabAPIUtility.AOPBR,
    sketchfabAPIUtility.AlbedoPBR,
    sketchfabAPIUtility.BumpMap,
    sketchfabAPIUtility.CavityPBR,
    sketchfabAPIUtility.DiffuseColor,
    sketchfabAPIUtility.DiffuseIntensity,
    sketchfabAPIUtility.DiffusePBR,
    sketchfabAPIUtility.EmitColor,
    sketchfabAPIUtility.GlossinessPBR,
    sketchfabAPIUtility.MetalnessPBR,
    sketchfabAPIUtility.NormalMap,
    sketchfabAPIUtility.Opacity,
    sketchfabAPIUtility.RoughnessPBR,
    sketchfabAPIUtility.SpecularColor,
    sketchfabAPIUtility.SpecularF0,
    sketchfabAPIUtility.SpecularHardness,
    sketchfabAPIUtility.SpecularPBR
  ]      

  function onSketchfabUtilityReady() {
    for (var prop in sketchfabAPIUtility.materialHash) {
      for ( var i = 0; i < channels.length; i++) {
        sketchfabAPIUtility.setColor(prop, channels[i], "#00ff00");
      }
    }
  };

Thank You for help.


(Shaderbytes) #5

You dont change objects colors .. you change material colors keep that in mind.

For example with the car :
If an object like a wheel rim uses the same material as say the headlight rim then it would not be possible to only change the wheel., both would be affected because it is the material that changes color.

Also In the example of the car :

If a material has a texture assigned to the diffuse being used .. then the color value is ignored. Its either color or texture. Not both. You can remove a texture if needed, just set it to null if you want to use a color instead.


(Empe2301) #6

Thanks for the answer.

I did like you said, but I still have problem with my example. I tried to use all channels but still can't add color for all parts of my car.

My code:

  var sketchfabAPIUtility = new SketchfabAPIUtility("234d4daeb1f04d9d93f61f063ada9330",  document.getElementById('api-frame'), onSketchfabUtilityReady);
  var channels = [
    sketchfabAPIUtility.AOPBR,
    sketchfabAPIUtility.AlbedoPBR,
    sketchfabAPIUtility.BumpMap,
    sketchfabAPIUtility.CavityPBR,
    sketchfabAPIUtility.DiffuseColor,
    sketchfabAPIUtility.DiffuseIntensity,
    sketchfabAPIUtility.DiffusePBR,
    sketchfabAPIUtility.EmitColor,
    sketchfabAPIUtility.GlossinessPBR,
    sketchfabAPIUtility.MetalnessPBR,
    sketchfabAPIUtility.NormalMap,
    sketchfabAPIUtility.Opacity,
    sketchfabAPIUtility.RoughnessPBR,
    sketchfabAPIUtility.SpecularColor,
    sketchfabAPIUtility.SpecularF0,
    sketchfabAPIUtility.SpecularHardness,
    sketchfabAPIUtility.SpecularPBR
  ]      

  function onSketchfabUtilityReady() {
    for (var prop in sketchfabAPIUtility.materialHash) {
      for ( var i = 0; i < channels.length; i++) {
        var material = sketchfabAPIUtility.materialHash[prop];
        // material.channels.DiffusePBR.texture = null;

        material.channels[channels[i]].texture = null;
        sketchfabAPIUtility.api.setMaterial(material, function() {
        }); 
        sketchfabAPIUtility.setColor(prop, channels[i], "#00ff00"); 
      }
    }
  };

This works fine for this sample car (234d4daeb1f04d9d93f61f063ada9330), but in my case I have a result like this:

I don't know why all parts of my car aren't green - purposely used all the materials and all the channels to make sure that all the cases examined.


(Shaderbytes) #7

send me your model id so I could have a look .. I cant really say more without seeing the model. You can send it in a PM if it is not public.


(Shaderbytes) #8

I have answered your Problem in PM , but for those looking into the public discussion Let me share what was the problem.

Some materials didnt seem to be changing color and this was because in the editor the client had set the channels factor all the way down to zero. The factor or "influence" is a normalized value which the color is multiplied by.

The Sketchfab API Utility has a function to set Factor with ease as well. Here is some code that will loop all materials and loop all channels in a material. It will then clear any textures , set the color (magenta in this example) and also set the factor.

for (var prop in sketchfabAPIUtility.materialHash) {
	var mat= sketchfabAPIUtility.materialHash[prop];
	for (var channel in mat.channels) {
		mat.channels[channel].texture = null;
		sketchfabAPIUtility.setColor(prop, channel, "ff00ff");
		sketchfabAPIUtility.setFactor(prop, channel, 1);
	}
}

(Empe2301) #9

Thank for your help and sorry for delay. This solution works perfect and it really helped me. Thank you so much.