three.js中绘制宽线的两种方式_three.js 线宽度

作者：小蓝xlanll | 2024-02-16 18:38:59

踩

three.js 线宽度

webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制，有两种做法：

1.纯CPU计算

这种方式的优点是在处理端头、拐点时更加灵活，缺点是对CPU算力有很大消耗，每次缩放地图都需要根据地图分辨率重新计算宽线坐标。

2.GPU着色器计算

组织两份线顶点数据，其中一份向当前拐点的法向量正方向偏移，另一份向当前拐点的法向量反方向偏移，偏移距离为当前地图分辨率下，像素长度为半个线宽的距离。

关于数据处理和计算过程，可以参考THREE.js的MeshLine

同时，我参考了THREE.js的MeshLine类，写了一个宽线符号动画类，有兴趣的可以关注一下。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/96159