魔云盒 是一款基于 WebGL 2 技术的在线 3D 产品包装设计平台。它集成了 AI 辅助设计、实时 3D 预览、UV 贴图编辑 等核心能力，为产品包装设计师提供无需安装软件、打开浏览器即可使用的完整设计工作流。
🔗 官方网站：editor.moyunhe.com/home
主界面截图：
UV图编辑工具截图：
一、平台概览
魔云盒覆盖了从模板选择、3D 模型编辑、包装图案设计到AI 辅助创作的全流程。
1.1 核心定位
- 目标用户：面向产品包装设计师的轻量级在线 3D 工具。
- 支持品类：包装盒、瓶型标签、服装外观、瓷器表面等多品类。
- 核心价值：AI 驱动降低设计门槛，实时 3D 预览实现“所见即所得”。
1.2 技术架构
- 前端：React + 自研 WebGL 3D 引擎 (基于 BabylonJS)。
- 后端：Express 5 + Prisma ORM + MySQL。
- AI 引擎：深度集成 Google Gemini 多模态模型。
1.3 演示视频
- 🎬 包装和设计案例视频
- 🤖 AI 设计图提取功能演示
- 🚀 工具整体介绍视频
(此处可插入主界面与图层编辑界面的截图)
二、首页与导航
2.1 模板中心
设计流程的主要入口，提供丰富的分类模板：
- 分类浏览：支持按包装盒、瓶型、服装、瓷器等品类筛选。
- 模板卡片：展示缩略图、名称及使用热度，点击即可一键创建设计。
- 自由创作：提供空白场景，支持从零导入模型开始设计。
2.2 资源广场
社区化的公开作品展示区：
- 作品浏览：支持分类筛选、排序（最新/最热）及分页加载。
- 互动功能：查看统计数据、收藏作品、在线预览。
- 一键复用：支持基于公开作品克隆，快速开启二次创作。
2.3 我的设计
个人云端工作台：
- 设计管理：查看所有个人设计，支持按分类和可见性筛选。
- 收藏夹：统一管理收藏的模板与优秀作品。
三、3D 编辑器核心功能
编辑器是魔云盒的核心，提供专业级的 3D 场景编辑能力。
3.1 界面布局
- 3D 画布：居中显示 (16:9)，支持旋转、缩放、平移交互。
- 左侧边栏：素材库、图层管理入口。
- 右侧属性面板：动态显示当前选中对象的详细参数。
- 顶部/底部：文件操作菜单、变换工具、基础体创建及撤销重做。
3.2 模型操作
模型导入
- 支持格式：GLB, GLTF, FBX, OBJ, STL, 3DS, 3DM 等主流格式。
- 导入方式：拖拽上传、文件选择、URL 导入。
- 整包还原：支持导入 .zip 包，自动还原模型、AI 配置及环境球。
- 自动转换：非 GLB 格式自动转换为 GLB 以确保兼容性。
变换与创建
- 变换工具：支持沿 XYZ 轴的平移、旋转、等比/自由缩放及删除。
- 基础几何体：内置空节点、球体、立方体、圆柱、圆锥、胶囊、圆环、平面等快速创建工具。
3.3 场景环境设置
灯光系统
- 支持亮度 (0-1)、阴影深度、漫反射颜色调节。
- 可视化角度/高度调节画布，支持 0-360° 全方位布光。
环境球 (HDRI)
- 公共库：预设多种 HDRI 环境贴图，一键切换氛围。
- 自定义：支持上传 HDR/ENV/BASIS/DDS 格式 (最大 50MB)，支持重命名与管理。
后处理管线
- 光影增强：泛光 (Bloom)、SSAO (屏幕空间环境光遮蔽)。
- 色彩控制：色差、色彩分级、色彩校正 (亮度/饱和度/对比度)。
- 画质优化：TAA 动态抗锯齿、暗角 (Vignette) 效果。
3.4 背景系统
- 纯色/渐变：支持任意纯色、线性/径向渐变，内置 20+ 精选渐变预设。
- 图片背景：50+ 公共背景库，支持上传自定义 JPG/PNG/WebP (最大 50MB)。
- AI 生成：输入文字描述，自动生成匹配的产品场景背景。
3.5 专业地面系统
提供三层独立地面效果，可自由组合：
- 地面阴影：渲染产品投影，支持透明地面与自定义阴影颜色。
- 地面网格：辅助定位，支持自定义颜色、密度、渐隐效果及抗锯齿。
- 地面反射：模拟镜面倒影，可调反射强度、衰减距离及模糊程度 (磨砂效果)。
3.6 PBR 材质系统
基于物理的渲染 (PBR) 引擎，模拟真实世界材质：
基础属性
- 反照率 (Albedo)、金属度、粗糙度、法线贴图、自发光、环境遮蔽 (AO)。
- 所有属性均支持贴图映射及 Alpha 通道提取。
高级光学特性
- 透明与折射：支持四种透明模式、多种混合算法及物理折射 (IOR 0-10)。
- 清漆层 (Clear Coat) ：模拟车漆、指甲油，独立控制涂层强度、粗糙度及着色。
- 光泽层 (Sheen) ：模拟天鹅绒、丝绸的边缘光泽效果。
- 镭射/虹彩：模拟全息膜、镭射纸，支持色相偏移、波长调节及闪片叠加。
- 其他特效：各向异性反射 (拉丝金属)、次表面散射 (SSS)、位移贴图、线框模式。
贴图通用控制
- 支持 UV 通道选择 (0-3)、偏移/缩放/旋转、包裹模式 (钳位/镜像/重复) 及 Gamma 空间切换。
材质库
- 内置公共材质库，支持用户上传自定义材质包 (.zip)，支持文件夹分类与缩略图预览。
3.7 保存与导出
- 云端保存：自动版本管理，保存为 .rain 格式。
- 高清截图：支持高分辨率截图下载或复制至剪贴板。
- 安全机制：离开页面前自动检测未保存更改并提示。
四、包装图案编辑器 (UV 编辑器)
特色功能，支持在 3D 模型表面直接进行 2D 图案编辑，结果实时映射。
4.1 图层系统
类 Photoshop 的操作体验：
- 文字图层：支持字体、大小、颜色、对齐、旋转及字间距调整。
- 形状图层：矩形 (含圆角)、圆形、多边形、直线/贝塞尔曲线，支持填充与描边。
- 图片/SVG 图层：支持光栅图片与矢量图形导入，无损缩放。
- 工艺图层：特殊的纹理叠加与工艺效果。
4.2 交互与辅助
- 图层管理：拖拽排序、可见性切换、锁定保护。
- 智能对齐：拖拽时自动吸附对齐辅助线。
- 画布操作：自由缩放平移，支持背景色设置及光栅化导出 (PNG/JPG)。
五、AI 智能设计集成
深度集成 Google Gemini 多模态模型，赋能设计全流程：
- 🎨 AI 图案生成：输入文字描述，自动生成创意包装图案。
- 🌄 AI 背景生成：根据产品特征与描述，智能生成匹配的场景背景。
- ✂️ 图案提取：从复杂的设计图中自动提取核心图案元素。
六、设计管理与协作
6.1 生命周期管理
- 创建：自动生成唯一 Design ID。
- 编辑：3D 与 UV 双编辑器无缝切换。
- 版本：云端自动保存，版本号递增，记录文件大小。
- 分享：生成专属链接，支持他人查看预览。
6.2 权限与缓存
- 可见性控制：支持“私有” (仅自己可见) 与“公开” (资源广场展示)。
- CDN 加速：版本号作为 URL 参数，强制刷新 CDN 缓存，确保加载最新版本。
七、模板系统
- 模板库：按品类分类，展示缩略图与使用数据。
- 一键复用：基于模板创建时，自动继承模型、贴图、环境球等全套配置。
- 收藏与管理：用户可收藏常用模板；管理员具备完整的模板 CRUD 及上下架权限。
欢迎加入微信群一起交流AI应用
欢迎加入我的知识星球，后续关于整个设计工具的核心技术实现也会在知识星球一一讲解
