# how to lighlight a gltf model?

**URL:** <https://community.cesium.com/t/how-to-lighlight-a-gltf-model/4852>\
**Category:** CesiumJS\
**Created:** [November 25, 2016, 5:05am UTC](https://community.cesium.com/t/how-to-lighlight-a-gltf-model/4852 "2016-11-25T05:05:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zhouhai19931228](https://avatars.discourse-cdn.com/v4/letter/z/96bed5/32.png) [@zhouhai19931228](https://community.cesium.com/u/zhouhai19931228)\
**Post date:** [November 25, 2016, 5:05am UTC](https://community.cesium.com/t/how-to-lighlight-a-gltf-model/4852/1 "2016-11-25T05:05:48Z")

</div>

Hi  
&nbsp;&nbsp;  
I want highlight a model,and i use the EntityModelColor.js,the link [https://gist.github.com/mramato/2b6becee077c664bf25d](https://gist.github.com/mramato/2b6becee077c664bf25d)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//scene.context.createTexture2D](https://scene.context.createTexture2D) is not part of the public API,  
&nbsp;&nbsp;&nbsp;&nbsp;//so this code may have to change in the future.  
&nbsp;&nbsp;&nbsp;&nbsp;var texture = viewer.scene.context.createTexture2D({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source : image  
&nbsp;&nbsp;&nbsp;&nbsp;});

,but the texture is not part of the public API,and I use

var texture = Cesium.Material.fromType('Image', {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path:'../images/checkerboard.png'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

to replace it，the model is changed,but it's not what i want ,The first material picture is cesium logo，and the replace picture is checkerboar.png .

If i want highlight the model,what should i do ? this is my code in Sandcastle:  
var viewer = new Cesium.Viewer('cesiumContainer', {  
&nbsp;&nbsp;&nbsp;&nbsp;infoBox : false,  
&nbsp;&nbsp;&nbsp;&nbsp;selectionIndicator : false  
});

var entity = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;position : Cesium.Cartesian3.fromDegrees(-123, 44, 10),  
&nbsp;&nbsp;&nbsp;&nbsp;model : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri : '../../../Specs/Data/Models/Box-Textured/CesiumTexturedBoxTest.gltf',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimumPixelSize : 128  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});  
viewer.zoomTo(entity, new Cesium.HeadingPitchRange(Math.PI / 4, -Math.PI / 4, 3));

Cesium.loadImage('../images/checkerboard.png').then(function(image) {  
&nbsp;&nbsp;&nbsp;&nbsp;[//scene.context.createTexture2D](https://scene.context.createTexture2D) is not part of the public API,  
&nbsp;&nbsp;&nbsp;&nbsp;//so this code may have to change in the future.  
&nbsp;&nbsp;&nbsp;var texture = Cesium.Material.fromType('Image', {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path:'../images/checkerboard.png'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;//Change color on mouse over. This relies on the fact that given a primitive,  
&nbsp;&nbsp;&nbsp;&nbsp;//you can retrieve an associted en  
&nbsp;&nbsp;&nbsp;&nbsp;console.log(1);  
&nbsp;&nbsp;&nbsp;&nbsp;var originalTexture;  
&nbsp;&nbsp;&nbsp;&nbsp;var lastPick;  
&nbsp;&nbsp;&nbsp;&nbsp;var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
&nbsp;&nbsp;&nbsp;&nbsp;var material;  
&nbsp;&nbsp;&nbsp;&nbsp;handler.setInputAction(function(movement) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var primitive;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var pickedObject = viewer.scene.pick(movement.endPosition);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pickedObject) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;primitive = pickedObject.primitive;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pickedObject !== lastPick && primitive instanceof Cesium.Model) {  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//We don't use the entity here, but if you need to color based on  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//some entity property, you can get to that data it here.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entity = primitive.id;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material = primitive.getMaterial('Texture');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;originalTexture = material.getValue('diffuse');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(originalTexture);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material.setValue('diffuse', Sandcastle);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastPick = pickedObject;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (lastPick) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;primitive = lastPick.primitive;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material = primitive.getMaterial('Texture');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material.setValue('diffuse', originalTexture);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastPick = undefined;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);  
&nbsp;&nbsp;&nbsp;&nbsp;  
});

//Ability to look up the Model associated with an entity  
function getModelForEntity(entity) {  
&nbsp;&nbsp;&nbsp;&nbsp;var primitives = viewer.scene.primitives;  
&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i \< primitives.length; i++) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var primitive = primitives.get(i);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (primitive instanceof Cesium.Model && primitive.id === entity) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return primitive;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [November 25, 2016, 3:24pm UTC](https://community.cesium.com/t/how-to-lighlight-a-gltf-model/4852/2 "2016-11-25T15:24:01Z")

</div>

I can’t really help too much with the code sample since highlighting a textured model is not as straightforward. There is a branch in Cesium for handling model coloring that you can check out: [https://github.com/AnalyticalGraphicsInc/cesium/pull/4547](https://github.com/AnalyticalGraphicsInc/cesium/pull/4547).

---

<div class="post-metadata">

**Author:** ![zhouhai19931228](https://avatars.discourse-cdn.com/v4/letter/z/96bed5/32.png) [@zhouhai19931228](https://community.cesium.com/u/zhouhai19931228)\
**Post date:** [November 25, 2016, 5:09pm UTC](https://community.cesium.com/t/how-to-lighlight-a-gltf-model/4852/3 "2016-11-25T17:09:33Z")

</div>

Thank you very much,Sean!  
I'm trying other ways,may reach my goal!