threejs-热力图

1.绘制温度调色板

let createPalette = () => {
   
    //颜色条的颜色分布
    let colorStops = {
   
        1.0: "#f00",
        0.8: "#e2fa00",
        0.6: "#33f900",
        0.3: "#0349df",
        0.0: "#fff"
    }

    //颜色条的大小
    let width = 256, height = 10

    // 创建canvas
    let paletteCanvas = document.createElement("canvas")
    paletteCanvas.width = width
    paletteCanvas.height = height
    paletteCanvas.style.position = 'absolute'
    paletteCanvas.style.top = '0'
    paletteCanvas.style.right = '0'
    let ctx = paletteCanvas.getContext("2d")

    // 创建线性渐变色
    let linearGradient = ctx.createLinearGradient(0, 0, width, 0)
    for (const key in colorStops) {
   
        linearGradient.addColorStop(key, colorStops[key])
    }

    // 绘制渐变色条