首页 / three.js / 使用示例
虚线边界
三个闭合环加一条贯穿路径,全部用虚线绘制。实段与空段的长度可以拖动调整, 这是制图里区分行政界、保护界与临时管控区最省事的手段。
源码与运行效果
必须先算弧长
LineDashedMaterial 判断在哪里断开,靠的是每个顶点携带的
lineDistance 属性。这个属性不会自动生成,
必须显式调用 computeLineDistances()。少了这一步,整条线会画成实线,
控制台也不会报错,是最常见的坑。
dashSize 与 gapSize 是世界单位,不是像素。
相机拉远时虚线看起来会变细变密,因为屏幕上的尺度变了。
需要屏幕上恒定的虚线间距,就得按相机距离动态换算这两个值。
| 参数 | 取值 | 说明 |
|---|---|---|
dashSize | 0.55 | 实段长度,可实时修改 |
gapSize | 0.32 | 空段长度 |
scale | 1 | 整体缩放,等于同时改两个值 |
lineDistance | 自动 | 由 computeLineDistances() 写入 |
闭合环也要收尾
示例生成环时多放了一个点,让首尾坐标重合,弧长才会连续。
若直接用 LineLoop,闭合处可能残留半段空隙,
因为弧长在最后一点终止,虚线相位不一定刚好落在实段上。
虚线宽度只有一像素。原生 LineBasicMaterial 的
linewidth 在大多数平台上被忽略。需要更粗的虚线,
得换 Line2 配合 LineMaterial,它的
dashed 开关同样要求先算距离。