GLB 粒子雕塑实验室

基于 Next.js + @react-three/fiber 的小工具，把 GLB/GLTF 模型实时变成粒子雕塑，并可随时切换回原始 Mesh。

快速开始

• 安装依赖：pnpm install
• 开发：pnpm dev 打开 http://localhost:3000
• 构建/预览：pnpm build 后 pnpm start
• 代码检查：pnpm lint

主要功能

• ✅ 上传自己的 GLB / GLTF 模型（角色、道具、雕塑都行）；上限 3MB，支持从 poly.pizza 下载压缩模型后直接上传。
• ✅ 一键把模型变成粒子雕塑 / 点云：加载后自动转为点云，Leva 面板可调密度、点尺寸、呼吸/旋转/流动等参数。
• ✅ 在「原始 Mesh / 粒子视图」之间随时切换：顶部 Show Mesh / Hide Mesh 按钮可叠加或隐藏原始模型，随时对比。
• 其他交互：Explode / Assemble 粒子动画、示例模型快捷切换、上传后显示文件名与错误提示。

使用指南

1. 打开页面，先用顶部 Examples 按钮中的内置模型试效果（模型位于 public/，列表在 app/page.jsx 的 modelOptions）。
2. 点击 Upload GLB Model 选择本地 GLB/GLTF（≤3MB）。可去 poly.pizza 下载圣诞树等模型后直接上传。
3. 模型会立刻被转换为粒子雕塑；通过 Leva 悬浮面板的 Particles 分组调整粒子密度、点大小、颜色、呼吸/旋转等效果。
4. 需要对比原始形态时，用 Show Mesh / Hide Mesh 切换 Mesh，可配合 Explode / Assemble 查看分散/收拢动画。

目录速览

• app/page.jsx：主界面与交互逻辑（模型选择、上传、Mesh/粒子切换）。
• src/components/canvas/DogParticles.jsx：粒子生成与动画着色器，接受模型 URL 并控制 point cloud。
• src/components/canvas/View.jsx：共享 Canvas、轨道控制与灯光。
• public/：默认示例 GLB/GLTF 与静态资源，新增示例模型放这里即可被直接引用。

提示

• 上传新模型会自动释放旧的 blob URL，方便长时间预览。
• 建议使用面数适中的模型（< 5k-10k 面），从 poly.pizza 选择低模版本效果更流畅。

English Version

GLB Particle Sculpture Lab lets you drop any GLB/GLTF and instantly turn it into a particle sculpture, with live controls to swap back to the original mesh.

Quickstart

• Install deps: pnpm install
• Dev server: pnpm dev then open http://localhost:3000
• Build/preview: pnpm build then pnpm start
• Lint: pnpm lint

Core Features

• Upload your own GLB/GLTF (≤3MB). Grab low-poly models from https://poly.pizza and upload directly.
• One-click particle/point-cloud conversion with Leva controls for density, point size, breathing, rotation, flow, etc.
• Toggle between mesh and particle view anytime with Show Mesh / Hide Mesh and combine with Explode / Assemble for spread/merge motion.

How to Use

1. Try the built-in examples first. They live in public/ and are listed in app/page.jsx as modelOptions.
2. Click Upload GLB Model to pick a local GLB/GLTF (≤3MB). Models from poly.pizza work great.
3. The model instantly becomes a particle sculpture. Tweak particle density/size/color and motion in the floating Leva Particles group.
4. Use Show Mesh / Hide Mesh to compare with the original mesh; pair with Explode / Assemble to see it disperse/collect.

Files

• app/page.jsx: UI and interactions (model selection, upload, mesh/particle toggles).
• src/components/canvas/DogParticles.jsx: Particle generation + shader animation, consumes model URLs.
• src/components/canvas/View.jsx: Shared Canvas, orbit controls, and lights.
• public/: Default GLB/GLTF assets. Add more here to reference them directly.

Tips

• Old blob URLs are released automatically after a new upload for long sessions.
• Best results with modest polycounts (<5k–10k tris). Low-poly models from poly.pizza keep the particle sim smooth.