LOD

<!--
  说明：同一个山体准备三档精细度，相机距离变化时自动切换，远离时省下大量三角形
  核心逻辑：THREE.LOD 的 addLevel(distance, hysteresis)，渲染时按距离选层
  依赖：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>LOD 分级</title>
<style>
  html,body{height:100%;margin:0;background:#0b1016}
  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 button.on{background:#1f3a5c;border-color:#2f5c8f;color:#cfe4ff}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
  #hud{position:absolute;left:12px;top:12px;padding:8px 12px;border-radius:6px;
       background:rgba(13,19,26,.82);border:1px solid #223040;font-size:12px;line-height:1.8;
       color:#c8d2e0;pointer-events:none;font-variant-numeric:tabular-nums}
  #hud em{color:#7fd1a6;font-style:normal}
</style>
</head>
<body>
<div class="bar">
  <button id="auto" class="on">自动切换</button>
  <button id="l0">高精度</button>
  <button id="l1">中精度</button>
  <button id="l2">低精度</button>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放，注意三角形变化</span>
</div>
<div id="stage">
  <div id="hud">当前层级 <em id="level">—</em><br>三角形 <em id="tris">—</em><br>相机距离 <em id="dist">—</em></div>
</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(0x0b1016);

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

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.minDistance = 6;
controls.maxDistance = 130;
controls.update();

scene.add(new THREE.HemisphereLight(0xb8d4ff, 0x121820, 1.4));
const sun = new THREE.DirectionalLight(0xffeacb, 2.2);
sun.position.set(-14, 20, 10);
scene.add(sun);

/* 用二十面体细分层级模拟三档地形，顶点按噪声位移成山体 */
const PALETTE = [0x7fb6a4, 0x9a8f6f, 0x6d7f92];
const DETAIL = [5, 2, 0];

function makeHill(detail, index) {
  const geo = new THREE.IcosahedronGeometry(4, detail);
  const pos = geo.attributes.position;
  const v = new THREE.Vector3();

  for (let i = 0; i < pos.count; i++) {
    v.fromBufferAttribute(pos, i).normalize();
    const n = 1
      + 0.16 * Math.sin(v.x * 3.1 + v.y * 1.7)
      + 0.11 * Math.cos(v.z * 3.4 - v.x * 1.2)
      + 0.06 * Math.sin(v.y * 6.2 + v.z * 2.1);
    const h = 1 + n * (v.y > 0 ? 0.35 : 0.05);
    v.multiplyScalar(4 * h);
    pos.setXYZ(i, v.x, v.y * 0.75 + 1.2, v.z);
  }

  geo.computeVertexNormals();

  const mesh = new THREE.Mesh(
    geo,
    new THREE.MeshStandardMaterial({
      color: PALETTE[index],
      roughness: 0.88,
      metalness: 0.02,
      flatShading: detail < 2
    })
  );
  mesh.userData.tris = geo.index ? geo.index.count / 3 : geo.attributes.position.count / 3;
  return mesh;
}

const lod = new THREE.LOD();
lod.addLevel(makeHill(DETAIL[0], 0), 0, 4);
lod.addLevel(makeHill(DETAIL[1], 1), 34, 6);
lod.addLevel(makeHill(DETAIL[2], 2), 62, 8);
scene.add(lod);

const grid = new THREE.GridHelper(80, 40, 0x1d2a38, 0x141c26);
grid.position.y = -2.6;
scene.add(grid);

const levelEl = document.getElementById('level');
const trisEl = document.getElementById('tris');
const distEl = document.getElementById('dist');
const LEVEL_NAME = ['高精度', '中精度', '低精度'];

function updateHud() {
  const lv = lod.getCurrentLevel();
  levelEl.textContent = LEVEL_NAME[lv];
  trisEl.textContent = Math.round(lod.levels[lv].object.userData.tris).toLocaleString('en-US');
  distEl.textContent = camera.position.distanceTo(lod.position).toFixed(1);
}

/* 手动模式：关掉 autoUpdate，直接把某一层设为可见 */
const autoBtn = document.getElementById('auto');
const manualBtns = [document.getElementById('l0'), document.getElementById('l1'), document.getElementById('l2')];
let auto = true;

function setManual(index) {
  auto = false;
  lod.autoUpdate = false;
  lod.levels.forEach(function (l, i) {
    l.object.visible = i === index;
  });
  autoBtn.classList.remove('on');
  manualBtns.forEach(function (b, i) { b.classList.toggle('on', i === index); });
}

autoBtn.addEventListener('click', function () {
  auto = true;
  lod.autoUpdate = true;
  lod.levels.forEach(function (l) { l.object.visible = true; });
  autoBtn.classList.add('on');
  manualBtns.forEach(function (b) { b.classList.remove('on'); });
});

manualBtns.forEach(function (btn, i) {
  btn.addEventListener('click', function () { setManual(i); });
});

renderer.setAnimationLoop(function () {
  lod.rotation.y += 0.0015;
  controls.update();
  renderer.render(scene, camera);
  updateHud();
});

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>