Lines Dashed

<!--
  说明：虚线不需要贴图，LineDashedMaterial 按弧长切分线段，绘制前要算好距离
  核心逻辑：Line.computeLineDistances() 写入 lineDistance 属性，dashSize 才有依据
  依赖：three.js 0.160.0、OrbitControls · jsDelivr CDN（ESM + importmap）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>虚线边界</title>
<style>
  html,body{height:100%;margin:0;background:#0c1116}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar input[type=range]{width:120px;accent-color:#4f9ef8}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
</style>
</head>
<body>
<div class="bar">
  <span>虚线 <b id="dashv">0.55 / 0.32</b></span>
  <label>实段 <input type="range" id="dash" min="0.2" max="1.6" step="0.05" value="0.55"></label>
  <label>空段 <input type="range" id="gap" min="0.1" max="1" step="0.05" value="0.32"></label>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<div id="stage"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0c1116);
scene.fog = new THREE.Fog(0x0c1116, 32, 66);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(14, 13, 18);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.47;
controls.update();

scene.add(new THREE.HemisphereLight(0xb6cde8, 0x121a20, 1.3));

const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(44, 44),
  new THREE.MeshStandardMaterial({ color: 0x18212b, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

const grid = new THREE.GridHelper(44, 44, 0x1f2c3a, 0x161f28);
grid.position.y = 0.01;
scene.add(grid);

/* 三组要素：行政边界、保护区边界、临时管控线，用不同虚线参数区分 */
function makeRing(cx, cz, radius, wobble, seed) {
  const pts = [];
  const n = 64;
  for (let i = 0; i <= n; i++) {
    const a = (i / n) * Math.PI * 2;
    const r = radius + Math.sin(a * 3 + seed) * wobble + Math.cos(a * 5 - seed) * wobble * 0.4;
    pts.push(new THREE.Vector3(cx + Math.cos(a) * r, 0.12, cz + Math.sin(a) * r));
  }
  return pts;
}

const dashedMat = new THREE.LineDashedMaterial({
  color: 0x64d2ff,
  dashSize: 0.55,
  gapSize: 0.32,
  scale: 1,
  transparent: true,
  opacity: 0.95
});

const ringA = new THREE.Line(new THREE.BufferGeometry().setFromPoints(makeRing(0, 0, 9, 0.8, 0.4)), dashedMat);
const ringB = new THREE.Line(new THREE.BufferGeometry().setFromPoints(makeRing(-11, 9, 4.2, 0.5, 1.7)), dashedMat);
const ringC = new THREE.Line(new THREE.BufferGeometry().setFromPoints(makeRing(12, -8, 3.4, 0.3, 3.1)), dashedMat);

[ringA, ringB, ringC].forEach(function (l) {
  l.computeLineDistances();
  scene.add(l);
});

/* 一条贯穿的虚线路径，验证非闭合线也能正确计算弧长 */
const routePts = [];
for (let i = 0; i <= 40; i++) {
  const t = i / 40;
  routePts.push(new THREE.Vector3(
    THREE.MathUtils.lerp(-18, 18, t),
    0.12,
    Math.sin(t * Math.PI * 2) * 5
  ));
}
const route = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(routePts),
  new THREE.LineDashedMaterial({ color: 0xffc857, dashSize: 0.8, gapSize: 0.45 })
);
route.computeLineDistances();
scene.add(route);

/* 边界上放几根短桩，标出走向 */
const postMat = new THREE.MeshStandardMaterial({ color: 0x7f8fa3, roughness: 0.6 });
for (let i = 0; i < 10; i++) {
  const p = routePts[i * 4];
  const post = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.9, 6), postMat);
  post.position.set(p.x, 0.45, p.z);
  scene.add(post);
}

const dashEl = document.getElementById('dash');
const gapEl = document.getElementById('gap');
const dashvEl = document.getElementById('dashv');

function sync() {
  const d = Number(dashEl.value);
  const g = Number(gapEl.value);
  dashedMat.dashSize = d;
  dashedMat.gapSize = g;
  dashvEl.textContent = d.toFixed(2) + ' / ' + g.toFixed(2);
  /* dashSize 是几何尺寸，修改后无需重算 lineDistance，直接生效 */
}

dashEl.addEventListener('input', sync);
gapEl.addEventListener('input', sync);
sync();

renderer.setAnimationLoop(function () {
  /* 极慢旋转，检查虚线在斜视角度下是否连续 */
  scene.rotation.y += 0.0012;
  controls.update();
  renderer.render(scene, camera);
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
</script>
</body>
</html>