经纬志
首页 / three.js / 使用示例

多边形要素

一块带内部空洞的面要素和一座独立小岛,全部由代码生成的环坐标构造。 三角剖分按钮能看清 three.js 如何把带洞的多边形拆成三角形。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

环与洞的写法

外环用一串 Vector2 依次 moveTo、lineTo, 闭合由 Shape 自动处理。洞是 Path,压进 shape.holes 数组,挤出时就会从实体里挖掉。 环的方向有讲究:外环逆时针、洞顺时针,three.js 的剖分器会据此判断内外。

坐标就在平面米制单位下定义,没有经纬度转换。实际项目里先把投影后的平面坐标 减去原点、除以比例尺,得到场景单位,再交给 Shape。

项取值说明
外环顶点14半径带正弦扰动,避免看起来像标准圆
洞半径1.5圆心偏移,边界不与外环平行
挤出厚度0.5薄板比纯平面更容易看出朝向
边界线阈值25°EdgesGeometry 只保留折角大的边

边界线为什么单独画

Mesh 的三角剖分会在面内部产生大量对角线,直接用线框显示会糊成一片。 EdgesGeometry 通过夹角阈值筛掉这些共面边,只留下外轮廓与洞的边界, 这才是制图意义上的「界线」。

边界线用 LineBasicMaterial,绘制顺序与实体分开, 不参与深度判断时会有穿模感,因此示例把透明度降到 0.55,叠在实体上方更自然。

大坐标要先做局部化。面要素坐标若是六位数的投影坐标,直接送进 Shape 会因为浮点精度出现缺口。先减去区域中心点, 渲染完成后再把相机或模型平移回去。