Postprocess Outline

<!--
  说明：OutlinePass 给选中的物体描一圈边，鼠标指到哪栋楼就高亮哪栋
  核心逻辑：selectedObjects 数组是描边列表，内部用两层遮罩做边缘检测
  依赖：three.js 0.160.0、OrbitControls、OutlinePass · 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:#0a0f15}
  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:130px;accent-color:#4f9ef8}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative;cursor:pointer}
  #stage canvas{display:block}
  #hud{position:absolute;left:12px;bottom:12px;padding:8px 12px;border-radius:6px;
       background:rgba(9,14,19,.84);border:1px solid #223040;font-size:12px;line-height:1.8;
       color:#c6d2e0;pointer-events:none}
  #hud em{font-style:normal;color:#ffd166}
</style>
</head>
<body>
<div class="bar">
  <span>描边强度 <b id="ev">3.0</b></span>
  <label>edgeStrength <input type="range" id="es" min="0.5" max="8" step="0.5" value="3"></label>
  <span class="sp"></span>
  <span>移动鼠标选中建筑 · 拖拽旋转</span>
</div>
<div id="stage">
  <div id="hud">选中 <em id="sel">无</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';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.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.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0f15);
scene.fog = new THREE.Fog(0x0a0f15, 42, 84);

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

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(0xb6d0ea, 0x141c24, 1.3));
const sun = new THREE.DirectionalLight(0xffe9c8, 2.1);
sun.position.set(-16, 22, 12);
scene.add(sun);

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

const grid = new THREE.GridHelper(54, 54, 0x2a3a48, 0x1b2630);
grid.position.y = 0.01;
scene.add(grid);

/* 选中目标：一组可拾取的建筑 */
const buildings = [];
function hash(n) {
  const x = Math.sin(n * 19.9 + 7.3) * 43758.5453;
  return x - Math.floor(x);
}

for (let i = 0; i < 18; i++) {
  const a = (i / 18) * Math.PI * 2;
  const r = 5 + (i % 3) * 2.6;
  const w = 1.8 + hash(i) * 1.6;
  const h = 3 + Math.pow(hash(i + 2), 1.4) * 11;

  const b = new THREE.Mesh(
    new THREE.BoxGeometry(w, h, w),
    new THREE.MeshStandardMaterial({
      color: new THREE.Color().setHSL(0.55 - hash(i + 4) * 0.1, 0.14, 0.42 + hash(i + 6) * 0.16),
      roughness: 0.65,
      metalness: 0.15
    })
  );
  b.position.set(Math.cos(a) * r, h / 2, Math.sin(a) * r);
  b.rotation.y = a;
  b.userData.id = i + 1;
  scene.add(b);
  buildings.push(b);
}

const composer = new EffectComposer(renderer);
composer.setSize(stage.clientWidth, stage.clientHeight);
composer.addPass(new RenderPass(scene, camera));

const outlinePass = new OutlinePass(
  new THREE.Vector2(stage.clientWidth, stage.clientHeight),
  scene,
  camera
);
outlinePass.edgeStrength = 3.0;
outlinePass.edgeGlow = 0.35;
outlinePass.edgeThickness = 1.6;
outlinePass.pulsePeriod = 0;
outlinePass.visibleEdgeColor.set('#ffd166');
outlinePass.hiddenEdgeColor.set('#5a4a26');
composer.addPass(outlinePass);
composer.addPass(new OutputPass());

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2(-10, -10);
const selEl = document.getElementById('sel');
let hovered = null;

function pick(event) {
  const r = renderer.domElement.getBoundingClientRect();
  pointer.x = ((event.clientX - r.left) / r.width) * 2 - 1;
  pointer.y = -((event.clientY - r.top) / r.height) * 2 + 1;

  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObjects(buildings, false);

  if (hits.length) {
    hovered = hits[0].object;
    outlinePass.selectedObjects = [hovered];
    selEl.textContent = '建筑 ' + hovered.userData.id;
  } else {
    hovered = null;
    outlinePass.selectedObjects = [];
    selEl.textContent = '无';
  }
}

renderer.domElement.addEventListener('pointermove', pick);
renderer.domElement.addEventListener('pointerleave', function () {
  outlinePass.selectedObjects = [];
  selEl.textContent = '无';
});

const esEl = document.getElementById('es');
const evEl = document.getElementById('ev');
esEl.addEventListener('input', function () {
  const v = Number(esEl.value);
  outlinePass.edgeStrength = v;
  evEl.textContent = v.toFixed(1);
});

renderer.setAnimationLoop(function () {
  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);
  outlinePass.setSize(w, h);
});
</script>
</body>
</html>