Shadow Pointlight

<!--
  说明：点光源的阴影是六面立方体贴图，绕场景一圈能看到阴影跟着光源转
  核心逻辑：PointLight.castShadow 触发六次渲染，shadow.map 用 CubeTexture
  依赖：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:#070c12}
  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:140px;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>6 × 512</b></span>
  <label>离地高度 <input type="range" id="hy" min="3" max="16" step="0.5" value="8"></label>
  <button id="spin">自动绕行</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;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x070c12);
scene.fog = new THREE.Fog(0x070c12, 40, 90);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(18, 14, 22);

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(0x6f88a6, 0x0a0f14, 0.5));

/* 点光源：立方体阴影贴图，六面各渲一次 */
const lamp = new THREE.PointLight(0xffd9a0, 380, 60, 1.8);
lamp.position.set(8, 8, 6);
lamp.castShadow = true;
lamp.shadow.mapSize.set(512, 512);
lamp.shadow.camera.near = 0.5;
lamp.shadow.camera.far = 60;
lamp.shadow.bias = -0.004;
scene.add(lamp);

const bulb = new THREE.Mesh(
  new THREE.SphereGeometry(0.22, 14, 10),
  new THREE.MeshBasicMaterial({ color: 0xffe6bd })
);
scene.add(bulb);

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

const grid = new THREE.GridHelper(60, 60, 0x2c3a46, 0x1c262f);
grid.position.y = 0.01;
scene.add(grid);

/* 中央一组柱廊：六面阴影最容易在柱间看出方向 */
const pillarMat = new THREE.MeshStandardMaterial({ color: 0x9aa4ae, roughness: 0.6, metalness: 0.15 });
for (let i = 0; i < 8; i++) {
  const a = (i / 8) * Math.PI * 2;
  const p = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 5.2, 20), pillarMat);
  p.position.set(Math.cos(a) * 5, 2.6, Math.sin(a) * 5);
  p.castShadow = true;
  p.receiveShadow = true;
  scene.add(p);
}

const coreMat = new THREE.MeshStandardMaterial({ color: 0xc9b48f, roughness: 0.5, metalness: 0.2 });
const core = new THREE.Mesh(new THREE.BoxGeometry(2.4, 3.2, 2.4), coreMat);
core.position.set(0, 1.6, 0);
core.castShadow = true;
core.receiveShadow = true;
scene.add(core);

/* 外围的矮墙，用来观察阴影贴图在边缘的拉伸 */
for (let i = 0; i < 4; i++) {
  const a = (i / 4) * Math.PI * 2 + Math.PI / 4;
  const wall = new THREE.Mesh(
    new THREE.BoxGeometry(8, 1.2, 0.5),
    new THREE.MeshStandardMaterial({ color: 0x6f7a85, roughness: 0.85 })
  );
  wall.position.set(Math.cos(a) * 11, 0.6, Math.sin(a) * 11);
  wall.rotation.y = -a + Math.PI / 2;
  wall.castShadow = true;
  wall.receiveShadow = true;
  scene.add(wall);
}

let angle = 0.9;
let spin = true;
const clock = new THREE.Clock();

const hyEl = document.getElementById('hy');
hyEl.addEventListener('input', function () {
  lamp.position.y = Number(hyEl.value);
});

const spinBtn = document.getElementById('spin');
spinBtn.addEventListener('click', function () {
  spin = !spin;
  spinBtn.textContent = spin ? '停止绕行' : '自动绕行';
});

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);
  if (spin) {
    angle += dt * 0.35;
    const r = 9;
    lamp.position.x = Math.cos(angle) * r;
    lamp.position.z = Math.sin(angle) * r;
    hyEl.value = String(lamp.position.y);
  }
  bulb.position.copy(lamp.position);

  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>