粒子化系统（3D-Particles）THreeJS react

「43 粒子化系统（3D-Particles）THreeJS react」

/~c6543YtecB~:/

链接：https://pan.quark.cn/s/2f52d8917412

数字展厅 · 粒子化系统（3D-Particles）

一个基于 React 与 Three.js 的交互式三维粒子系统，用于数字展厅场景中的图片、文本与 3D 模型的粒子化展示。项目提供丰富的特效、直观的上传与参数面板、截图与视角控制，适合快速演示与二次开发。

特性亮点

支持四种展示模式：随机云海、文本成像、图片成像、GLTF 模型采样。

提供多种动态特效：爆裂回流、星环漩涡、光爆冲击波、黑洞吞噬、瀑布云幕、彩虹换色、风洞回旋、星群聚散、波纹干涉、球壳成像、网格阵列等。

粒子自定义着色器：圆形点精灵、遮罩空洞（硬/软边）、彩虹色相动画、设备像素比适配。

动力学与交互：吸引/斥力、音频幅值驱动、鼠标局部扰动、涡旋与冲击波等多种力场组合。

图片采样优化：Gamma 增强、饱和度保留、动态亮度阈值、白背景剔除；支持 contain/cover 两种适配策略。

UI 面板完善：上传与预设、参数调节（粒子尺寸、Bloom 阈值/强度、反中心斥力、遮罩半径与软硬、运动速度、相机角度、粒子数量）、FPS 显示、截图保存、视角重置。

技术栈

React 18

TypeScript 5

Vite 5

Three.js（three）

React Three Fiber（@react-three/fiber）

Drei 辅助组件（@react-three/drei）

Postprocessing 后期（@react-three/postprocessing，Bloom 效果）

环境要求

Node.js 18 或更高版本（推荐遵循构建工具版本要求）。

快速开始

安装依赖：npm install

开发启动：npm run dev

生产构建：npm run build

本地预览构建产物：npm run preview

NPM 脚本说明

dev：启动本地开发服务器并开启热更新。

build：生成生产环境构建产物。

preview：本地预览构建产物。

项目结构

单页应用入口加载 React 组件并挂载到页面根节点。

主应用组件提供模式切换（随机/文本/图片/GLTF）与特效按钮工具栏。

粒子场景组件负责三维渲染、粒子几何属性管理、着色器与逐帧动力学更新。

图片采样模块（含工作线程）用于高性能采样与颜色保真处理。

上传面板支持拖拽与文件选择，提供图片与 GLB 模型预设、文本输入与应用。

参数面板用于调节视觉与物理参数，并提供截图保存与视角重置。

资源目录包含示例图片预设，可直接选用演示。

使用说明

图片模式：拖拽或选择图片文件；可在面板中调节适配方式（保持比例/铺满裁剪）、颜色保真、采样阈值、亮度增强、透明与饱和度阈值、白背景剔除等。

文本模式：输入文字后应用，系统会自动调整字号以适配画布。

GLTF 模式：拖拽或选择 GLB/GLTF 模型文件，并可快速选择内置模型预设进行演示。

特效切换：通过顶部工具栏按钮选择并切换特效；可与模式组合使用。

参数调节：在侧边面板中调整反中心斥力、遮罩空洞半径与软硬、Bloom 阈值与强度、粒子尺寸、运动速度、相机角度与粒子数量等。

截图与视角：支持一键截图保存与视角重置；界面显示当前 FPS，便于性能观察与调优。

配置说明

开发服务器默认监听本地端口并支持热更新；端口号由项目配置决定（文档不显示具体数值）。

TypeScript 使用严格模式与现代编译选项，JSX 模式为 React JSX。

构建工具采用现代 ES 模块与浏览器特性，默认输出符合生产部署需求的构建产物。

资源与预设

项目包含多张示例图片与若干 GLB 模型预设名称，便于快速演示不同展示模式。

可根据实际部署环境替换或扩展预设资源。

致谢

致谢：three、@react-three/fiber、@react-three/drei、@react-three/postprocessing 及相关开源生态。

贡献与开发建议

建议在本地环境进行性能测试与调优（粒子数量、着色器参数、Bloom 强度等）。

上传资源时优先使用体积较小的图片与模型，以获得更好的交互帧率与体验。