Lights Spotlight

<!--
  说明：聚光灯照在起伏地形上，锥角与半影决定光斑边缘的软硬
  核心逻辑：SpotLight 的 angle 是半锥角，penumbra 控制边缘从亮到暗的比例
  依赖：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:#070b10}
  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:12px;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:110px;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="angv">28</b> °</span>
  <label>angle <input type="range" id="ang" min="6" max="55" step="1" value="28"></label>
  <span>半影 <b id="penv">0.35</b></span>
  <label>penumbra <input type="range" id="pen" min="0" max="1" step="0.05" value="0.35"></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;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x070b10);
scene.fog = new THREE.Fog(0x070b10, 34, 70);

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

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

/* 极弱的半球光，让光斑之外的区域仍能看出地形 */
scene.add(new THREE.HemisphereLight(0x5c7898, 0x0a1016, 0.34));

function heightAt(x, z) {
  return 1.2 * Math.sin(x * 0.32) * Math.cos(z * 0.28) + 0.6 * Math.sin(x * 0.8 + z * 0.6);
}

const geo = new THREE.PlaneGeometry(34, 34, 120, 120);
geo.rotateX(-Math.PI / 2);
const pos = geo.attributes.position;
for (let i = 0; i < pos.count; i++) {
  pos.setY(i, heightAt(pos.getX(i), pos.getZ(i)));
}
geo.computeVertexNormals();

const ground = new THREE.Mesh(
  geo,
  new THREE.MeshStandardMaterial({ color: 0x6a7078, roughness: 0.9, metalness: 0.05 })
);
scene.add(ground);

const spot = new THREE.SpotLight(0xfff0d0, 420, 60, THREE.MathUtils.degToRad(28), 0.35, 1.6);
spot.position.set(0, 17, 3);
spot.target.position.set(0, 0, 0);
spot.castShadow = true;
spot.shadow.mapSize.set(1024, 1024);
spot.shadow.camera.near = 2;
spot.shadow.camera.far = 40;
spot.shadow.bias = -0.0012;
scene.add(spot);
scene.add(spot.target);

/* 灯体与朝向参考线，便于看出锥角在空间中的形状 */
const bulb = new THREE.Mesh(
  new THREE.SphereGeometry(0.28, 16, 12),
  new THREE.MeshBasicMaterial({ color: 0xfff6e0 })
);
bulb.position.copy(spot.position);
scene.add(bulb);

const aim = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints([spot.position.clone(), new THREE.Vector3(0, 0, 0)]),
  new THREE.LineBasicMaterial({ color: 0x5ad1ff, transparent: true, opacity: 0.5 })
);
scene.add(aim);

/* 一座塔，让光锥的边界在竖直面上也能被看到 */
const tower = new THREE.Mesh(
  new THREE.CylinderGeometry(0.9, 1.2, 6, 24),
  new THREE.MeshStandardMaterial({ color: 0x8b939c, roughness: 0.5, metalness: 0.25 })
);
tower.position.set(4.2, 3, -3.2);
tower.castShadow = true;
tower.receiveShadow = true;
scene.add(tower);

const angEl = document.getElementById('ang');
const angvEl = document.getElementById('angv');
const penEl = document.getElementById('pen');
const penvEl = document.getElementById('penv');

angEl.addEventListener('input', function () {
  const deg = Number(angEl.value);
  spot.angle = THREE.MathUtils.degToRad(deg);
  angvEl.textContent = String(deg);
});

penEl.addEventListener('input', function () {
  const p = Number(penEl.value);
  spot.penumbra = p;
  penvEl.textContent = p.toFixed(2);
});

/* 缓慢摆动灯头，观察光斑在地形上的移动 */
const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  const t = clock.getElapsedTime();
  spot.target.position.set(Math.sin(t * 0.5) * 3.2, 0, Math.cos(t * 0.5) * 3.2);
  spot.target.updateMatrixWorld();
  ground.material.needsUpdate = false;

  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>