Lines Colors

<!--
  说明：一条轨迹线按速度逐段着色，颜色写在顶点上，由 LineBasicMaterial 插值
  核心逻辑：position 与 color 两个缓冲一一对应，每两个端点构成一段线
  依赖：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:#080d12}
  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 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}
  #ramp{position:absolute;right:14px;bottom:14px;width:180px;height:10px;border-radius:3px;
       border:1px solid #293645}
</style>
</head>
<body>
<div class="bar">
  <span>轨迹点 <b id="n">0</b></span>
  <span>速度 <b id="vmax">0</b> 单位/秒</span>
  <button id="pulse">速度脉动</button>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<div id="stage"><canvas id="ramp" width="180" height="10"></canvas></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(0x080d12);
scene.fog = new THREE.Fog(0x080d12, 34, 70);

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

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

scene.add(new THREE.HemisphereLight(0xa8c4e4, 0x0d141a, 1.3));

const grid = new THREE.GridHelper(46, 46, 0x1c2835, 0x121b24);
scene.add(grid);

/* 轨迹点：一条绕行的长曲线，速度由曲率与局部扰动合成 */
const N = 900;
const pts = [];
for (let i = 0; i < N; i++) {
  const t = i / (N - 1);
  const a = t * Math.PI * 4.2;
  const r = 9 + Math.sin(t * 12) * 2.4;
  pts.push(new THREE.Vector3(
    Math.cos(a) * r,
    2.2 + Math.sin(t * 18) * 1.6 + Math.sin(a * 0.5) * 1.2,
    Math.sin(a) * r * 0.75
  ));
}

const speeds = [];
let maxSpeed = 0;
for (let i = 0; i < N - 1; i++) {
  const d = pts[i + 1].distanceTo(pts[i]);
  const s = d * (1 + Math.abs(Math.sin(i * 0.045)) * 2.2);
  speeds.push(s);
  maxSpeed = Math.max(maxSpeed, s);
}

/* 每段两个端点，颜色取该段速度的归一化值 */
const posArr = new Float32Array((N - 1) * 2 * 3);
const colArr = new Float32Array((N - 1) * 2 * 3);

const COLD = new THREE.Color(0x2f6fe0);
const MID = new THREE.Color(0x42d6c3);
const HOT = new THREE.Color(0xffb347);
const c = new THREE.Color();

for (let i = 0; i < N - 1; i++) {
  const a = pts[i];
  const b = pts[i + 1];
  const k = i * 6;
  posArr[k] = a.x; posArr[k + 1] = a.y; posArr[k + 2] = a.z;
  posArr[k + 3] = b.x; posArr[k + 4] = b.y; posArr[k + 5] = b.z;

  const t = speeds[i] / maxSpeed;
  if (t < 0.5) c.copy(COLD).lerp(MID, t * 2);
  else c.copy(MID).lerp(HOT, (t - 0.5) * 2);

  colArr[k] = c.r; colArr[k + 1] = c.g; colArr[k + 2] = c.b;
  colArr[k + 3] = c.r; colArr[k + 4] = c.g; colArr[k + 5] = c.b;
}

const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(posArr, 3));
geo.setAttribute('color', new THREE.BufferAttribute(colArr, 3));

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

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

/* 起点与终点的标记 */
const capMat = new THREE.MeshStandardMaterial({ color: 0xe8eef6, roughness: 0.4, metalness: 0.3 });
[pts[0], pts[N - 1]].forEach(function (p) {
  const m = new THREE.Mesh(new THREE.SphereGeometry(0.32, 16, 12), capMat);
  m.position.copy(p);
  scene.add(m);
});

document.getElementById('n').textContent = String(N);
document.getElementById('vmax').textContent = maxSpeed.toFixed(2);

/* 图例：与轨迹同一套色带 */
const rampCv = document.getElementById('ramp');
const rctx = rampCv.getContext('2d');
const g = rctx.createLinearGradient(0, 0, 180, 0);
g.addColorStop(0, '#2f6fe0');
g.addColorStop(0.5, '#42d6c3');
g.addColorStop(1, '#ffb347');
rctx.fillStyle = g;
rctx.fillRect(0, 0, 180, 10);

/* 脉动：整体透明度呼吸，检查颜色在叠加背景上的可读性 */
let pulse = false;
const pulseBtn = document.getElementById('pulse');
pulseBtn.addEventListener('click', function () {
  pulse = !pulse;
  pulseBtn.textContent = pulse ? '停止脉动' : '速度脉动';
});

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  const t = clock.getElapsedTime();
  mat.opacity = pulse ? 0.65 + Math.sin(t * 2.2) * 0.3 : 0.95;
  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>