炫酷的three.js粒子系统 开源

在线地址：https://particles.casberry.in/

开源提示词

Act as a Creative Computational Artist & High-Performance WebGL Shader Expert. **YOUR GOAL:** Write a single, highly optimized JavaScript function body that defines the movement behavior and visual appearance of particles in a massive 3D particles swarm simulation (20,000+ units). **CONTEXT & API VARIABLES (Read-Only unless specified):** 1. `i` (Integer): Index of the current particle (0 to count-1). 2. `count` (Integer): Total number of particles. 3. `target` (THREE.Vector3): **WRITE-ONLY**. You MUST update this vector object (`target.set(x,y,z)`) to position the particle. 4. `color` (THREE.Color): **WRITE-ONLY**. You MUST update this color object (`color.setHSL(...)` or `color.set(...)`) to paint the particle. 5. `time` (Float): Global simulation time in seconds. Use this for animation. 6. `THREE`: The full Three.js library access. **HELPER FUNCTIONS (Interactive UI):** - `addControl(id, label, min, max, initialValue)`: Creates a real-time slider in the UI. Returns the current float value. *Example:* `const speed = addControl("speed", "Rotation Speed", 0, 5, 1.0);` - `setInfo(title, description)`: Updates the HUD. **Call ONLY when `i === 0`**. - `annotate(id, positionVector, labelText)`: Adds a floating 3D label. **Call ONLY when `i === 0`**. *Example:* `annotate("center", new THREE.Vector3(0,0,0), "Singularity");` **CRITICAL PERFORMANCE RULES (STRICT COMPLIANCE REQUIRED):** 1. **ZERO GARBAGE COLLECTION:** This function runs 20,000 times *per frame* (60fps). - **NEVER** use `new THREE.Vector3()` or `new THREE.Color()` inside the loop (except for one-off annotations). - **NEVER** allocate arrays or objects inside the loop. - Reuse the provided `target` and `color` objects. 2. **MATH OVER LOGIC:** Avoid heavy branching (`if/else`) inside the loop. Use math functions (`Math.sin`, `Math.cos`, `Math.abs`) for shaping. 3. **OUTPUT ONLY:** Do not return any value. Just mutate `target` and `color`. 4. **STABILITY LOCK:** All coordinates and color values MUST be finite, real numbers. **NEVER** set values to `NaN`, `Infinity`, or `undefined`. Ensure your mathematical formulas (e.g. divisions) have safety guards against zero. 5. **ENVIRONMENT CONFLICTS:** Do not use variable names that conflict with the global environment. **NEVER** redefine or use common global names like `SHADERS`, `THREE`, `Math`, etc. inside your code. **SECURITY & VALIDATION RULES (STRICT COMPLIANCE REQUIRED):** Our simulator includes a multi-stage security and stability validator. 1. **FORBIDDEN PATTERNS:** Any code containing the following will be REJECTED: - `document`, `window`, `fetch`, `XMLHttpRequest`, `WebSocket` - `eval`, `Function(`, `import(`, `require(`, `process` - `__proto__`, `.prototype`, `globalThis`, `self`, `location`, `navigator` - `localStorage`, `sessionStorage`, `indexedDB`, `crypto` - `setTimeout`, `setInterval`, `alert()`, `confirm()`, `prompt()` 2. **STABILITY GATE:** The code must pass a dry-run execution without throwing ANY runtime errors. 3. **CONCISE & CLEAN:** Avoid extremely long variable names or deeply nested structures. Ensure the code is self-contained and does not use complex non-standard characters in comments that might disrupt database storage. 4. **NO UNDECLARED VARIABLES:** All variables (like 'phi', 'theta', 'radius', etc.) MUST be explicitly declared with 'let' or 'const' before use. Code triggering "ReferenceError" will fail the stability gate. **VISUALIZATION GUIDELINES:** - Create complex, organic, or mathematical structures (Fractals, Attractors, Fields, interference patterns). - Use `time` to create smooth, flowing animation. - Map `i` (index) to spatial coordinates to create continuous forms. - Use `addControl` to make the visualization interactive (e.g., expanding size, changing chaos levels). **REQUEST:** [INSERT YOUR CREATIVE IDEA HERE - e.g., "A hyper-dimensional tesseract breathing in 4D space"] **STRICT RESPONSE FORMAT:** Return **ONLY** the JavaScript code for the function body. Do not include markdown formatting, backticks, or explanations before/after the code. **EXAMPLE OUTPUT:** const scale = addControl("scale", "Expansion", 10, 100, 50); const angle = i * 0.1 + time; target.set(Math.cos(angle) * scale, Math.sin(angle) * scale, i * 0.05); color.setHSL(i / count, 1.0, 0.5); if (i === 0) setInfo("Spiral Demo", "A basic test.");

三维粒子群模拟系统

概述

这是一个基于WebGL和Three.js的高性能三维粒子群模拟系统，能够实时渲染20,000+粒子，并支持复杂的动态视觉效果。系统通过优化算法和零垃圾回收策略确保流畅的60fps性能。

功能特性

🎨 核心功能

• 大规模粒子模拟：支持超过20,000个粒子的实时渲染

• 高性能优化：采用零垃圾回收策略，避免内存分配

• 实时交互：通过UI控件动态调整模拟参数

• 三维可视化：支持复杂的数学结构和有机形态

• 平滑动画：基于时间的连续动画系统

🎛️ 交互控制

• 可调节粒子旋转速度

• 动态控制缩放参数

• 实时调整颜色分布

• 控制粒子运动轨迹

📊 技术特点

• WebGL加速：利用GPU进行并行计算

• 数学驱动：基于数学函数而非逻辑分支

• 稳定性保障：防止NaN和无限值

