Three.js 3D 热力图效果 | 三维可视化 / AI 提示词

Three.js 3D 热力图效果 | 三维可视化 / AI 提示词

📋 AI 提示词

使用 Three.js 和 heatmap.js 库创建 3D 热力图效果，通过 ShaderMaterial 将热力图数据转换为 3D 高度可视化。

---

🖼️ 效果预览

---

🎮 案例演示

立即体验

---

效果拆解

效果	实现方式
热力图生成	使用heatmap.js生成2D热力图
纹理转换	将热力图Canvas转换为Three.js纹理
高度映射	通过着色器将热力值映射为高度
颜色显示	根据高度值显示对应颜色
透明度控制	根据高度值调整透明度
参数调节	使用GUI控制高度比例

核心技术点

1. 热力图生成

const getRandom = (max, min) => Math.round((Math.random() * (max - min + 1) + min) * 10) / 10

var heatmap = h337.create({
  container: document.createElement('div'),
  width: 256,
  height: 256,
  blur: '0.8',
  radius: 10
});

var i = 0, max = 10, data = [];
while (i < 2000) {
  data.push({ x: getRandom(1, 256), y: getRandom(1, 256), value: getRandom(1, 6) });
  i++;
}

heatmap.setData({
  max: max,
  data: data
});

2. 纹理创建

const texture = new THREE.CanvasTexture(heatmap._renderer.canvas);

3. 着色器材质

const geometry = new THREE.PlaneGeometry(50, 50, 1000, 1000);
geometry.rotateX(-Math.PI * 0.5);

const material = new THREE.ShaderMaterial({
  uniforms: {
    heightMap: { value: texture },
    heightRatio: { value: 5 }
  },
  vertexShader: `	
    uniform sampler2D heightMap;
    uniform float heightRatio;
    varying vec2 vUv;
    varying float hValue;
    varying vec3 cl;
    void main() {
      vUv = uv;
      vec3 pos = position;
      cl = texture2D(heightMap, vUv).rgb;
      hValue = texture2D(heightMap, vUv).r;
      pos.y = hValue * heightRatio;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    }`,
  fragmentShader: `
    varying float hValue;
    varying vec3 cl;
    void main() {
      float v = abs(hValue - 1.);
      gl_FragColor = vec4(cl, .8 - v * v) ; 
    }`,
  transparent: true,
})

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

4. GUI控制

new gui.add(mesh.material.uniforms.heightRatio, "value", 1, 15).name("heightRatio")

调试技巧

1. 高度比例：调整heightRatio参数改变3D高度
2. 热力点数量：修改循环次数控制热力点密度
3. 热力点强度：调整value参数改变热力点强度
4. 网格密度：调整PlaneGeometry的分段数获得更精细的效果
5. 透明度范围：修改fragmentShader中的透明度计算公式

扩展思路

1. 动态数据：实现热力图数据的实时更新
2. 交互效果：鼠标悬停显示具体数值
3. 多层数据：叠加多个热力图层
4. 时间序列：实现热力图随时间变化的效果
5. 3D交互：添加点击选择和缩放功能
6. 数据导入：支持从外部文件导入热力图数据