Particles

<!--
  说明：九千个雪花粒子在长方体空间里下落，越界后回到顶部，形成持续降雪
  核心逻辑：每帧改写 position 属性并置 needsUpdate，配合径向渐变贴图做柔边
  依赖：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:#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: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>9000</b></span>
  <label>下落速度 <input type="range" id="speed" min="0.2" max="2.5" step="0.1" value="1"></label>
  <span><b id="speedv">1.0</b> ×</span>
  <label>粒径 <input type="range" id="size" min="0.06" max="0.32" step="0.02" value="0.16"></label>
  <button id="pause">暂停</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(0x070b10);

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

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

/* 圆形柔边贴图，用 canvas 现画，避免依赖外部图片 */
function makeSprite() {
  const size = 64;
  const c = document.createElement('canvas');
  c.width = size;
  c.height = size;
  const g = c.getContext('2d');
  const grad = g.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
  grad.addColorStop(0.0, 'rgba(255,255,255,1)');
  grad.addColorStop(0.35, 'rgba(210,235,255,0.85)');
  grad.addColorStop(1.0, 'rgba(160,210,255,0)');
  g.fillStyle = grad;
  g.fillRect(0, 0, size, size);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}

const COUNT = 9000;
const BOX_X = 9;
const BOX_Y = 14;
const BOX_Z = 9;

const positions = new Float32Array(COUNT * 3);
const speeds = new Float32Array(COUNT);
const drift = new Float32Array(COUNT);

for (let i = 0; i < COUNT; i++) {
  positions[i * 3] = (Math.random() * 2 - 1) * BOX_X;
  positions[i * 3 + 1] = Math.random() * BOX_Y;
  positions[i * 3 + 2] = (Math.random() * 2 - 1) * BOX_Z;
  speeds[i] = 0.6 + Math.random() * 1.4;
  drift[i] = Math.random() * Math.PI * 2;
}

const geometry = new THREE.BufferGeometry();
const posAttr = new THREE.BufferAttribute(positions, 3);
posAttr.setUsage(THREE.DynamicDrawUsage);
geometry.setAttribute('position', posAttr);

const material = new THREE.PointsMaterial({
  size: 0.16,
  map: makeSprite(),
  transparent: true,
  opacity: 0.9,
  depthWrite: false,
  blending: THREE.AdditiveBlending,
  sizeAttenuation: true
});

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

/* 地面网格提供空间参照 */
const grid = new THREE.GridHelper(24, 24, 0x2f4459, 0x17222c);
scene.add(grid);

const clock = new THREE.Clock();
let running = true;
let speedScale = 1;

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.05);
  const t = clock.elapsedTime;

  if (running) {
    for (let i = 0; i < COUNT; i++) {
      const iy = i * 3 + 1;
      positions[iy] -= speeds[i] * speedScale * dt * 2.2;

      /* 轻微横向摆动，雪花不会直上直下 */
      positions[i * 3] += Math.sin(t * 0.9 + drift[i]) * dt * 0.18;

      if (positions[iy] < 0) {
        positions[iy] = BOX_Y;
        positions[i * 3] = (Math.random() * 2 - 1) * BOX_X;
        positions[i * 3 + 2] = (Math.random() * 2 - 1) * BOX_Z;
      }
    }
    posAttr.needsUpdate = true;
  }

  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);
});

const speed = document.getElementById('speed');
const speedv = document.getElementById('speedv');
speed.addEventListener('input', function () {
  speedScale = Number(speed.value);
  speedv.textContent = speedScale.toFixed(1);
});

const size = document.getElementById('size');
size.addEventListener('input', function () {
  material.size = Number(size.value);
});

const pauseBtn = document.getElementById('pause');
pauseBtn.addEventListener('click', function () {
  running = !running;
  pauseBtn.textContent = running ? '暂停' : '继续';
});
</script>
</body>
</html>