• 内存安全：完全避免垃圾回收

快速开始

前提条件

• 现代Web浏览器（Chrome 90+、Firefox 88+、Safari 14+）

• 支持WebGL 2.0的GPU

• Three.js库（v128+）

安装

1. 克隆仓库

git clone https://github.com/your-username/particle-swarm-sim.git

1. 安装依赖

cd particle-swarm-sim npm install

1. 运行开发服务器

npm run dev

1. 在浏览器中打开http://localhost:3000

使用说明

基本使用

1. 页面加载后，系统将自动初始化20,000个粒子

2. 使用右侧面板的滑块调整模拟参数

3. 实时观察粒子系统的动态变化

4. 可暂停/恢复动画播放

参数说明

参数	范围	描述
旋转速度	0-5	控制粒子绕轴旋转的速度
扩展系数	10-100	控制粒子系统的整体大小
颜色饱和度	0.5-1.0	控制粒子颜色的鲜艳程度
运动幅度	0-2	控制粒子运动的剧烈程度

键盘快捷键

• 空格键：暂停/继续动画

• R键：重置所有参数

• F键：全屏切换

• 1-5键：切换预设效果

开发指南

项目结构

particle-swarm-sim/ ├── src/ │ ├── js/ │ │ ├── main.js # 主入口文件 │ │ ├── particleSystem.js # 粒子系统核心 │ │ └── controls.js # 交互控制 │ ├── css/ │ │ └── style.css # 样式文件 │ └── index.html # 主页面 ├── docs/ # 文档目录 ├── examples/ # 示例代码 └── package.json

粒子行为定义

系统核心是一个JavaScript函数，负责定义每个粒子的行为和外观：

// 示例：创建螺旋粒子系统 const scale = addControl("scale", "Expansion", 10, 100, 50); const speed = addControl("speed", "Rotation Speed", 0, 5, 1.0); const angle = i * 0.1 + time * speed; target.set( Math.cos(angle) * scale, Math.sin(angle) * scale, i * 0.05 ); color.setHSL(i / count, 1.0, 0.5); if (i === 0) { setInfo("Dynamic Spiral", "A rotating particle helix with interactive controls"); annotate("center", new THREE.Vector3(0,0,0), "Rotation Center"); }

性能优化规则

1. 零内存分配：避免在循环中创建新对象

2. 数学优先：使用三角函数替代条件判断

3. 向量复用：重用THREE.Vector3和THREE.Color对象

4. 稳定性：确保所有数学运算安全（无除零错误）

扩展功能

您可以通过修改粒子行为函数来创建不同的视觉效果：

1. 数学结构：分形、吸引子、矢量场

2. 物理模拟：流体动力学、电磁场

3. 有机形态：生物运动、群体行为

4. 抽象艺术：色彩渐变、几何图案

API参考

核心变量

变量	类型	描述
i	Integer	当前粒子索引（0到count-1）
count	Integer	粒子总数
target	THREE.Vector3	粒子位置（可写）
color	THREE.Color	粒子颜色（可写）
time	Float	全局时间（秒）
THREE	Object	Three.js库引用

辅助函数

函数	参数	描述
addControl(id, label, min, max, value)	字符串, 字符串, 数字, 数字, 数字	创建UI滑块控件
setInfo(title, description)	字符串, 字符串	更新HUD信息
annotate(id, position, text)	字符串, THREE.Vector3, 字符串	添加3D注释标签

安全限制

系统禁止使用以下API：

• DOM操作：document,window

• 网络请求：fetch,XMLHttpRequest

• 动态代码：eval,Function

• 存储API：localStorage,indexedDB

• 定时器：setTimeout,setInterval

示例效果

1. 四维超立方体

// 在4D空间旋转的立方体投影到3D const t = i * 0.001 + time * 0.2; const u = (i / count) * Math.PI * 2; const size = addControl("size", "Hypercube Size", 5, 50, 20); target.set( size * Math.cos(t) * Math.cos(u), size * Math.sin(t) * Math.cos(u), size * Math.sin(u) ); color.setHSL(t / (Math.PI * 2), 0.8, 0.6);

2. 洛伦兹吸引子

// 混沌系统的粒子实现 const chaos = addControl("chaos", "Chaos Factor", 0.1, 2.0, 0.5); const dt = 0.01; let x = (i % 100) * 0.1 - 5; let y = (Math.floor(i / 100) % 100) * 0.1 - 5; let z = Math.floor(i / 10000) * 0.1; for (let j = 0; j < 10; j++) { const dx = 10 * (y - x) * chaos; const dy = x * (28 - z) - y; const dz = x * y - (8/3) * z; x += dx * dt; y += dy * dt; z += dz * dt; } target.set(x, y, z); color.setHSL(Math.atan2(y, x) / (Math.PI * 2), 1.0, 0.5);

故障排除

常见问题

1. 性能下降

   • 检查控制台警告

   • 减少粒子数量

   • 简化数学计算

2. 视觉效果异常

   • 确保所有数学值有限

   • 检查除零错误

   • 验证参数范围

3. UI控件不响应

   • 检查JavaScript错误

   • 验证控件ID唯一性

   • 确认Three.js正确加载

调试技巧

// 在粒子0添加调试信息 if (i === 0) { console.log("当前参数:", { time: time, count: count, target: target.toArray() }); }

贡献指南

1. Fork本仓库

2. 创建功能分支 (git checkout -b feature/amazing-effect)

3. 提交更改 (git commit -m 'Add amazing particle effect')

4. 推送到分支 (git push origin feature/amazing-effect)

5. 开启Pull Request

代码规范

• 遵循性能优化规则

• 添加适当的注释

• 包含示例代码

• 更新文档