THREE.js中球面GeoJSON多边形三角化异常问题求助

根源分析 #

• 投影畸变引发拓扑错误：球面转2D投影必然存在精度损失，尤其是极点、边缘区域的点经投影后距离、顺序失真，poly2tri处理这类畸变点集时，容易出现约束边失效、三角面重叠或断裂，直接导致暗斑、裂缝。
• poly2tri鲁棒性不足：该库对输入点集的精度、拓扑一致性要求极高，带噪点的边界会引入大量接近共线、重叠的点，甚至约束边交叉，触发剖分失败，生成无效三角面。
• 球面转平面的逻辑漏洞：二十面体顶点是球面坐标，直接投影后未处理跨日界线多边形的闭合性，也未对多边形做归一化、裁剪，导致poly2tri接收的是不合法的2D多边形。
• 实现细节疏漏：噪点添加时破坏了边界点的连续性，三角化前未对点集做去重、排序、自相交修复等预处理。

修复方案 #

1. 直接在球面上处理三角化 #

放弃平面投影转2D的流程，改用球面原生工具：

• 用@turf/turf的球面三角化能力，基于球面坐标直接计算Delaunay三角网，彻底规避投影畸变问题。
• 或基于二十面体顶点，通过球面距离计算邻接关系，自定义实现球面Delaunay三角化，结合d3-geo-voronoi的球面Voronoi结果生成省份边界。

2. 优化投影与预处理流程（若坚持平面三角化） #

• 选低畸变投影：采用全局低畸变投影（如限制纬度范围的墨卡托、分半球正射投影），对每个半球的点单独投影、三角化后再拼接回球面。
• 严格预处理点集：
  • 对投影后的点做去重（剔除距离小于精度阈值的重叠点）。
  • 用turf.cleanCoords或turf.buffer(0)修复多边形自相交问题。
  • 确保多边形顶点按顺时针/逆时针有序排列，且首尾点重合保证闭合性。
• 替换三角化库：改用earcut（THREE.js内置，对复杂多边形兼容性更强）或libtess2，这类库对带噪点、不规则边界的处理更稳定。

3. 噪点边界生成优化 #

• 在球面坐标上对边界点添加扰动，再转换为GeoJSON，避免在2D投影平面扰动导致拓扑断裂。
• 限制噪点扰动幅度，保证边界点保持连续的球面拓扑，不出现交叉或断裂。

4. THREE.js渲染层补漏 #

• 开启PolygonOffset，缓解因深度精度问题导致的视觉裂缝。
• 对三角面边缘做轻微膨胀处理，或使用带边缘平滑的材质掩盖暗斑。

工具库与资源建议 #

• 球面几何处理：@turf/turf（全功能球面GeoJSON处理）、d3-geo（原生支持球面投影与Voronoi划分，无需转2D）。
• 2D三角化：earcut（THREE.js内置，轻量高效）、libtess2（处理复杂多边形更鲁棒）。
• 算法参考：查阅基于二十面体细分的球面Delaunay三角化经典实现逻辑，直接复用球面几何计算逻辑替代平面转译。

内容的提问来源于stack exchange，提问作者kishetate