在高德地图中进行边界墙图层开发（二）
如何使用three在高德地图的指定的行政区域边界建立一道支持渐变和动画的酷炫边界墙。
3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。
接上一章内容。
代码实现
给垂直墙A赋予一层材质MTA，这层材质是静态的图片。
这一步就很简单了，实例化一个基础材质MeshBasicMaterial即可，为了让墙体呈现半透明效果，这里用了一张仅有灰度的图片作为材质的alpha透明贴图。在灰度通道里，纯黑色为不显示，纯白色为显示，中间过渡的灰色会半透明显示。材质贴图的默认铺设方式是拉伸，即它会自动拉伸自己铺满整个平面，这里按默认就行。
拷贝垂直墙体A，在相同的位置添加一层垂直墙体B，并给B赋予一层材质MTB，MTB在垂直方面的展示策略为不断重复；为了方便查看，这里用红色材质区分一下。
这里需要重点关注的是generateTexture方法，如果是简单实现效果，其实如步骤2一样使用图片做贴图材质即可，但我们这边的需求是“颜色可配置” ，因为要求根据传入的颜色动态生成材质，如图所示，墙体可能是红色、青色、紫色等等。
这里的开发思路是用canvas绘制一个透明渐变的矩形，然后把canvas作为贴图创建材质即可。
在浏览器逐帧切换时，改变MTB的垂直偏移，使其产生平滑的上下偏移效果。基础工作做完了，动态效果就很简单，在每一次requestAnimationFrame时 更新纹理垂直偏移量就可以了。
还能做哪些优化？
减少模型
上文的实现思路讲到我们实现墙体动画效果，用了常规垂直面A和动态垂直面B两个几何模型，事实上是可以通过自定义着色器的方式将常规材质和动态材质合并为一个材质放到一个垂直面上的，这样的话可以减少一个带材质的垂直面墙体模型的开销。 前提是要懂得着色器Shader的相关知识，能够使用GLSL语言编写实现，这个在做完后面的需求 建筑体动态的材质的时候应该可以做下分享。
处理窄面
当两个相邻坐标点太过靠近导致垂直墙体过窄时，渲染出来的墙体会因贴图的横向压缩，看起来颜色有点浓重，但其实我觉得这样还挺好看的（doge）。
更多样效果
墙体的动效其实还是可以花点心思做出其他效果，最简单的实现方式还是更换透明贴图，但用贴图的方式会因为每个面宽度差异太大而造成窄面问题不好控制，目前还没想好怎么处理这个问题。
在高德地图中进行边界墙图层开发 - 索引