Lights

<!--
  说明：四个球分别使用 Basic、Lambert、Standard、Physical 材质，同一组灯光下对比反应
  核心逻辑：统一切换灯光方案，观察不受光材质与受光材质的差异，以及阴影开销
  依赖：three.js 0.160.0 · 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:#0d1117}
  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:10px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .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{border-color:#3f6fa8;background:#1c3350;color:#9fd0ff}
  .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">
  <button id="m-three" class="on">三点布光</button>
  <button id="m-ambient">仅环境光</button>
  <button id="m-none">关闭全部光源</button>
  <button id="shadow">关闭阴影</button>
  <span class="sp"></span>
  <span>左起 Basic · Lambert · Standard · Physical</span>
</div>
<div id="stage"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
  }
}
</script>
<script type="module">
import * as THREE from 'three';

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.toneMappingExposure = 1.1;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1117);

const camera = new THREE.PerspectiveCamera(
  42, stage.clientWidth / stage.clientHeight, 0.1, 100
);
camera.position.set(0, 5.4, 13);
camera.lookAt(0, 1.4, 0);

/* ---------- 灯光 ---------- */
const hemi = new THREE.HemisphereLight(0xcfe4ff, 0x1a222c, 0.55);
scene.add(hemi);

const key = new THREE.DirectionalLight(0xfff0d8, 2.4);
key.position.set(6, 9, 5);
key.castShadow = true;
key.shadow.mapSize.set(1024, 1024);
key.shadow.camera.left = -9;
key.shadow.camera.right = 9;
key.shadow.camera.top = 9;
key.shadow.camera.bottom = -9;
key.shadow.camera.near = 1;
key.shadow.camera.far = 40;
key.shadow.bias = -0.0006;
scene.add(key);

const fill = new THREE.DirectionalLight(0x86b0ff, 0.8);
fill.position.set(-7, 4, 6);
scene.add(fill);

const rim = new THREE.PointLight(0xa8d8ff, 26, 26, 2);
rim.position.set(-4, 3, -6);
scene.add(rim);

/* ---------- 四个球 ---------- */
const geo = new THREE.SphereGeometry(1.25, 48, 32);

const mats = [
  new THREE.MeshBasicMaterial({ color: 0xd95c5c }),
  new THREE.MeshLambertMaterial({ color: 0xd9a05c }),
  new THREE.MeshStandardMaterial({ color: 0x5ca8d9, roughness: 0.35, metalness: 0.1 }),
  new THREE.MeshPhysicalMaterial({
    color: 0x7fd1b9,
    roughness: 0.18,
    metalness: 0.05,
    clearcoat: 0.9,
    clearcoatRoughness: 0.12
  })
];

const xs = [-4.8, -1.6, 1.6, 4.8];
const spheres = [];

mats.forEach(function (mat, i) {
  const ball = new THREE.Mesh(geo, mat);
  ball.position.set(xs[i], 1.55, 0);
  ball.castShadow = true;
  ball.receiveShadow = true;
  scene.add(ball);
  spheres.push(ball);
});

/* 地面接收阴影 */
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(22, 12),
  new THREE.MeshStandardMaterial({ color: 0x1a232d, roughness: 0.96 })
);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);

/* 背后一块竖板，让边缘光有落点 */
const back = new THREE.Mesh(
  new THREE.PlaneGeometry(24, 9),
  new THREE.MeshStandardMaterial({ color: 0x141c25, roughness: 1 })
);
back.position.set(0, 4.5, -5.5);
scene.add(back);

let mode = 'three';

function applyMode(next) {
  mode = next;
  hemi.intensity = next === 'three' ? 0.55 : next === 'ambient' ? 2.4 : 0;
  key.visible = next === 'three';
  fill.visible = next === 'three';
  rim.visible = next === 'three';

  document.getElementById('m-three').classList.toggle('on', next === 'three');
  document.getElementById('m-ambient').classList.toggle('on', next === 'ambient');
  document.getElementById('m-none').classList.toggle('on', next === 'none');
}

renderer.setAnimationLoop(function (time) {
  const t = time * 0.001;
  spheres.forEach(function (ball, i) {
    ball.position.y = 1.55 + Math.sin(t * 1.1 + i * 0.7) * 0.18;
  });
  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);
});

document.getElementById('m-three').addEventListener('click', function () { applyMode('three'); });
document.getElementById('m-ambient').addEventListener('click', function () { applyMode('ambient'); });
document.getElementById('m-none').addEventListener('click', function () { applyMode('none'); });

const shadowBtn = document.getElementById('shadow');
let shadows = true;
shadowBtn.addEventListener('click', function () {
  shadows = !shadows;
  renderer.shadowMap.enabled = shadows;
  key.castShadow = shadows;
  /* 切换 shadowMap 后材质需要重新编译才能反映开关 */
  scene.traverse(function (obj) {
    if (obj.isMesh) {
      const m = obj.material;
      if (Array.isArray(m)) m.forEach(function (x) { x.needsUpdate = true; });
      else m.needsUpdate = true;
    }
  });
  shadowBtn.textContent = shadows ? '关闭阴影' : '开启阴影';
});
</script>
</body>
</html>