首页 / three.js / 使用示例
多边形要素
一块带内部空洞的面要素和一座独立小岛,全部由代码生成的环坐标构造。 三角剖分按钮能看清 three.js 如何把带洞的多边形拆成三角形。
源码与运行效果
环与洞的写法
外环用一串 Vector2 依次 moveTo、lineTo,
闭合由 Shape 自动处理。洞是 Path,压进
shape.holes 数组,挤出时就会从实体里挖掉。
环的方向有讲究:外环逆时针、洞顺时针,three.js 的剖分器会据此判断内外。
坐标就在平面米制单位下定义,没有经纬度转换。实际项目里先把投影后的平面坐标
减去原点、除以比例尺,得到场景单位,再交给 Shape。
| 项 | 取值 | 说明 |
|---|---|---|
| 外环顶点 | 14 | 半径带正弦扰动,避免看起来像标准圆 |
| 洞半径 | 1.5 | 圆心偏移,边界不与外环平行 |
| 挤出厚度 | 0.5 | 薄板比纯平面更容易看出朝向 |
| 边界线阈值 | 25° | EdgesGeometry 只保留折角大的边 |
边界线为什么单独画
Mesh 的三角剖分会在面内部产生大量对角线,直接用线框显示会糊成一片。
EdgesGeometry 通过夹角阈值筛掉这些共面边,只留下外轮廓与洞的边界,
这才是制图意义上的「界线」。
边界线用 LineBasicMaterial,绘制顺序与实体分开,
不参与深度判断时会有穿模感,因此示例把透明度降到 0.55,叠在实体上方更自然。
大坐标要先做局部化。面要素坐标若是六位数的投影坐标,直接送进
Shape 会因为浮点精度出现缺口。先减去区域中心点,
渲染完成后再把相机或模型平移回去。