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 = 230let y = 60const 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)
}