战斗陀螺 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设计能力，并加入材质系统与拆解动画等特性，打造集工业设计、参数化建模与游戏化体验于