Lines Fat

<!--
  说明：WebGL 原生线宽在多数平台上被限制为 1 像素，改用 Line2 的屏幕空间挤出线
  核心逻辑：LineGeometry 提供位置，LineMaterial 用 linewidth（像素）与 resolution 绘制
  依赖：three.js 0.160.0、OrbitControls、Line2 · 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:#0b1015}
  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:130px;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>
  <label>线宽 <input type="range" id="lw" min="1" max="14" step="0.5" value="5"></label>
  <span><b id="lwv">5</b> px</span>
  <button id="flow">流动虚线</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';
import { Line2 } from 'three/addons/lines/Line2.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.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(0x0b1015);
scene.fog = new THREE.Fog(0x0b1015, 38, 72);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 300);
camera.position.set(17, 15, 20);

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

scene.add(new THREE.HemisphereLight(0xbcd4f0, 0x121b22, 1.4));
const sun = new THREE.DirectionalLight(0xffe8c6, 2.0);
sun.position.set(-12, 20, 9);
scene.add(sun);

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

const grid = new THREE.GridHelper(52, 52, 0x1d2a37, 0x141d25);
grid.position.y = 0.008;
scene.add(grid);

const COLORS = [0x5ad1ff, 0x6ee7a8, 0xffc857, 0xff8a7a, 0xb69bff];

function hash(n) {
  const x = Math.sin(n * 43.7 + 13.9) * 43758.5453;
  return x - Math.floor(x);
}

/* 每根管线是一条带拐点的折线，高度按正弦轻微起伏 */
function makeLine(seed) {
  const pts = [];
  const n = 8;
  let x = (hash(seed) - 0.5) * 36;
  let z = (hash(seed + 1) - 0.5) * 36;

  for (let i = 0; i <= n; i++) {
    x += (hash(seed + i * 2 + 2) - 0.5) * 7;
    z += (hash(seed + i * 2 + 3) - 0.5) * 7;
    const y = 1.2 + Math.sin(i * 0.9 + seed) * 0.9;
    pts.push(x, y, z);
  }
  return pts;
}

const lines = [];
const materials = [];

function addLine(seed, color) {
  const positions = makeLine(seed);
  const geo = new LineGeometry();
  geo.setPositions(positions);

  const mat = new LineMaterial({
    color: color,
    linewidth: 5,
    dashed: false,
    dashSize: 1.2,
    gapSize: 0.7
  });
  mat.resolution.set(stage.clientWidth, stage.clientHeight);

  const line = new Line2(geo, mat);
  line.computeLineDistances();
  scene.add(line);

  lines.push(line);
  materials.push(mat);
  return line;
}

const COUNT = 14;
for (let i = 0; i < COUNT; i++) {
  addLine(i * 13 + 3, COLORS[i % COLORS.length]);
}

document.getElementById('cnt').textContent = String(COUNT);

/* 管线节点：细小的金属球，位置取自每条线的首尾 */
const nodeMat = new THREE.MeshStandardMaterial({ color: 0xd8dee6, roughness: 0.35, metalness: 0.6 });
const nodeGeo = new THREE.SphereGeometry(0.26, 14, 10);
lines.forEach(function (l) {
  const p = l.geometry.attributes.instanceStart;
  [0, p.data.array.length / 6 - 1].forEach(function (idx) {
    const m = new THREE.Mesh(nodeGeo, nodeMat);
    m.position.set(
      p.data.array[idx * 6],
      p.data.array[idx * 6 + 1],
      p.data.array[idx * 6 + 2]
    );
    scene.add(m);
  });
});

const lwEl = document.getElementById('lw');
const lwvEl = document.getElementById('lwv');
lwEl.addEventListener('input', function () {
  const v = Number(lwEl.value);
  materials.forEach(function (m) { m.linewidth = v; });
  lwvEl.textContent = v.toFixed(1);
});

const flowBtn = document.getElementById('flow');
let flow = false;
flowBtn.addEventListener('click', function () {
  flow = !flow;
  materials.forEach(function (m) {
    m.dashed = flow;
    m.dashOffset = 0;
    m.needsUpdate = true;
  });
  flowBtn.textContent = flow ? '实线显示' : '流动虚线';
});

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  if (flow) {
    const dt = Math.min(clock.getDelta(), 0.1);
    materials.forEach(function (m) {
      m.dashOffset -= dt * 1.6;
    });
  } 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);
  /* LineMaterial 必须知道画布像素尺寸，否则线宽会被拉伸 */
  materials.forEach(function (m) { m.resolution.set(w, h); });
});
</script>
</body>
</html>