Points

<!--
  说明：两万四千个点组成一团扁平点云，颜色按高度渐变，用来观察三维散点的空间结构
  核心逻辑：BufferGeometry 写入 position 与 color 属性，PointsMaterial 开启 vertexColors
  依赖：three.js 0.160.0 · 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:#0d1117}
  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:10px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .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>24000</b></span>
  <button id="spin">停止旋转</button>
  <button id="size">放大点</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"
  }
}
</script>
<script type="module">
import * as THREE from 'three';

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(0x0b0f14);

const camera = new THREE.PerspectiveCamera(
  48, stage.clientWidth / stage.clientHeight, 0.1, 200
);
camera.position.set(0, 7, 19);
camera.lookAt(0, 0, 0);

const COUNT = 24000;
const positions = new Float32Array(COUNT * 3);
const colors = new Float32Array(COUNT * 3);
const color = new THREE.Color();

for (let i = 0; i < COUNT; i++) {
  /* 均匀分布在球体内，再把 Y 轴压扁，得到一团扁椭球 */
  const r = Math.cbrt(Math.random()) * 9.5;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);

  const x = r * Math.sin(phi) * Math.cos(theta);
  const z = r * Math.sin(phi) * Math.sin(theta);
  const y = r * Math.cos(phi) * 0.38;

  positions[i * 3] = x;
  positions[i * 3 + 1] = y;
  positions[i * 3 + 2] = z;

  /* 高度归一化后映射色相：低谷偏青，高处偏橙 */
  const t = THREE.MathUtils.clamp((y + 3.6) / 7.2, 0, 1);
  color.setHSL(0.57 - 0.5 * t, 0.72, 0.42 + 0.22 * t);
  colors[i * 3] = color.r;
  colors[i * 3 + 1] = color.g;
  colors[i * 3 + 2] = color.b;
}

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

const material = new THREE.PointsMaterial({
  size: 0.09,
  vertexColors: true,
  sizeAttenuation: true,
  transparent: true,
  opacity: 0.9,
  depthWrite: false
});

const points = new THREE.Points(geometry, material);
scene.add(points);

const clock = new THREE.Clock();
let spinning = true;

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);
  if (spinning) {
    points.rotation.y += dt * 0.22;
    points.rotation.x = Math.sin(clock.elapsedTime * 0.18) * 0.22;
  }
  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);
});

const spinBtn = document.getElementById('spin');
spinBtn.addEventListener('click', function () {
  spinning = !spinning;
  spinBtn.textContent = spinning ? '停止旋转' : '开始旋转';
});

const sizeBtn = document.getElementById('size');
let big = false;
sizeBtn.addEventListener('click', function () {
  big = !big;
  material.size = big ? 0.18 : 0.09;
  sizeBtn.textContent = big ? '还原点径' : '放大点';
});
</script>
</body>
</html>