Lights Physical

<!--
  说明：点光源按物理规律衰减，同一亮度在不同高度落到地面的照度差一个数量级
  核心逻辑：decay 为 2 时照度按距离平方衰减，强度单位是坎德拉
  依赖：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:#080c11}
  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 .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="decayv">2.0</b></span>
  <label>decay <input type="range" id="decay" min="0.6" max="2.4" step="0.1" value="2"></label>
  <label>强度 <input type="range" id="power" min="20" max="400" step="10" value="180"></label>
  <span><b id="powerv">380</b> cd</span>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<div id="stage">
  <div id="hud">
    灯高 2.5：照度 <em id="e1">—</em><br>
    灯高 6.0：照度 <em id="e2">—</em><br>
    灯高 11.0：照度 <em id="e3">—</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.toneMappingExposure = 1.0;
stage.appendChild(renderer.domElement);

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

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

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

const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(40, 40),
  new THREE.MeshStandardMaterial({ color: 0x3a3f45, roughness: 0.95, metalness: 0.02 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

const grid = new THREE.GridHelper(40, 40, 0x2a323b, 0x1c242b);
grid.position.y = 0.01;
scene.add(grid);

/* 三盏同功率的灯，只差高度 */
const HEIGHTS = [2.5, 6.0, 11.0];
const COLORS = [0xffd0a0, 0xa8d8ff, 0xfff4de];
const lights = [];

HEIGHTS.forEach(function (h, i) {
  const x = (i - 1) * 9;

  const light = new THREE.PointLight(COLORS[i], 180, 0, 2);
  light.position.set(x, h, 0);
  scene.add(light);
  lights.push(light);

  const bulb = new THREE.Mesh(
    new THREE.SphereGeometry(0.18, 14, 10),
    new THREE.MeshBasicMaterial({ color: COLORS[i] })
  );
  bulb.position.copy(light.position);
  scene.add(bulb);

  /* 灯杆，让高度差一眼可见 */
  const pole = new THREE.Mesh(
    new THREE.CylinderGeometry(0.035, 0.035, h, 8),
    new THREE.MeshStandardMaterial({ color: 0x6a7683, roughness: 0.6, metalness: 0.4 })
  );
  pole.position.set(x, h / 2, 0);
  scene.add(pole);

  /* 地面上一块测试靶，颜色接近中性灰，方便比较照度 */
  const pad = new THREE.Mesh(
    new THREE.CircleGeometry(1.6, 32),
    new THREE.MeshStandardMaterial({ color: 0x8a9199, roughness: 0.9 })
  );
  pad.rotation.x = -Math.PI / 2;
  pad.position.set(x, 0.02, 0);
  scene.add(pad);
});

const decayEl = document.getElementById('decay');
const decayvEl = document.getElementById('decayv');
const powerEl = document.getElementById('power');
const powervEl = document.getElementById('powerv');

function update() {
  const decay = Number(decayEl.value);
  const intensity = Number(powerEl.value) * 2.1;
  decayvEl.textContent = decay.toFixed(1);
  powervEl.textContent = String(Math.round(intensity));

  HEIGHTS.forEach(function (h, i) {
    lights[i].decay = decay;
    lights[i].intensity = intensity;
  });

  /* 照度近似：强度 / 距离的 decay 次方，距离取灯到靶面中心 */
  const e = HEIGHTS.map(function (h) {
    return intensity / Math.pow(h, decay);
  });
  document.getElementById('e1').textContent = e[0].toFixed(1) + ' lx';
  document.getElementById('e2').textContent = e[1].toFixed(1) + ' lx';
  document.getElementById('e3').textContent = e[2].toFixed(1) + ' lx';
}

decayEl.addEventListener('input', update);
powerEl.addEventListener('input', update);
update();

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>