three.js实现热力图（vue heatmap.js）

vue+three.js项目

heatmap.js这个库太久没维护了，换别人二开的库@rengr/heatmap.js

npm i @rengr/heatmap.js

使用方式与heatmap.js这个库一样

heatmap.js参考文档

import h337 from '@rengr/heatmap.js'
function addHeatmapPlane() {
  let x = 230
  let y = 60
  const canvasBox = document.createElement('div')
  document.body.appendChild(canvasBox)

  canvasBox.style.width = x + 'px'
  canvasBox.style.height = y + 'px'
  canvasBox.style.position = 'absolute'

  let canvas = h337.create({
    container: canvasBox,
    radius: 10,
    maxOpacity: 0.8,
    minOpacity: 0
  })
  canvas.setData({
    max: 20,
    min: 0,
    data: [
      { x: 71, y: 30, value: 2 },
      { x: 80, y: 35, value: 6 },
      { x: 90, y: 30, value: 4 },
      { x: 130, y: 35, value: 15 },
      { x: 140, y: 30, value: 20 },
      { x: 150, y: 30, value: 10 },
      { x: 110, y: 45, value: 11 },
      { x: 150, y: 26, value: 13 },
      { x: 190, y: 45, value: 6 },
      { x: 220, y: 40, value: 12 }
    ]
  })
  const g = new THREE.PlaneGeometry(x, y)
  const m = new THREE.MeshBasicMaterial({
    map: new THREE.CanvasTexture(canvas._renderer.canvas),
    transparent: true,
    side: THREE.DoubleSide
  })
  heatmapPlane = new THREE.Mesh(g, m)
  heatmapPlane.rotateX(Math.PI / 2)
  heatmapPlane.position.set(15, 8, -10)
  scene.add(heatmapPlane)
  document.body.removeChild(canvasBox)
}