# Adding heatmap gradient color to MeshStandardMaterial on a mesh

**URL:** <https://discourse.threejs.org/t/adding-heatmap-gradient-color-to-meshstandardmaterial-on-a-mesh/8298>\
**Category:** Questions\
**Tags:** materials\
**Created:** [June 28, 2019, 2:50pm UTC](https://discourse.threejs.org/t/adding-heatmap-gradient-color-to-meshstandardmaterial-on-a-mesh/8298 "2019-06-28T14:50:07Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 28, 2019, 3:38pm UTC](https://discourse.threejs.org/t/adding-heatmap-gradient-color-to-meshstandardmaterial-on-a-mesh/8298/6 "2019-06-28T15:38:25Z")

</div>

For the specific colors you could either create a map out of the displacement map or add something to the shader by extending it, you can do that manually or use a function like [this](https://discourse.threejs.org/t/function-to-extend-standard-materials/7882). Something like this for example, it will use the displacement map to blend between two colors from blue (low) to yellow (high).

[https://codepen.io/Fyrestar/pen/OezxqO](https://codepen.io/Fyrestar/pen/OezxqO)  
[![](https://mevedia.com/img/heatmap.png) ](https://mevedia.com/img/heatmap.png)

```
const yourMaterial = THREE.ShaderMaterial.extend(THREE.MeshStandardMaterial, {

    header: 'varying vec3 vColor; uniform vec3 color1; uniform vec3 color2;',

    vertex: {
        '#include <fog_vertex>': 'vColor = mix( color1, color2, texture2D( displacementMap, uv ).x );'
    },
    fragment: {
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : 'gl_FragColor.rgb = vColor;'
    },

    material: {
        wireframe: true
    },

    uniforms: {
        displacementMap: YOUR_DISPLACEMENT_TEXTURE,
        displacementScale: 100,
        color1: new THREE.Color('blue'),
        color2: new THREE.Color('yellow')
    }

});

```

And here one without specific colors but having a transition from blue, green to yellow (like the example you showed)  
[https://codepen.io/Fyrestar/pen/GbyOjy](https://codepen.io/Fyrestar/pen/GbyOjy)  
[![](https://mevedia.com/img/heatmap2.png) ](https://mevedia.com/img/heatmap2.png)

---

_[View the full topic](https://discourse.threejs.org/t/adding-heatmap-gradient-color-to-meshstandardmaterial-on-a-mesh/8298)._