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

虚线边界

三个闭合环加一条贯穿路径,全部用虚线绘制。实段与空段的长度可以拖动调整, 这是制图里区分行政界、保护界与临时管控区最省事的手段。

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

必须先算弧长

LineDashedMaterial 判断在哪里断开,靠的是每个顶点携带的 lineDistance 属性。这个属性不会自动生成, 必须显式调用 computeLineDistances()。少了这一步,整条线会画成实线, 控制台也不会报错,是最常见的坑。

dashSize 与 gapSize 是世界单位,不是像素。 相机拉远时虚线看起来会变细变密,因为屏幕上的尺度变了。 需要屏幕上恒定的虚线间距,就得按相机距离动态换算这两个值。

参数取值说明
dashSize0.55实段长度,可实时修改
gapSize0.32空段长度
scale1整体缩放,等于同时改两个值
lineDistance自动由 computeLineDistances() 写入

闭合环也要收尾

示例生成环时多放了一个点,让首尾坐标重合,弧长才会连续。 若直接用 LineLoop,闭合处可能残留半段空隙, 因为弧长在最后一点终止,虚线相位不一定刚好落在实段上。

虚线宽度只有一像素。原生 LineBasicMaterial 的 linewidth 在大多数平台上被忽略。需要更粗的虚线, 得换 Line2 配合 LineMaterial,它的 dashed 开关同样要求先算距离。