VincentFHR

前言 之前在证券行业，接触过移动端K线图的需求； H5 K线图，需支持无限左右滑动，支持样式自定义； 纯canvas制作，不借助任何第三方图表库。 一、先看最终的效果 1、GIF动图如下 2、支持样式

可能会有这样的需求， 希望在原来 three.js 3D 地图的基础上，加上热力图。这里给出了一个方案， 那就是如何通过 Shader 编程，实现 3D 场景下的手绘热力图。

上一篇 《Three.js 加载 glb 模型实现散点标注》 较为详细地介绍了在 Three.js 中， 怎么加载 glb 格式的 3D 模型， 本文将会跟高德地图结合起来，实现地图 3D 标注。

用 three.js 加载 glb 格式的 3D 文件， 并改变其材质，加入到 3D场景中， 加上动画效果， 使之可以在数字孪生做散点标注

three.js 如果通过 shader 编程，实现蜂窝网格扩散动画， 这里有详细的原理解说，感兴趣的，可以去试试看。

3D 版本的饼状图，其实用 echarts 也是可以做的，但是，echarts 3D 饼状图的代码也是挺复杂的，而且，如果想在饼状图基础上再加上其他一些特效，那么用 three.js 可能更加合适。

这里是选用 three.js 来开发 3D 地图，给出了较为详细的功能实现方案。可以作为入门 three.js 的参考项目。