Points Custom

<!--
  说明：三万个采样点带自定义属性（粒径、色标、相位），在顶点着色器里决定外观
  核心逻辑：ShaderMaterial 读取 aSize / aTint / aPhase，片元里用 gl_PointCoord 抠圆
  依赖：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:#070b10}
  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 label{display:flex;align-items:center;gap:6px}
  .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>30000</b></span>
  <label>浓度 <input type="range" id="gain" min="0.2" max="2" step="0.1" value="1"></label>
  <span><b id="gainv">1.0</b></span>
  <label>粒径 <input type="range" id="psize" min="4" max="26" step="1" value="14"></label>
  <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, alpha: false });
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(0x070b10);

const camera = new THREE.PerspectiveCamera(42, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(14, 10, 16);

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

const N = 30000;
const positions = new Float32Array(N * 3);
const sizes = new Float32Array(N);
const tints = new Float32Array(N);
const phases = new Float32Array(N);

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

/* 三条烟羽状分布：沿 x 轴拉伸的高斯团，用来演示浓度属性 */
for (let i = 0; i < N; i++) {
  const g = Math.floor(hash(i) * 3);
  const cx = (g - 1) * 5;
  const u = hash(i + 11);
  const v = hash(i + 23);
  const w = hash(i + 37);
  const spread = 1.1 + u * 1.6;
  const x = cx + (v - 0.5) * 3.4 + u * 2.6;
  const z = (w - 0.5) * 3.4 * spread;
  const y = Math.abs(v - 0.5) * 1.4 + (1 - u) * 4.2 + 0.1;

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

  /* 离源越远越稀薄，粒径与浓度同时衰减 */
  sizes[i] = 0.6 + u * 1.6;
  tints[i] = THREE.MathUtils.clamp(1 - u, 0, 1);
  phases[i] = hash(i + 71) * Math.PI * 2;
}

const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geo.setAttribute('aSize', new THREE.BufferAttribute(sizes, 1));
geo.setAttribute('aTint', new THREE.BufferAttribute(tints, 1));
geo.setAttribute('aPhase', new THREE.BufferAttribute(phases, 1));
geo.computeBoundingSphere();

const uniforms = {
  uTime: { value: 0 },
  uGain: { value: 1 },
  uPixel: { value: 14 },
  uColorA: { value: new THREE.Color(0x1b6fff) },
  uColorB: { value: new THREE.Color(0xffb347) }
};

const mat = new THREE.ShaderMaterial({
  uniforms: uniforms,
  transparent: true,
  depthWrite: false,
  blending: THREE.AdditiveBlending,
  vertexShader: `
    attribute float aSize;
    attribute float aTint;
    attribute float aPhase;
    uniform float uTime;
    uniform float uPixel;
    varying float vTint;
    void main() {
      vTint = aTint;
      vec3 p = position;
      p.y += sin(uTime * 1.2 + aPhase) * 0.18;
      vec4 mv = modelViewMatrix * vec4(p, 1.0);
      gl_Position = projectionMatrix * mv;
      gl_PointSize = aSize * uPixel * (12.0 / -mv.z);
    }
  `,
  fragmentShader: `
    uniform vec3 uColorA;
    uniform vec3 uColorB;
    uniform float uGain;
    varying float vTint;
    void main() {
      float d = length(gl_PointCoord - vec2(0.5));
      if (d > 0.5) discard;
      float soft = smoothstep(0.5, 0.12, d);
      vec3 col = mix(uColorA, uColorB, vTint);
      gl_FragColor = vec4(col * (0.6 + vTint * 0.8) * uGain, soft * 0.62);
    }
  `
});

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

/* 源点位置用小球标出 */
const srcMat = new THREE.MeshBasicMaterial({ color: 0xff7043 });
for (let g = -1; g <= 1; g++) {
  const s = new THREE.Mesh(new THREE.SphereGeometry(0.16, 16, 12), srcMat);
  s.position.set(g * 5, 0.2, 0);
  scene.add(s);
}

const gainEl = document.getElementById('gain');
const gainvEl = document.getElementById('gainv');
gainEl.addEventListener('input', function () {
  const v = Number(gainEl.value);
  uniforms.uGain.value = v;
  gainvEl.textContent = v.toFixed(1);
});

document.getElementById('psize').addEventListener('input', function (e) {
  uniforms.uPixel.value = Number(e.target.value);
});

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  uniforms.uTime.value = clock.getElapsedTime();
  cloud.rotation.y += 0.0012;
  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>