Shadow Vsm

<!--
  说明：VSM 阴影先记录深度与深度平方，再做模糊，得到柔和的半影
  核心逻辑：shadowMap.type 设为 VSMShadowMap，blurSamples 控制模糊采样数
  依赖：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>软阴影 VSM</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 input[type=range]{width:130px;accent-color:#4f9ef8}
  .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="bsv">8</b></span>
  <label>blurSamples <input type="range" id="bs" min="2" max="24" step="1" value="8"></label>
  <span>半径 <b id="rv">3</b></span>
  <label>radius <input type="range" id="r" min="1" max="10" step="1" value="3"></label>
  <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;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.VSMShadowMap;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b1016);
scene.fog = new THREE.Fog(0x0b1016, 46, 96);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(20, 13, 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(0xaec9e6, 0x141b22, 1.1));

const sun = new THREE.DirectionalLight(0xffe9c6, 2.4);
sun.position.set(-18, 24, 12);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -24;
sun.shadow.camera.right = 24;
sun.shadow.camera.top = 24;
sun.shadow.camera.bottom = -24;
sun.shadow.camera.far = 90;
sun.shadow.radius = 3;
sun.shadow.blurSamples = 8;
sun.shadow.bias = -0.0008;
scene.add(sun);

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

const grid = new THREE.GridHelper(70, 70, 0x2d3b48, 0x1d2731);
grid.position.y = 0.01;
scene.add(grid);

/* 一排高低不同的板：影子的边缘能在板上清晰地表现出来 */
const panelMat = new THREE.MeshStandardMaterial({ color: 0xb9c2cc, roughness: 0.55, metalness: 0.1 });
for (let i = 0; i < 7; i++) {
  const h = 3 + (i % 4) * 2.4;
  const p = new THREE.Mesh(new THREE.BoxGeometry(1.6, h, 0.35), panelMat);
  p.position.set(-9 + i * 3, h / 2, 0);
  p.castShadow = true;
  p.receiveShadow = true;
  scene.add(p);
}

/* 几根细柱：细柱的影子最容易看出模糊程度 */
const poleMat = new THREE.MeshStandardMaterial({ color: 0xd8c8a8, roughness: 0.6 });
for (let i = 0; i < 5; i++) {
  const p = new THREE.Mesh(new THREE.CylinderGeometry(0.16, 0.16, 6, 12), poleMat);
  p.position.set(-6 + i * 3, 3, 6);
  p.castShadow = true;
  p.receiveShadow = true;
  scene.add(p);
}

const bsEl = document.getElementById('bs');
const bsvEl = document.getElementById('bsv');
bsEl.addEventListener('input', function () {
  const v = Number(bsEl.value);
  sun.shadow.blurSamples = v;
  bsvEl.textContent = String(v);
  /* VSM 的模糊参数改变后需要重新编译阴影材质 */
  sun.shadow.needsUpdate = true;
});

const rEl = document.getElementById('r');
const rvEl = document.getElementById('rv');
rEl.addEventListener('input', function () {
  const v = Number(rEl.value);
  sun.shadow.radius = v;
  rvEl.textContent = String(v);
  sun.shadow.needsUpdate = true;
});

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>