Three.js 3D 热力云图效果实现

一、效果展示及原理概述1.1 核心思想3D 热力云图的核心思路是将 2D 热力图数据转化为 3D 立体效果。整体流程分为三个阶段：原始数据 → 2D 热力图(heatmap.js) → 纹理贴图 → 3D 几何体顶点位移(Three.js Shader)1.2 技术架构技术作用heatmap.js生成 2D 热力图画布（颜色映射热度值）Three.js Texture将热力图画布作为纹理注入 GPUPlaneBufferGeometry高分辨率平面（1000×1000 分段），提供密集顶点供位移ShaderMaterial自定义着色器，读取纹理像素值驱动顶点 Y 方向位移1.3 3D 云图效果的关键高度图（HeightMap）：在顶点着色器中采样热力图纹理的红色通道（R）作为高度值，乘以heightRatio控制位移幅度密集网格：PlaneBufferGeometry(290, 80, 1000, 1000)提供 100 万个顶点，实现平滑的地形起伏透明云感：片元着色器中根据高度偏差计算透明度，高度越高偏差越大，透明度越高，形成云雾消散的视觉效果二、完整 HTML 实现2.1 完整代码!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"metaname="viewport"content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"title3D 热力云图教程/titlestyletype="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/headbodydivid="heatmap"/divdivid="heatmap-canvas"style="display:none;"/divdivclass="btn"buttononclick="toggleHeatMap()"