战斗陀螺 3D 设计器-平芜编程栈

「17-战斗陀螺 3D 设计器」
/~12b63Zsh8F~:/
链接：https://pan.quark.cn/s/899f07cb4fc9

SPIN/CORE AI LAB
一套可直接运行的战斗陀螺 3D 设计器。项目基于 React、Three.js、React Three Fiber 与 Vite 构建，所有陀螺零件均由程序化几何体实时生成，不需要额外下载模型素材。
启动
npm install npm run dev
生产构建：
npm run build npm run preview
主要功能
交互式 3D 陀螺：拖动旋转视角、滚轮缩放、自动旋转、视角重置
程序化零件：5 种刃盘、4 种棘轮、4 种轴尖，不同零件拥有不同几何结构
爆炸分解视图：观察 Blade、Ratchet、Bit 的装配关系
CORE AI 设计生成：识别攻击、防御、持久、平衡策略和颜色关键词
零件锁定：AI 重组时保留指定零件
动态属性：攻击、防御、持久、速度、总重、战力、评级和理论转速实时计算
RPM 仿真：带加速曲线、实时读数和能量环视觉效果
材质配色：六组能量色板实时切换
本地保存：使用浏览器本地存储保存当前设计
DNA 导出：将完整零件数据与计算属性导出为 JSON
响应式布局：适配桌面、平板和手机屏幕
目录
src/ ├── components/ # 3D 查看器、AI、零件与属性 UI ├── data/parts.js # 零件 DNA 数据库 ├── engine/ # 属性计算与方案生成算法 ├── App.jsx # 应用状态与功能编排 ├── main.jsx └── style.css # 完整界面与响应式样式

SPIN/CORE AI LAB —— AI驱动的模块化机械陀螺制造平台
类似：
《Beyblade X》零件组合
《Armored Core》机体编辑
Tesla 车辆配置器
Blender 参数化建模
科幻工业 CAD 软件
第二版功能规划
1. 真正模块化 3D 系统
现在：
一个模型
升级：
CORE | ┌────────────┐ │ BLADE │ │ 攻击环 │ └────────────┘ | ┌────────────┐ │ RATCHET │ │ 齿轮系统 │ └────────────┘ | ┌────────────┐ │ BIT │ │ 尖端 │ └────────────┘
每个零件独立：
blade/ ├── blade_001.glb ├── blade_002.glb ├── blade_attack.glb ratchet/ ├── ratchet_low.glb ├── ratchet_high.glb bit/ ├── bit_balance.glb ├── bit_attack.glb
然后：
BLADE + RATCHET + BIT = 新陀螺
2. 增加 AI 自动设计系统
加入一个 AI 面板：
例如输入：
我要一个高速攻击型陀螺 特点: - 高爆发 - 轻量 - 粉色能量核心 - 未来机械风
AI输出：
NAME: MX-709 PHANTOM TYPE: ATTACK BLADE: Wing-8 Titanium RATCHET: Low Gear V3 BIT: Needle Pro 攻击: 96 防御: 42 持久: 61 重量: 38.5g
然后自动替换3D模型。
3. 加入真实参数系统
每个零件拥有 DNA：
{ "id":"blade_09", "name":"PHANTOM WING", "type":"attack", "weight":12, "attack":90, "defense":40, "speed":95, "material": "titanium alloy", "color": "pink neon" }
组合后计算：
attack = blade.attack + bit.speed*0.3 defense = ratchet.defense + blade.weight*0.5 stamina = core.energy + bit.balance
最后生成：
雷达图：
ATTACK ▲ | DEF ◀───────▶ SPEED | ▼ STAMINA
4. UI升级成你截图级别
现在：
普通网页
升级：
顶部
┌───────────────────────┐ SPIN/CORE AI MECHANICAL LAB PHASE 01 FPS 120 └───────────────────────┘
左侧
SELECTED MX-701/TX CLASS ATTACK CORE STATUS ████████ 92%
右侧
机械按钮：
☾ NIGHT ✦ SCAN ↻ ROTATE ⛶ FULL
底部
变成游戏装备栏：
01 BLADE 02 RATCHET 03 BIT ┌─────┐ ┌─────┐ ┌─────┐ 攻击环1 攻击环2 防御环3
5. 加入零件随机生成算法
比如：
function generateBey(){ let blade=random(blades) let ratchet=random(ratchets) let bit=random(bits) return { blade, ratchet, bit, name: generateName() } }
名字生成：
词库：
const name1=[ "PHANTOM", "VOID", "NEON", "CYBER", "OMEGA" ] const name2=[ "WING", "DRAGON", "CORE", "FANG" ]
随机：
NEON FANG VOID CORE OMEGA WING
6. 增加材质系统
Three.js Shader：
金属
metalness:1 roughness:0.2
能量核心
加入：
Bloom Glow Fresnel Shader
效果：
中心：
蓝色能量旋转
7. 增加拆解动画
点击：
拆解
动画：
Blade ↑ Ratchet ↓ Bit ↓
类似机械维修。
Three.js：
gsap.to( blade.position, { y:2, duration:1 } )
8. 加入旋转测试模式
按钮：
TEST SPIN
启动：
陀螺高速旋转：
rotationSpeed +=0.5
显示：
RPM 32000 Balance 92% Impact 87%
9. 增加 AI 生成概念图
流程：
用户描述 ↓ AI生成概念设计图 ↓ 识别颜色/结构 ↓ 匹配零件 ↓ 生成3D组合
例如：
输入：
赛博龙型攻击陀螺
生成：
Dragon Blade Red Energy Core Sharp Fang Bit
10. 项目最终技术栈
Frontend React + Three.js + React Three Fiber + Tailwind 3D Blender + GLB + Shader Animation GSAP AI OpenAI API + Vision Storage MongoDB

SPIN/COREAILAB是一款基于Web技术的3D战斗陀螺设计平台，采用React、Three.js和Vite构建。核心特点包括：1）程序化生成的5类陀螺零件（刃盘/棘轮/轴尖）可自由组合；2）AI辅助设计系统，根据策略类型自动推荐零件组合；3）动态属性计算系统，实时显示攻击/防御等战斗数值；4）交互式3D查看器支持爆炸视图、RPM转速模拟等功能；5）响应式设计适配多端设备。项目采用模块化架构，未来计划扩展零件库、增强AI设计能力，并加入材质系统与拆解动画等特性，打造集工业设计、参数化建模与游戏化体验于