Clyune Component GalleryParticle Field · How it works & code
Points Particle Field Interacting with Mouse.
Runtime logic
Visiting `/threejs/particles`, DemoHost lazy-loads `demos/particles.js` (registry `mod: 'particles'`) and calls `mountParticles(host, { variant: 'particles' })`. `createThreeStage` sets up WebGLRenderer, Scene, PerspectiveCamera and OrbitControls, plus the info panel. The module registers its per-frame callback with `S.onFrame`. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; WebGL (three.js): WebGL through three.js WebGLRenderer; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21, three 0.170.0
Dependencies
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
Imported APIs
createThreeStage — Shared three.js stage: WebGLRenderer, scene, perspective camera, OrbitControls, auto framing and render loop; THREE — three.js namespace; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; THREE.BufferGeometry — Custom vertex geometry; THREE.BufferAttribute — Typed vertex attribute (positions/colours); THREE.PointsMaterial — Points material; THREE.AdditiveBlending — Additive blending (glow); THREE.Points — Point cloud; THREE.LineSegments — Line segments; THREE.EdgesGeometry — Extracts edges of a geometry; THREE.BoxGeometry — Box geometry; THREE.LineBasicMaterial — Basic line material
Source code
frontend/src/demos/particles.js: particles.js (L1-L69)
Code walkthrough
L4-11: `PARAMS_SPEC` (constant/table). L12-12: `BX` (constant/table). L13-28: `DOC` (constant/table). L30-69: `mountParticles` (function); creates three.js objects `BufferGeometry`, `BufferAttribute`, `PointsMaterial`, `AdditiveBlending`, `Points`, `LineSegments` …; math via `Math.max`, `Math.min`, `Math.round`, `Math.random`, `Math.hypot`, `Math.abs`; returns readouts `n`, `vAvg`, `g`, `mx`, `my`, `bounce` to the info panel.
Principles
p(t+Δt) = p(t) + (v + g·m)·k·Δt Boundary: p = ± Boundary, v →-v (flexback) Every bright spot on the IPCC screen is one Particles , They share one BufferGeometry, The coordinates are in Universal GPU You can finish thousands at once THREE.Points). Each frame is added to each particle“Speed × Time”，碰到看不见的盒子边界就把速度反向，所以粒子永远不会飞出画面。鼠标位置 m A small bias in the same direction for all particles g，It looks like being“吹”Past. Particle use Add Mix , The overlap will be brighter.