吧唧制造机 Badge Maker iOS

一个用 Expo 和 Three.js 制作的 iPhone 吧唧制作与预览工具。用户可以导入背景照片和透明主体 PNG，把图片合成为带轻微立体感、玻璃反光、闪片、陀螺仪光影反馈和 3D 正反面预览的吧唧模型。

Badge Maker iOS is an Expo + Three.js mobile app for making anime badge / pin-back button previews from photos and transparent PNG layers. It supports circular photo cropping, foreground PNG layers, glitter sequins, gyroscope lighting, layered motion, and a 3D badge preview.

关键词：吧唧制造机、吧唧制作、吧唧生成器、徽章制作、谷子吧唧、痛包谷子、闪片吧唧、镭射吧唧、照片吧唧、PNG 主体图层、3D badge maker、anime badge maker、pin button maker、Expo iOS app、Three.js badge preview。

功能

• 背景照片导入与圆形裁剪
• 主体 PNG 图层导入、裁剪和缩放
• 高细分光滑正面、侧边和背面建模
• GLB 背面/五金结构参考模型
• 陀螺仪驱动的反光和模型角度反馈
• 独立闪片粒子、颜色选择、材质导入、数量调节和开关
• 多种闪片样式：长条、镭射、星星、月亮圆片、爱心、水晶
• 层次反馈滑块，用于控制主体、背景和闪片之间的相对动态
• 跟手拖动的底部调节面板，收起时吧唧预览会放大并居中
• 预览导出到相册

适合谁

• 喜欢吧唧、谷子、痛包和角色周边的用户
• 想把照片或透明 PNG 主体做成吧唧预览的人
• 想尝试移动端 3D UI、陀螺仪光影和 Three.js 效果的开发者
• 想研究 Expo Go 中 Three.js、GLB 模型和实时粒子效果的项目

技术栈

• Expo SDK 54
• React Native
• Three.js
• Expo GL / Expo Three
• Expo Image Picker
• Expo Sensors
• React Native View Shot

本地运行

安装依赖：

npm install

启动 Expo：

npx expo start --lan --port 8081 --clear

然后用 iPhone 上的 Expo Go 打开项目。

项目结构

.
├── App.js              # 应用界面、图片选择、裁剪、控制面板
├── BadgeModel3D.js     # Three.js 吧唧模型、闪片、反光和陀螺仪反馈
├── assets/
│   ├── badge-default.jpeg
│   └── models/2.glb
├── app.json
├── metro.config.js
└── package.json

说明

assets/models/2.glb 用作吧唧背面和五金结构参考。由于原模型的正面 UV 不适合动态贴图，项目使用自建的高细分正面和侧边模型来承载背景照片，以保证图案贴图稳定、圆形图案不被切断或拉扯。

许可证

仅供学习和个人实验使用。请确认你导入的图片、PNG 素材和 GLB 模型拥有相应使用权限。