Passing heatmap texture in the Mesh is not working

Questions
, ,
1

I am not able to pass the heatmap texture into the shader and color map the plane mesh.
Can anyone please help me.

const beforeCompileShader = (shader) => {
  shader.uniforms.colors = tankMaterial.userData.uniforms.colors;
  shader.uniforms.heatRatio = tankMaterial.userData.uniforms.heatRatio;
  shader.fragmentShader = `
  uniform vec3 colors[2];
  uniform float heatRatio;
  uniform sampler2D heatTexture;
  uniform float hotTemp;
  uniform float coldTemp;
  ${shader.fragmentShader}
`.replace(
    `#include <color_fragment>`,
    `#include <color_fragment>
    vec3 coldColor = texture(heatTexture, vec2(0.5, 0.5)).rgb;
    vec3 hotColor = texture(heatTexture, vec2(0.5, 0.5)).rgb;
    float colorRatio = smoothstep( heatRatio-0.5, heatRatio + 0.5, vUv.y);
    diffuseColor.rgb = mix(coldColor, hotColor, colorRatio);
  `
  );
};

const tankGeometry = new THREE.PlaneGeometry(50, 90);
  const tankGeometry = new THREE.PlaneGeometry(50, 90);
  tankMaterial = new THREE.MeshBasicMaterial({
    onBeforeCompile: (shader) => {
      beforeCompileShader(shader);
    },
    side: THREE.DoubleSide,
  });

  tankMaterial.defines = { USE_UV: "" };
  let loader = new THREE.TextureLoader();
  loader.load("./public/cool-warm-colormap.png", function (texture) {
    texture.needsUpdate = true;
    texture.generateMipmaps = true;
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.x = 100;
    texture.repeat.y = 100;

    tankMaterial.userData = {
      uniforms: {
        heatRatio: { value: 0.8 },
        colors: {
          value: [new THREE.Color(0, 0, 1), new THREE.Color(0, 1, 1)],
        },
        heatTexture: {
          type: "t",
          value: texture,
        },
        hotTemp: {
          value: 0.7,
        },
        coldTemp: {
          value: 0.1,
        },
      },
    };
    tankMaterial.userData.uniforms.needsUpdate = true;
    let tank = new THREE.Mesh(tankGeometry, tankMaterial);
    tank.rotation.x = Math.PI * 0.5;
    const collectorGeometry = new THREE.PlaneGeometry(20, 50);
    const collectorMaterial = new THREE.MeshBasicMaterial({
      side: THREE.DoubleSide,
    });
    collectorMaterial.onBeforeCompile = (shader) => {
      beforeCompileShader(shader);
    };
    collectorMaterial.defines = { USE_UV: "" };
    collectorMaterial.userData = {
      uniforms: {
        heatRatio: { value: 0.5 },
        heatTexture: {
          type: "t",
          value: texture,
        },
        colors: {
          value: [new THREE.Color(1, 0, 0), new THREE.Color(1, 1, 1)],
        },
        hotTemp: {
          value: 0.7,
        },
        coldTemp: {
          value: 0.1,
        },
      },
    };

    collectorMaterial.needsUpdate = true;
    let collector = new THREE.Mesh(collectorGeometry, collectorMaterial);
    collector.rotation.x = Math.PI * 0.5;
    scene.add(tank);
    scene.add(collector);

    tank.position.copy(tankPosition);
    collector.position.copy(collectorPosition);
    done = true;
  });

My output is:

image

while i was expecting it to be some color !!