Instancing Billboards

<!--
  说明：1500 个图标用实例化面片渲染，每帧把四元数对齐到相机，形成公告板
  核心逻辑：InstancedMesh 逐实例写矩阵，旋转部分直接复制相机 quaternion
  依赖：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:#081018}
  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}
  .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>1500</b></span>
  <label>缩放 <input type="range" id="size" min="0.3" max="1" step="0.05" value="0.6"></label>
  <span><b id="sizev">0.60</b></span>
  <button id="lock">锁定朝向</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;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x081018);
scene.fog = new THREE.Fog(0x081018, 30, 66);

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

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

scene.add(new THREE.HemisphereLight(0xb0cdf0, 0x111a22, 1.4));

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

const grid = new THREE.GridHelper(48, 48, 0x203040, 0x16212b);
grid.position.y = 0.01;
scene.add(grid);

/* 图标贴图：圆角方块 + 中心圆点，全部用 canvas 画 */
function makeIconTexture() {
  const s = 128;
  const cv = document.createElement('canvas');
  cv.width = cv.height = s;
  const ctx = cv.getContext('2d');

  ctx.fillStyle = '#0f1a24';
  ctx.strokeStyle = '#5ad1ff';
  ctx.lineWidth = 7;
  const r = 22;
  const x = 10;
  const y = 10;
  const w = s - 20;
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
  ctx.lineTo(x + w, y + w - r);
  ctx.quadraticCurveTo(x + w, y + w, x + w - r, y + w);
  ctx.lineTo(x + r, y + w);
  ctx.quadraticCurveTo(x, y + w, x, y + w - r);
  ctx.lineTo(x, y + r);
  ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  ctx.fillStyle = '#5ad1ff';
  ctx.beginPath();
  ctx.arc(s / 2, s / 2, 20, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = '#9fe6ff';
  ctx.beginPath();
  ctx.arc(s / 2, s / 2, 8, 0, Math.PI * 2);
  ctx.fill();

  const tex = new THREE.CanvasTexture(cv);
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.anisotropy = 4;
  return tex;
}

const COUNT = 1500;
const geo = new THREE.PlaneGeometry(1, 1);
const mat = new THREE.MeshBasicMaterial({
  map: makeIconTexture(),
  transparent: true,
  depthWrite: false,
  side: THREE.DoubleSide
});

const icons = new THREE.InstancedMesh(geo, mat, COUNT);
icons.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(icons);

const dummy = new THREE.Object3D();
const positions = [];

function hash(n) {
  const x = Math.sin(n * 37.19 + 5.7) * 43758.5453;
  return x - Math.floor(x);
}

for (let i = 0; i < COUNT; i++) {
  const a = hash(i) * Math.PI * 2;
  const r = Math.pow(hash(i + 0.4), 0.6) * 18;
  const x = Math.cos(a) * r;
  const z = Math.sin(a) * r;
  const y = 1.1 + hash(i + 0.9) * 3.6;
  positions.push(new THREE.Vector3(x, y, z));
}

let size = 0.6;
let locked = false;

function updateInstances() {
  for (let i = 0; i < COUNT; i++) {
    const p = positions[i];
    dummy.position.copy(p);
    /* 公告板的核心：朝向直接取相机的旋转，而不是逐点 lookAt */
    if (!locked) dummy.quaternion.copy(camera.quaternion);
    else dummy.quaternion.set(0, 0, 0, 1);
    dummy.scale.set(size, size, size);
    dummy.updateMatrix();
    icons.setMatrixAt(i, dummy.matrix);
  }
  icons.instanceMatrix.needsUpdate = true;
}

updateInstances();

const sizeEl = document.getElementById('size');
const sizevEl = document.getElementById('sizev');
sizeEl.addEventListener('input', function () {
  size = Number(sizeEl.value);
  sizevEl.textContent = size.toFixed(2);
});

const lockBtn = document.getElementById('lock');
lockBtn.addEventListener('click', function () {
  locked = !locked;
  lockBtn.textContent = locked ? '跟随相机' : '锁定朝向';
  updateInstances();
});

renderer.setAnimationLoop(function () {
  controls.update();
  if (!locked) updateInstances();
  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>