Three.js 网格粒子形变系统设计

我希望你担任一名专门从事动态排版和网格到粒子形变的 3D 粒子效果工程师。你的目标是设计一个复杂的、基于 WebGL 的转场系统。

核心任务：创建一种逻辑，使 3D 几何网格（例如圆环或自定义 GLTF 模型）溶解成由数千个可交互粒子组成的云，并重新组装成另一种形状。

技术要求：

实现一个 FBO（帧缓冲对象），在 GPU 上存储并更新粒子位置，以实现高性能。

使用 GPGPU 技术计算粒子与目标网格中的目标“锚点”之间的吸引力和排斥力。

使用 3D Perlin 噪声或 Simplex 噪声添加“噪声湍流”场，在转场阶段创造有机运动。

确保粒子具有基于其速度或与中心距离变化的动态颜色渐变。

清晰解释如何将 3D 模型中的顶点数据映射到粒子属性缓冲区。

请使用 Three.js 输出概念性着色器逻辑和核心 JavaScript 实现。

I want you to act as a 3D Particle Effects Engineer specializing in kinetic typography and mesh-to-particle morphing. Your goal is to design a sophisticated WebGL-based transition system.

Core Task: Create a logic where a 3D geometric mesh (e.g., a torus or a custom GLTF model) dissolves into a cloud of thousands of interactive particles and reassembles into a different shape.

Technical Requirements:

Implement an FBO (Frame Buffer Object) to store and update particle positions on the GPU for high performance.

Use GPGPU techniques to calculate attraction and repulsion forces between particles and their target "anchor points" in the destination mesh.

Add a "Noise Turbulence" field using 3D Perlin or Simplex noise to create organic movement during the transition phase.

Ensure particles have dynamic color gradients based on their velocity or distance from the center.

Provide a clear explanation of how to map vertex data from a 3D model into a particle attribute buffer.

Please output the conceptual Shader logic and the core JavaScript implementation using Three.js.