Postprocessing

<!--
  说明：用 EffectComposer 串起渲染、泛光与输出三个阶段，观察后期处理对夜景的影响
  核心逻辑：RenderPass 绘制场景，UnrealBloomPass 提取高亮并模糊叠加，OutputPass 统一色调映射
  依赖：three.js 0.160.0 及 addons 后期模块 · 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:#07090d}
  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}
  .bar input[type=range]{width:130px;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 id="sv">0.9</b></span>
  <label>强度 <input type="range" id="strength" min="0" max="2.4" step="0.05" value="0.9"></label>
  <label>阈值 <input type="range" id="threshold" min="0" max="1" step="0.02" value="0.35"></label>
  <button id="toggle">关闭泛光</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';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.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.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
stage.appendChild(renderer.domElement);

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

const camera = new THREE.PerspectiveCamera(
  42, stage.clientWidth / stage.clientHeight, 0.5, 300
);
camera.position.set(26, 16, 30);

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

scene.add(new THREE.HemisphereLight(0x24344a, 0x05070a, 0.9));
const key = new THREE.DirectionalLight(0xcfe2ff, 1.6);
key.position.set(-18, 26, 12);
scene.add(key);

/* 地面：深色粗糙面，只用来承接高光与阴影 */
const ground = new THREE.Mesh(
  new THREE.CircleGeometry(70, 96),
  new THREE.MeshStandardMaterial({ color: 0x10151c, roughness: 0.95 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

/* 主体：金属环结，靠环境外的两盏点光打出高光 */
const knot = new THREE.Mesh(
  new THREE.TorusKnotGeometry(5.2, 1.5, 200, 32),
  new THREE.MeshStandardMaterial({ color: 0x9fb4cc, roughness: 0.24, metalness: 0.92 })
);
knot.position.y = 8;
scene.add(knot);

const warm = new THREE.PointLight(0xff8a3d, 220, 70);
warm.position.set(12, 10, 8);
scene.add(warm);

const cool = new THREE.PointLight(0x3d9bff, 240, 70);
cool.position.set(-12, 6, -10);
scene.add(cool);

/* 一圈自发光柱子，给泛光提供稳定的高亮来源 */
const pillarGeo = new THREE.CylinderGeometry(0.22, 0.22, 4.2, 10);
const pillarMat = new THREE.MeshStandardMaterial({
  color: 0x0b0f14,
  emissive: 0x4fd1ff,
  emissiveIntensity: 3.2,
  roughness: 0.4
});

for (let i = 0; i < 26; i++) {
  const a = i / 26 * Math.PI * 2;
  const pillar = new THREE.Mesh(pillarGeo, pillarMat);
  pillar.position.set(Math.cos(a) * 22, 2.1, Math.sin(a) * 22);
  scene.add(pillar);
}

/* ---------- 后期链 ---------- */
const composer = new EffectComposer(renderer);
composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
composer.setSize(stage.clientWidth, stage.clientHeight);

composer.addPass(new RenderPass(scene, camera));

const bloom = new UnrealBloomPass(
  new THREE.Vector2(stage.clientWidth, stage.clientHeight),
  0.9,   // strength
  0.5,   // radius
  0.35   // threshold
);
composer.addPass(bloom);

/* OutputPass 负责色调映射与色彩空间转换，放在链尾 */
composer.addPass(new OutputPass());

const svEl = document.getElementById('sv');
const strength = document.getElementById('strength');
const threshold = document.getElementById('threshold');
const toggle = document.getElementById('toggle');
let bloomOn = true;

strength.addEventListener('input', function () {
  bloom.strength = Number(strength.value);
  svEl.textContent = bloom.strength.toFixed(2);
});

threshold.addEventListener('input', function () {
  bloom.threshold = Number(threshold.value);
});

toggle.addEventListener('click', function () {
  bloomOn = !bloomOn;
  bloom.enabled = bloomOn;
  toggle.textContent = bloomOn ? '关闭泛光' : '开启泛光';
});

renderer.setAnimationLoop(function () {
  knot.rotation.y += 0.004;
  knot.rotation.x += 0.0016;
  controls.update();
  composer.render();
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
  composer.setSize(w, h);
});
</script>
</body>
</html>