Points Billboards

<!--
  说明：6000 个设施点用圆形公告板渲染，贴图由 canvas 画出的径向渐变生成
  核心逻辑：PointsMaterial 配合 alphaTest，让每个点始终正对相机且不透明压边
  依赖：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:#0a0e13}
  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:140px;accent-color:#4f9ef8}
  .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>6000</b></span>
  <label>点尺寸 <input type="range" id="size" min="0.15" max="0.9" step="0.05" value="0.42"></label>
  <span><b id="sizev">0.42</b></span>
  <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(0x0a0e13);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 300);
camera.position.set(20, 16, 22);

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

scene.add(new THREE.HemisphereLight(0xa8c8ff, 0x0d141c, 1.5));

/* 画一张 64 × 64 的圆点贴图：中心亮、边缘alpha渐隐 */
function makeDotTexture() {
  const s = 64;
  const cv = document.createElement('canvas');
  cv.width = cv.height = s;
  const ctx = cv.getContext('2d');
  const g = ctx.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);
  g.addColorStop(0, 'rgba(255,255,255,1)');
  g.addColorStop(0.45, 'rgba(255,255,255,0.95)');
  g.addColorStop(0.72, 'rgba(255,255,255,0.35)');
  g.addColorStop(1, 'rgba(255,255,255,0)');
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, s, s);
  const tex = new THREE.CanvasTexture(cv);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}

const N = 6000;
const positions = new Float32Array(N * 3);
const colors = new Float32Array(N * 3);
const c = new THREE.Color();

/* 用整数哈希代替随机数，保证每次刷新分布一致 */
function hash(n) {
  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
  return x - Math.floor(x);
}

for (let i = 0; i < N; i++) {
  const a = hash(i) * Math.PI * 2;
  const r = Math.pow(hash(i + 17), 0.55) * 17;
  positions[i * 3] = Math.cos(a) * r;
  positions[i * 3 + 1] = (hash(i + 3) - 0.5) * 1.2 + 1.2;
  positions[i * 3 + 2] = Math.sin(a) * r;

  const t = hash(i + 91);
  if (t < 0.12) c.setHex(0xff6b6b);
  else if (t < 0.34) c.setHex(0xffd166);
  else c.setHex(0x63b8ff);
  colors[i * 3] = c.r;
  colors[i * 3 + 1] = c.g;
  colors[i * 3 + 2] = c.b;
}

const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const mat = new THREE.PointsMaterial({
  size: 0.42,
  map: makeDotTexture(),
  vertexColors: true,
  sizeAttenuation: true,
  transparent: true,
  alphaTest: 0.04,
  depthWrite: false,
  blending: THREE.NormalBlending
});

const points = new THREE.Points(geo, mat);
scene.add(points);

/* 地面网格，仅用于判断点的空间位置 */
const grid = new THREE.GridHelper(40, 40, 0x1d2a38, 0x141d27);
grid.position.y = 0.01;
scene.add(grid);

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

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  const t = clock.getElapsedTime();
  /* 轻微的呼吸感：整体尺寸随正弦波动，避免静态画面发死 */
  mat.size = Number(sizeEl.value) * (1 + Math.sin(t * 1.6) * 0.06);
  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>