I want to switch colors with a click

Customization
1

viewer.onMaterialClicked(“Leather”, () => {
var marble = viewer.findMaterial(“b”);

if (marble.opacity == 1) {
  marble.baseColor.setRGB(0.048, 0.418, 0.418);
} else if (marble.baseColor.setRGB(0.048, 0.418, 0.418) == true) {
  marble.baseColor.setRGB(1, 1, 1);
}

return true;

});

2

You need to either call marble.setUniforms() after modifying the color with your current code or use marble.setBaseColorRGB(0.048, 0.418, 0.418) which doesn’t require to call marble.setUniforms().

Also your else if condition doesn’t look correct. You probably need something like:

else if (marble.baseColor.r === 0.048 && marble.baseColor.g === 0.418 && marble.baseColor.b === 0.418) {
.... 
}
3

if (marble.opacity == 1) {
marble.baseColor.setRGB(0.1, 0.109, 0.807);
} else if (
marble.baseColor.r === 0.1 &&
marble.baseColor.g === 0.109 &&
marble.baseColor.b === 0.807
) {
marble.baseColor.setRGB(0, 0, 0);
}

is not working :frowning:

4

Sorry, I used a wrong function name in my previous post (it is now correcteD). Try calling marble.setUniforms() at the end of the code block.

Does the marble material have base color texture or just a single-value color? Texture takes priority over the single value color.

5

It still doesn’t work, please check if the code is correct.

viewer.onMaterialClicked(“Leather”, () => {
var marble = viewer.findMaterial(“b”);

if (marble.opacity == 1) {
  marble.baseColor.setRGB(0.1, 0.109, 0.807);
} else if (
  marble.baseColor.r === 0.1 &&
  marble.baseColor.g === 0.109 &&
  marble.baseColor.b === 0.807
) {
  marble.setUniforms(
    marble.baseColor.r === 0 &&
      marble.baseColor.g === 0 &&
      marble.baseColor.b === 0
  );
  marble.setUniforms()
  return true;
}

});

6

Try this:


viewer.setMaterialEditable("b");

viewer.onMaterialClicked(“Leather”, () => {
   var marble = viewer.findMaterial(“b”);
   if (marble.baseColor.r === 0 &&
       marble.baseColor.g === 0 &&
       marble.baseColor.b === 0) {
     marble.setBaseColorRGB(0.1, 0.109, 0.807);
  } else if (
    marble.baseColor.r === 0.1 &&
    marble.baseColor.g === 0.109 &&
    marble.baseColor.b === 0.807) {
   marble.setBaseColorRGB(0, 0, 0);
  }
  return true;
});

Check also Chrome developer console to see if it shows any errors related to this script

1 Like
7

Thx!!! :blush: It works so well.