Geometry Splines

<!--
  说明：沿一条空间曲线挤出道路断面，形成连续的三维走廊
  核心逻辑：ExtrudeGeometry 的 extrudePath 指定 CatmullRomCurve3，形状为路宽断面
  依赖：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:#0c1218}
  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>宽 1.8 × 厚 0.24</b></span>
  <label>弯曲度 <input type="range" id="bend" min="0.2" max="1.6" step="0.1" value="1"></label>
  <button id="center">显示中心线</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(0x0c1218);
scene.fog = new THREE.Fog(0x0c1218, 40, 78);

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

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

scene.add(new THREE.HemisphereLight(0xaac6e8, 0x161d24, 1.4));
const sun = new THREE.DirectionalLight(0xffeccd, 2.2);
sun.position.set(-14, 24, 12);
scene.add(sun);

/* 底图：一块带轻微起伏的地面，走廊贴着它走 */
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(60, 60, 60, 60),
  new THREE.MeshStandardMaterial({ color: 0x1a2530, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
const gp = ground.geometry.attributes.position;
for (let i = 0; i < gp.count; i++) {
  const x = gp.getX(i);
  const y = gp.getY(i);
  gp.setZ(i, 0.25 * Math.sin(x * 0.4) * Math.cos(y * 0.35));
}
ground.geometry.computeVertexNormals();
scene.add(ground);

/* 断面形状：以中心为原点的一条路面板 */
const WIDTH = 1.8;
const THICK = 0.24;
const section = new THREE.Shape();
section.moveTo(-WIDTH / 2, 0);
section.lineTo(WIDTH / 2, 0);
section.lineTo(WIDTH / 2, THICK);
section.lineTo(-WIDTH / 2, THICK);
section.lineTo(-WIDTH / 2, 0);

let curve = null;
let road = null;
let centerLine = null;
let centerVisible = false;
const group = new THREE.Group();
scene.add(group);

const markerMat = new THREE.MeshStandardMaterial({ color: 0xffb347, roughness: 0.5 });

function build(k) {
  while (group.children.length) {
    const c = group.children.pop();
    c.geometry.dispose();
    /* 标记共用一份材质，重建时不能一并销毁 */
    if (c.material !== markerMat) c.material.dispose();
  }

  const pts = [];
  for (let i = 0; i <= 8; i++) {
    const t = i / 8;
    pts.push(new THREE.Vector3(
      THREE.MathUtils.lerp(-18, 18, t),
      1.1 + Math.sin(t * Math.PI * 2.2 * k) * 3.2 * k,
      Math.sin(t * Math.PI * 1.6 * k) * 7 * k
    ));
  }

  curve = new THREE.CatmullRomCurve3(pts, false, 'catmullrom', 0.5);

  const geo = new THREE.ExtrudeGeometry(section, {
    steps: 260,
    bevelEnabled: false,
    extrudePath: curve
  });
  geo.computeVertexNormals();

  const mat = new THREE.MeshStandardMaterial({
    color: 0x8b95a4,
    roughness: 0.72,
    metalness: 0.12
  });
  road = new THREE.Mesh(geo, mat);
  group.add(road);

  /* 中心线：沿曲线等距取点连成 Line，用来核对挤出路径 */
  const lineGeo = new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(400));
  centerLine = new THREE.Line(
    lineGeo,
    new THREE.LineBasicMaterial({ color: 0x5ef2a0 })
  );
  centerLine.visible = centerVisible;
  group.add(centerLine);

  /* 沿线放置几块路侧标记，检查挤出方向是否一致 */
  for (let i = 0; i <= 12; i++) {
    const p = curve.getPointAt(i / 12);
    const m = new THREE.Mesh(new THREE.BoxGeometry(0.18, 1.1, 0.18), markerMat);
    m.position.copy(p);
    m.position.y += 0.55;
    group.add(m);
  }
}

build(1);

const bendEl = document.getElementById('bend');
bendEl.addEventListener('input', function () {
  build(Number(bendEl.value));
});

const centerBtn = document.getElementById('center');
centerBtn.addEventListener('click', function () {
  centerVisible = !centerVisible;
  if (centerLine) centerLine.visible = centerVisible;
  centerBtn.textContent = centerVisible ? '隐藏中心线' : '显示中心线';
});

renderer.setAnimationLoop(function () {
  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>