Force the model to display in a certain color

[roberticomold]

How do I force the model to come up in a certain color? I see code like this:
modelviewer.dev link But that example has scripted buttons, that cause events, and I don't need to use a scripted-button-event to change the color. I just want the model to load in a particular color. I also tried to adapt this color-code but I wasn't having much success. It would need to run on each post-back (or load, if it really needs to be a script concept) Is there anything to add to the style-CSS? Or to the model-viewer tag?

[roberticomold]

I found a very simple solution. Probably not the right way to do it. But simply to replace these lines in the .GLTF file with the following:
"pbrMetallicRoughness": { "baseColorFactor": [ 0.2980392277240753, 0.2980392277240753, 0.2980392277240753, 1.0 ]
Those color factors are the colors I wish.

[samaneh-kazemi]

You can achieve this by directly manipulating the model's material properties using JavaScript once the model has loaded. Here's a code snippet you can integrate into your project. I created this working example in glitch which you could remix and try it yourself.

    <div id="model-viewer">
      <model-viewer
        id="color"
        src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2FAstronaut.glb?v=1542147958948"
        camera-controls
        touch-action="pan-y"
        alt="A 3D model of an astronaut"
        max-camera-orbit="auto 90deg auto"
      >
      </model-viewer>
      <script>
        const modelViewerColor = document.querySelector("model-viewer#color");

        modelViewerColor.addEventListener("load", () => {
          const grayColor = [0.2980392277240753, 0.2980392277240753, 0.2980392277240753, 1.0];
          const [material] = modelViewerColor.model.materials;
          material.pbrMetallicRoughness.setBaseColorFactor(grayColor);
        });
      </script>
    </div>
    

[roberticomold]

You can achieve this by directly manipulating the model's material properties using JavaScript once the model has loaded. Here's a code snippet you can integrate into your project. I created this working example in glitch which you could remix and try it yourself.

I tried to fit your method into my work flow, and now I'm just worrying about when the file pops-up in the larger view.

`

         function openCenterAttraction(gltf_file) 
         {
            var centerattraction = document.getElementById("centerattraction");
            var mdviewer = document.getElementById("mdviewer");
            var background = document.getElementById("div_background2");
            background.style.display = "block";
            centerattraction.className = "onshore";

            mdviewer.src = gltf_file;
            setTimeout(showtime, 500); //Maybe give it a chance to load?!?!?
        }

        function showtime() {
            const modelViewerColor = document.querySelector("model-viewer#mdviewer");
            const grayColor = [0.2980392277240753, 0.2980392277240753, 0.2980392277240753, 1.0];
            const [material] = modelViewerColor.model.materials; // I get an error here....
            material.pbrMetallicRoughness.setBaseColorFactor(grayColor);
        }`

modelViewerColor.model is undefined. When I step through the code modelViewerColor.src is defined so the model is loaded by the time it gets to 'showtime' but the 'model' does not have a reference. Or maybe it is my version of model-viewer.js? I downloaded the software in 1/2/2025. Could that be it?

[samaneh-kazemi]

The model being undefined usually means the model hasn’t finished loading by the time showtime() runs. You might want to use the load event instead of relying on setTimeout. Similar to what I shared earlier. This part is key in the code I shared. .addEventListener("load", () => {.

Also, check that the script for model-viewer loads before your other code—order matters.

It’s tough to say for sure without seeing the full code. A Glitch link would make debugging easier! I recommend checking out the examples on the Model Viewer loading page and loading events—they should give you a better idea of how to handle this.

Hope that helps, and good luck with the rest of your project!

[roberticomold]

The model being undefined usually means the model hasn’t finished loading by the time showtime() runs. You might want to use the load event instead of relying on setTimeout. Similar to what I shared earlier. This part is key in the code I shared. .addEventListener("load", () => {.

Also, check that the script for model-viewer loads before your other code—order matters.

It’s tough to say for sure without seeing the full code. A Glitch link would make debugging easier! I recommend checking out the examples on the Model Viewer loading page and loading events—they should give you a better idea of how to handle this.

Hope that helps, and good luck with the rest of your project!

Its just too much trouble. Easier to just do what I already programmed in my 2nd post. Editing the file is easier. This is in C#
`

                                    string gltffile = File.ReadAllText(gltf);
                                    int pos1 = gltffile.IndexOf("pbrMetallicRoughness");
                                    int pos2 = gltffile.IndexOf("}", pos1);
                                    string gltffile2 = gltffile.Substring(0, pos1);
                                    gltffile2 += "pbrMetallicRoughness\": { \r\n"; //Force color to Gray
                                    gltffile2 += "   \"baseColorFactor\": [\r\n";
                                    gltffile2 += "       0.2980392277240753,\r\n";
                                    gltffile2 += "       0.2980392277240753,\r\n";
                                    gltffile2 += "       0.2980392277240753,\r\n";
                                    gltffile2 += "       1.0\r\n";
                                    gltffile2 += "]}";
                                    gltffile2 += gltffile.Substring(pos2 + 1, gltffile.Length - pos2 - 1);
                                    File.WriteAllText(gltf, gltffile2);

`