一、效果展示及原理概述
1.1 核心思想
3D 热力云图的核心思路是将 2D 热力图数据转化为 3D 立体效果。整体流程分为三个阶段：
原始数据 → 2D 热力图(heatmap.js) → 纹理贴图 → 3D 几何体顶点位移(Three.js Shader)1.2 技术架构
| 技术 | 作用 |
|---|---|
| heatmap.js | 生成 2D 热力图画布（颜色映射热度值） |
| Three.js Texture | 将热力图画布作为纹理注入 GPU |
| PlaneBufferGeometry | 高分辨率平面（1000×1000 分段），提供密集顶点供位移 |
| ShaderMaterial | 自定义着色器，读取纹理像素值驱动顶点 Y 方向位移 |
1.3 3D 云图效果的关键
- 高度图（HeightMap）：在顶点着色器中采样热力图纹理的红色通道（R）作为高度值，乘以
heightRatio控制位移幅度 - 密集网格：
PlaneBufferGeometry(290, 80, 1000, 1000)提供 100 万个顶点，实现平滑的地形起伏 - 透明云感：片元着色器中根据高度偏差计算透明度，高度越高偏差越大，透明度越高，形成云雾消散的视觉效果
二、完整 HTML 实现
2.1 完整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>3D 热力云图教程</title><styletype="text/css">body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}.btn{position:absolute;top:20px;left:100px;z-index:100;}</style><!-- 顶点着色器：根据高度图位移顶点 --><scriptid="vertexShader"type="x-shader/x-vertex">uniform sampler2D heightMap;uniform float heightRatio;varying vec2 vUv;varying float hValue;varying vec3 cl;voidmain(){vUv=uv;vec3 pos=position;// 采样热力图颜色（用于片元着色器显示）cl=texture2D(heightMap,vUv).rgb;// 采样热力图红色通道作为高度值hValue=texture2D(heightMap,vUv).r;// 根据高度值位移顶点 Y 坐标pos.y=hValue*heightRatio;gl_Position=projectionMatrix*modelViewMatrix*vec4(pos,1.0);}</script><!-- 片元着色器：根据高度偏差计算透明度 --><scriptid="fragmentShader"type="x-shader/x-fragment">varying float hValue;varying vec3 cl;voidmain(){// 计算与最大高度(1.0)的偏差float v=abs(hValue-1.0);// 透明度随偏差增大而降低，形成云雾消散效果gl_FragColor=vec4(cl,0.8-v*v);}</script></head><body><divid="heatmap"></div><divid="heatmap-canvas"style="display:none;"></div><divclass="btn"><buttononclick="toggleHeatMap()"
