战斗陀螺 3D 设计器

「17-战斗陀螺 3D 设计器」/~12b63Zsh8F~:/链接https://pan.quark.cn/s/899f07cb4fc9SPIN/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 | ▼ STAMINA4. 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 防御环35. 加入零件随机生成算法比如function generateBey(){ let bladerandom(blades) let ratchetrandom(ratchets) let bitrandom(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 WING6. 增加材质系统Three.js Shader金属metalness:1 roughness:0.2能量核心加入Bloom Glow Fresnel Shader效果中心蓝色能量旋转7. 增加拆解动画点击拆解动画Blade ↑ Ratchet ↓ Bit ↓类似机械维修。Three.jsgsap.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 Bit10. 项目最终技术栈Frontend React Three.js React Three Fiber Tailwind 3D Blender GLB Shader Animation GSAP AI OpenAI API Vision Storage MongoDBSPIN/COREAILAB是一款基于Web技术的3D战斗陀螺设计平台采用React、Three.js和Vite构建。核心特点包括1程序化生成的5类陀螺零件刃盘/棘轮/轴尖可自由组合2AI辅助设计系统根据策略类型自动推荐零件组合3动态属性计算系统实时显示攻击/防御等战斗数值4交互式3D查看器支持爆炸视图、RPM转速模拟等功能5响应式设计适配多端设备。项目采用模块化架构未来计划扩展零件库、增强AI设计能力并加入材质系统与拆解动画等特性打造集工业设计、参数化建模与游戏化体验于