Buffer Lines

<!--
  说明：把三万条线段塞进一个 BufferGeometry，一次绘制调用画完整张路网
  核心逻辑：position 每六个浮点一组构成一段，LineSegments 不共享端点
  依赖：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:#081015}
  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;font-variant-numeric:tabular-nums}
  .bar input[type=range]{width:140px;accent-color:#4f9ef8}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:5px;cursor:pointer;
       border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  .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="cnt">0</b></span>
  <span>绘制调用 <b>1</b></span>
  <label>显示比例 <input type="range" id="cut" min="5" max="100" step="1" value="100"></label>
  <button id="spin">自动旋转</button>
  <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;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x081015);
scene.fog = new THREE.Fog(0x081015, 34, 68);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 300);
camera.position.set(22, 14, 26);

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

scene.add(new THREE.HemisphereLight(0xa8c8ef, 0x0d141a, 1.5));

function heightAt(x, z) {
  return 0.8 * Math.sin(x * 0.25) * Math.cos(z * 0.22)
       + 0.4 * Math.sin(x * 0.7 + z * 0.55);
}

const GRID = 85;
const STEP = 0.9;
const HALF = (GRID * STEP) / 2;
const SEGMENTS = GRID * GRID * 2;

const positions = new Float32Array(SEGMENTS * 2 * 3);
const colors = new Float32Array(SEGMENTS * 2 * 3);
const c = new THREE.Color();

let vi = 0;

function pushSeg(x1, z1, x2, z2, hue) {
  const y1 = heightAt(x1, z1) + 0.06;
  const y2 = heightAt(x2, z2) + 0.06;
  const o = vi * 3;
  positions[o] = x1; positions[o + 1] = y1; positions[o + 2] = z1;
  positions[o + 3] = x2; positions[o + 4] = y2; positions[o + 5] = z2;

  c.setHSL(hue, 0.62, 0.55);
  colors[o] = c.r; colors[o + 1] = c.g; colors[o + 2] = c.b;
  colors[o + 3] = c.r * 0.6; colors[o + 4] = c.g * 0.6; colors[o + 5] = c.b * 0.6;

  vi += 2;
}

for (let ix = 0; ix < GRID; ix++) {
  for (let iz = 0; iz < GRID; iz++) {
    const x = -HALF + ix * STEP + (Math.sin(iz * 1.7) * 0.08);
    const z = -HALF + iz * STEP + (Math.cos(ix * 1.3) * 0.08);

    /* 横向与纵向各一段，颜色按行列位置分带 */
    pushSeg(x, z, x + STEP, z, 0.52 - (ix / GRID) * 0.16);
    pushSeg(x, z, x, z + STEP, 0.55 - (iz / GRID) * 0.2);
  }
}

const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geo.computeBoundingSphere();

const mat = new THREE.LineBasicMaterial({
  vertexColors: true,
  transparent: true,
  opacity: 0.78
});

const net = new THREE.LineSegments(geo, mat);
scene.add(net);

document.getElementById('cnt').textContent = SEGMENTS.toLocaleString('en-US');

const cutEl = document.getElementById('cut');
cutEl.addEventListener('input', function () {
  const p = Number(cutEl.value) / 100;
  /* drawRange 的单位是顶点数，必须成对递增 */
  geo.setDrawRange(0, Math.floor(SEGMENTS * p) * 2);
});

let spin = false;
const spinBtn = document.getElementById('spin');
spinBtn.addEventListener('click', function () {
  spin = !spin;
  spinBtn.textContent = spin ? '停止旋转' : '自动旋转';
});

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  if (spin) net.rotation.y += clock.getDelta() * 0.12;
  else clock.getDelta();
  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>