Camera Cinematic

<!--
  说明：相机沿一条闭合航线匀速飞行，视线始终看向场景中心略偏的位置
  核心逻辑：CatmullRomCurve3.getPointAt(进度) 给出机位，进度由时间推进
  依赖：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:#0b1118}
  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:170px;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="pv">0.0</b></span>
  <label>航线 <input type="range" id="prog" min="0" max="1" step="0.005" value="0"></label>
  <button id="play">暂停</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(0x0b1118);
scene.fog = new THREE.Fog(0x0b1118, 60, 140);

const camera = new THREE.PerspectiveCamera(50, stage.clientWidth / stage.clientHeight, 0.5, 400);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 2, 0);
controls.enableDamping = true;
controls.enabled = false;
controls.update();

scene.add(new THREE.HemisphereLight(0xbcd6f2, 0x131b22, 1.35));
const sun = new THREE.DirectionalLight(0xffeacb, 2.2);
sun.position.set(-20, 26, 12);
scene.add(sun);

function heightAt(x, z) {
  const a = 1.2 * Math.sin(x * 0.22) * Math.cos(z * 0.2);
  const b = 2.6 * Math.exp(-((x - 5) * (x - 5) + (z + 6) * (z + 6)) / 60);
  return a + b;
}

const SEG = 90;
const geo = new THREE.PlaneGeometry(70, 70, SEG, SEG);
geo.rotateX(-Math.PI / 2);
const pos = geo.attributes.position;
const colors = new Float32Array(pos.count * 3);
const c = new THREE.Color();
let minH = Infinity;
let maxH = -Infinity;

for (let i = 0; i < pos.count; i++) {
  const h = heightAt(pos.getX(i), pos.getZ(i));
  pos.setY(i, h);
  minH = Math.min(minH, h);
  maxH = Math.max(maxH, h);
}
for (let i = 0; i < pos.count; i++) {
  const t = (pos.getY(i) - minH) / (maxH - minH);
  c.setHSL(0.34 - 0.3 * t, 0.36, 0.2 + 0.4 * t);
  colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b;
}
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geo.computeVertexNormals();

scene.add(new THREE.Mesh(
  geo,
  new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.93 })
));

/* 航线：绕场景一圈，高度起伏，闭合曲线 */
const routePts = [];
const R = 34;
for (let i = 0; i < 10; i++) {
  const a = (i / 10) * Math.PI * 2;
  routePts.push(new THREE.Vector3(
    Math.cos(a) * R,
    14 + Math.sin(a * 2) * 7,
    Math.sin(a) * R * 0.85
  ));
}
const route = new THREE.CatmullRomCurve3(routePts, true, 'catmullrom', 0.6);

const routeLine = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(route.getSpacedPoints(400)),
  new THREE.LineBasicMaterial({ color: 0x5ad1ff, transparent: true, opacity: 0.32 })
);
scene.add(routeLine);

/* 航线上的机位标记 */
const dotGeo = new THREE.SphereGeometry(0.35, 12, 8);
const dotMat = new THREE.MeshBasicMaterial({ color: 0x7fffd4 });
routePts.forEach(function (p) {
  const d = new THREE.Mesh(dotGeo, dotMat);
  d.position.copy(p);
  scene.add(d);
});

/* 六个观察目标，机位会依次看向它们 */
const targets = [
  new THREE.Vector3(0, 3, 0),
  new THREE.Vector3(12, 2, -8),
  new THREE.Vector3(-14, 2, 6),
  new THREE.Vector3(5, 3, 14)
];

let progress = 0;
let playing = true;
const look = new THREE.Vector3();

function placeCamera() {
  const t = progress % 1;
  camera.position.copy(route.getPointAt(t));

  /* 目标点用正弦在几个兴趣点之间平滑过渡 */
  const k = (Math.sin(t * Math.PI * 2) * 0.5 + 0.5) * (targets.length - 1);
  const i0 = Math.floor(k);
  const i1 = Math.min(targets.length - 1, i0 + 1);
  look.copy(targets[i0]).lerp(targets[i1], k - i0);
  if (!controls.enabled) camera.lookAt(look);
}

placeCamera();

const progEl = document.getElementById('prog');
const pvEl = document.getElementById('pv');
progEl.addEventListener('input', function () {
  playing = false;
  playBtn.textContent = '播放';
  progress = Number(progEl.value);
  placeCamera();
  pvEl.textContent = progress.toFixed(3);
});

const playBtn = document.getElementById('play');
playBtn.addEventListener('click', function () {
  playing = !playing;
  playBtn.textContent = playing ? '暂停' : '播放';
  /* 暂停后把控制权交给轨道控制，可以停下细看 */
  controls.enabled = !playing;
  if (controls.enabled) {
    controls.target.copy(look);
    controls.update();
  }
});

const clock = new THREE.Clock();
const SPEED = 0.028;

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);

  if (playing) {
    progress = (progress + dt * SPEED) % 1;
    progEl.value = String(progress);
    pvEl.textContent = progress.toFixed(3);
    placeCamera();
  } else {
    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>