# How to color a model?

**URL:** <https://community.cesium.com/t/how-to-color-a-model/2680>\
**Category:** CesiumJS\
**Created:** [June 23, 2015, 9:43pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680 "2015-06-23T21:43:13Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![D2P](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@D2P](https://community.cesium.com/u/D2P)\
**Post date:** [June 23, 2015, 9:43pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/1 "2015-06-23T21:43:13Z")

</div>

Hello,

Is it possible to highlight/color an individual model a specific color? For example, if I have two entities with the same model uri side by side, I would like to make one blue and the other red. Is this possible? If so, can someone provide a simple example?

I saw another similar post in a search but it wasn't clear if this was currently possible or if it was a future feature.

Thank you!

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [June 24, 2015, 12:50am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/2 "2015-06-24T00:50:48Z")

</div>

Yes, it is possible. For example, you would do something like this but set “diffuse”, not “specular:”

> [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Specs/Scene/ModelSpec.js#L386](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Specs/Scene/ModelSpec.js#L386)

Also see issue [#2387](https://github.com/AnalyticalGraphicsInc/cesium/issues/2387), which should be fixed in the next few releases.

Patrick

---

<div class="post-metadata">

**Author:** ![D2P](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@D2P](https://community.cesium.com/u/D2P)\
**Post date:** [June 24, 2015, 2:38am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/3 "2015-06-24T02:38:42Z")

</div>

Thanks Patrick. My models are currently created using the Entity API. How can I get the model/material object you referenced from the entity object?

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [June 24, 2015, 8:19pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/4 "2015-06-24T20:19:19Z")

</div>

There is no public means to access either the mesh or the material from an entities ModelGraphics object. You’ll need to use the basic Model object when loading your model if you want to have low-level access to it.

[http://cesiumjs.org/Cesium/Build/Documentation/Model.html?classFilter=model](http://cesiumjs.org/Cesium/Build/Documentation/Model.html?classFilter=model)

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 24, 2015, 10:09pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/5 "2015-06-24T22:09:44Z")

</div>

Mike, you are mistaken. I put a gist together to show how to do this: [https://gist.github.com/mramato/2b6becee077c664bf25d](https://gist.github.com/mramato/2b6becee077c664bf25d) You can just copy and paste the code into Sandcastle. Here are the relevant bits and explanations.

The below function will retrieve the given Model primitive for any valid entity instance. Since the Entity API does not have any support for node/mesh/material manipulation you can safely change the values under the hood without the Entity API interfering.

function getModelForEntity(entity) {

var primitives = viewer.scene.primitives;

for (var i = 0; i \< primitives.length; i++) {

var primitive = primitives.get(i);

if (primitive instanceof Cesium.Model && [primitive.id](http://primitive.id) === entity) {

return primitive;

}

}

};

We can use this function to look up the primitive and color it. In my example, I used a primitive that has a material named ‘Red’ (the fact that the name is a color is coincidental)

var model = getModelForEntity(entity);

if (model) {

var material = model.getMaterial(‘Red’);

material.setValue(‘diffuse’, Cesium.Cartesian4.fromColor(Cesium.Color.fromRandom()));

}

When this code runs, the box model changes to the new random color.

I also through in a simple mouse-over example to show how that would work. You don’t actually need the Entity in this case, but it’s available to you if you want to color based on other entity information. The one caveat to this approach is that if you change models on the fly, you have to re-apply the color yourself, Cesium or the Entity API won’t track any of the changes you make automatically. If an Entity always has the same model though, you’re golden.

Eventually we’ll expose this all via Entity API and CZML, but for now this approach should work well, you just need to know the name of the model material you want to color.

Let me know if you’re still having problems.

Thanks,

Matt

---

<div class="post-metadata">

**Author:** ![Denver](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Denver](https://community.cesium.com/u/Denver)\
**Post date:** [June 25, 2015, 2:20am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/6 "2015-06-25T02:20:12Z")

</div>

I’ve had to use this approach to get down to the primitive and manipulate the model. Changing the color was a surprisingly common request.

---

<div class="post-metadata">

**Author:** ![D2P](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@D2P](https://community.cesium.com/u/D2P)\
**Post date:** [June 25, 2015, 4:48am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/7 "2015-06-25T04:48:17Z")

</div>

Matthew and rest of team, thank you! I was able to play around with your gist and sandcastle and figured out how to manipulate my project to use it. Thanks so much.

One thing I noticed that may be helpful for others, is that the primitive doesn't seem to be immediately available after creating the entity with viewer.entities.add(). So in the following code, "model" would be undefined.

var entity = viewer.entities.add(...);  
var model = getModelForEntity(entity);

---

<div class="post-metadata">

**Author:** ![Kanishk\_Chaturvedi](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kanishk\_Chaturvedi](https://community.cesium.com/u/Kanishk_Chaturvedi)\
**Post date:** [June 26, 2015, 1:14pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/8 "2015-06-26T13:14:59Z")

</div>

Hi Matthew,

thank you for providing this working example. I am facing a slightly different issue (I guess, I have mentioned in a different thread as well). I am trying to a highlight a textured gltf model with a different color or a transparency. Would it be possible to do that using a similar approach? For example, in your code, if we replace

uri : ‘…/…/…/Specs/Data/Models/Box/CesiumBoxTest.gltf’,

with

uri : ‘…/…/…/Specs/Data/Models/Box-Textured/CesiumTexturedBoxTest.gltf’,

can we ‘mouse-over highlight’ such textured model using a different color or transparency in the same way as being done in your code.

As I understand, the model material’s diffuse property is cartesian colors in your example, which can be replaced by another cartesian color for highlighting. However, in case of diffuse property as texture (in case of textured gltf model), we are struggling to replace with another color to produce highlighting effect. We are not able to replace texture with a color property.

Any help would be appreciated.

Best regards,

Kanishk

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 29, 2015, 11:49pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/9 "2015-06-29T23:49:18Z")

</div>

I’m by no means an expert in this area, but you definitely need to set the value of a texture material with another texture. So for example, if you have a solid blue texture, it’s trivial to modify the code I posted to turn the model blue on mouseover and then set back the original texture when finished.

If you want to have the highlight color be translucent and simply tint the underlying texture, I believe that’s more involved and not something we currently support with the public API (though I could be wrong). I could imagine you could set up your model in such a way to make it possible. We plan on having support for this use case as part of the building effort we have been actively working on.

---

<div class="post-metadata">

**Author:** ![Kanishk\_Chaturvedi](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kanishk\_Chaturvedi](https://community.cesium.com/u/Kanishk_Chaturvedi)\
**Post date:** [July 1, 2015, 4:20pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/10 "2015-07-01T16:20:10Z")

</div>

Hi Matthew - thank you for your response. It works now! Attached is the screenshot:

[![](https://lh3.googleusercontent.com/-jW1nSqOdN7A/VZQTFEoCX1I/AAAAAAAACY0/wEpyKG48h6E/s400/Cesium_Screenshot2.png)](https://lh3.googleusercontent.com/-jW1nSqOdN7A/VZQTFEoCX1I/AAAAAAAACY0/wEpyKG48h6E/s1600/Cesium_Screenshot2.png)

---

<div class="post-metadata">

**Author:** ![243400623](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/243400623/32/14887_2.png) [@243400623](https://community.cesium.com/u/243400623)\
**Post date:** [July 8, 2015, 8:48am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/11 "2015-07-08T08:48:35Z")

</div>

Hi,Kanishk。 I try changed gltf texture with specified color。 like Color.RED.  
but it not work. It shows not my specified color . it looks like links below:

[http://xiangce.baidu.com/picture/album/list/13542bc473ba5217e20545c55b2d45034f6f3a74](http://xiangce.baidu.com/picture/album/list/13542bc473ba5217e20545c55b2d45034f6f3a74)

it used like surface texture.  
Is my code is there a problem?  
thanks for your help.  
code below

---

<div class="post-metadata">

**Author:** ![Kanishk\_Chaturvedi](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kanishk\_Chaturvedi](https://community.cesium.com/u/Kanishk_Chaturvedi)\
**Post date:** [July 8, 2015, 11:36am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/12 "2015-07-08T11:36:20Z")

</div>

Hi,

it is not possible to replace the texture with cartesian color value (as you have defined here in your code)

material.setValue(‘diffuse’, Cesium.Cartesian4.fromColor(Cesium.Color.GREEN))

You can only replace the value of a texture material with another texture. You can create a texture with a solid color and use that texture value in material.setValue(). For example, if the name of your highlighting texture is _newTexture_, use

material.setValue(‘diffuse’,_newTexture_)

---

<div class="post-metadata">

**Author:** ![243400623](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/243400623/32/14887_2.png) [@243400623](https://community.cesium.com/u/243400623)\
**Post date:** [July 9, 2015, 2:55am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/13 "2015-07-09T02:55:11Z")

</div>

Hi ,Kanishk  
Thank you for your reply.  
you mean I can use newTexture with defined color?  
I'm very sorry, I'm still does not create newTexture.  
The following code does not work:

---

<div class="post-metadata">

**Author:** ![Denver](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Denver](https://community.cesium.com/u/Denver)\
**Post date:** [July 9, 2015, 4:23am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/14 "2015-07-09T04:23:49Z")

</div>

ModelMaterials are different and seperate from Materials.

[http://cesiumjs.org/Cesium/Build/Documentation/ModelMaterial.html?classFilter=material](http://cesiumjs.org/Cesium/Build/Documentation/ModelMaterial.html?classFilter=material) ModelMaterials are used by models. Materials are used by entities ( [http://cesiumjs.org/Cesium/Build/Documentation/Material.html?classFilter=material](http://cesiumjs.org/Cesium/Build/Documentation/Material.html?classFilter=material) ).

---

<div class="post-metadata">

**Author:** ![243400623](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/243400623/32/14887_2.png) [@243400623](https://community.cesium.com/u/243400623)\
**Post date:** [July 10, 2015, 11:06am UTC](https://community.cesium.com/t/how-to-color-a-model/2680/15 "2015-07-10T11:06:31Z")

</div>

Hi,Kanishk and Denver.  
thank for your help. it works now.

---

<div class="post-metadata">

**Author:** ![Macharia\_Kabiro](https://avatars.discourse-cdn.com/v4/letter/m/aeb1de/32.png) [@Macharia\_Kabiro](https://community.cesium.com/u/Macharia_Kabiro)\
**Post date:** [August 24, 2016, 1:56pm UTC](https://community.cesium.com/t/how-to-color-a-model/2680/16 "2016-08-24T13:56:17Z")

</div>

Hi All,

I have asked this question in other threads, hopefully this is the right thread to post it in.

Anyway, I’m attempting to replicate an effect (colour change on mouse hover) for glTF files and by using the “EntityModelColor.js”.

At first glance it seems to work but I have come across the situation where an object(s) stays selected (as depicted in the image below) even after the mouse cursor position is away from it, which is not desirable. Might you know what this is caused by?

[![](https://lh3.googleusercontent.com/-fTAPq3oyLnA/V72m3oZKg6I/AAAAAAAAABc/_kuTYTUsdK48S9oHxGtXrLTBb0dSMqZcwCLcB/s320/highlight2.GIF)](https://lh3.googleusercontent.com/-fTAPq3oyLnA/V72m3oZKg6I/AAAAAAAAABc/_kuTYTUsdK48S9oHxGtXrLTBb0dSMqZcwCLcB/s1600/highlight2.GIF)

Below is the section of the code used for the selection which is a slightly modified version the original “EntityModelColor.js”.

```
    //Change color on mouse over. This relies on the fact that given a primitive,

```

//you can retrieve an associted en

```
 var lastColor;

```

var lastPick;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(movement) {

```
        var primitive;

     var pickedObject = viewer.scene.pick(movement.endPosition);

        if (pickedObject) {

                primitive = pickedObject.primitive;

                if (pickedObject !== lastPick && primitive instanceof Cesium.Model) {

                            //We don't use the entity here, but if you need to color based on

                          //some entity property, you can get to that data it here.

                          var entity = [primitive.id](http://primitive.id/);

                            var material = primitive.getMaterial('Material_0');

                        //var material = primitive.getMaterial('Red'); - original line

                     lastColor = material.getValue('diffuse').clone();

                          //material.setValue('diffuse', Cesium.Cartesian4.fromColor(Cesium.Color.BLUE));

                    material.setValue('diffuse', Cesium.Cartesian4.fromColor(Cesium.Color.YELLOW));

                    lastPick = pickedObject;

                   }

          } else if (lastPick) {

             primitive = lastPick.primitive;

            var material = primitive.getMaterial('Material_0');

                //var material = primitive.getMaterial('Red'); - original line

             material.setValue('diffuse', lastColor);

                   lastPick = undefined;

      }

  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

```

``

Regards

Kabiro