Shadow Viewer

<!--
  说明：把平行光的阴影相机画出来，看清哪些区域才真正被纳入了阴影贴图
  核心逻辑：light.shadow.camera 是一个正交相机，CameraHelper 可视化它的视锥
  依赖：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:#0a0f15}
  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: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}
  #hud{position:absolute;left:12px;bottom:12px;padding:9px 13px;border-radius:6px;
       background:rgba(9,14,19,.85);border:1px solid #223040;font-size:12px;line-height:1.9;
       color:#c6d2e0;pointer-events:none;font-variant-numeric:tabular-nums}
  #hud em{font-style:normal;color:#ffd166}
</style>
</head>
<body>
<div class="bar">
  <span>阴影范围 <b id="extv">18</b></span>
  <label>范围 <input type="range" id="ext" min="6" max="40" step="1" value="18"></label>
  <button id="helper">隐藏视锥</button>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<div id="stage">
  <div id="hud">
    阴影贴图 <em>2048 × 2048</em><br>
    覆盖范围 <em id="cov">36 × 36</em><br>
    每单位像素 <em id="ppu">—</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;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0f15);
scene.fog = new THREE.Fog(0x0a0f15, 60, 120);

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

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

scene.add(new THREE.HemisphereLight(0xa9c3e0, 0x111820, 0.9));

const sun = new THREE.DirectionalLight(0xffe8c2, 2.6);
sun.position.set(-26, 34, 18);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 120;
sun.shadow.bias = -0.0006;
scene.add(sun);
scene.add(sun.target);

const ext = { value: 18 };

function applyExtent(v) {
  ext.value = v;
  const c = sun.shadow.camera;
  c.left = -v;
  c.right = v;
  c.top = v;
  c.bottom = -v;
  c.updateProjectionMatrix();
  helper.update();

  document.getElementById('cov').textContent = (v * 2) + ' × ' + (v * 2);
  document.getElementById('ppu').textContent = (2048 / (v * 2)).toFixed(1) + ' px';
}

const helper = new THREE.CameraHelper(sun.shadow.camera);
scene.add(helper);

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

const grid = new THREE.GridHelper(120, 60, 0x2a3946, 0x1b2731);
grid.position.y = 0.01;
scene.add(grid);

/* 一组建筑：贴图分辨率不足时，阴影边缘会先出现锯齿与断裂 */
function hash(n) {
  const x = Math.sin(n * 27.7 + 6.1) * 43758.5453;
  return x - Math.floor(x);
}

for (let i = 0; i < 40; i++) {
  const w = 2 + hash(i) * 3.4;
  const h = 3 + Math.pow(hash(i + 2), 1.5) * 16;
  const x = (hash(i + 4) - 0.5) * 44;
  const z = (hash(i + 8) - 0.5) * 44;

  const b = new THREE.Mesh(
    new THREE.BoxGeometry(w, h, w * 0.8),
    new THREE.MeshStandardMaterial({
      color: new THREE.Color().setHSL(0.55 - hash(i + 6) * 0.12, 0.16, 0.4 + hash(i + 10) * 0.18),
      roughness: 0.72,
      metalness: 0.1
    })
  );
  b.position.set(x, h / 2, z);
  b.castShadow = true;
  b.receiveShadow = true;
  scene.add(b);
}

applyExtent(18);

const extEl = document.getElementById('ext');
const extvEl = document.getElementById('extv');
extEl.addEventListener('input', function () {
  const v = Number(extEl.value);
  extvEl.textContent = String(v);
  applyExtent(v);
});

let showHelper = true;
const helperBtn = document.getElementById('helper');
helperBtn.addEventListener('click', function () {
  showHelper = !showHelper;
  helper.visible = showHelper;
  helperBtn.textContent = showHelper ? '隐藏视锥' : '显示视锥';
});

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>