提交您的产品 
Ai应用
Ai资讯
AI生图
AI生视频
FastbuildAI
iCraft Editor
iCraft Editor简介
iCraft Editor 是一款网页版 3D 架构图编辑工具，主打用三维空间展示复杂系统架构，帮开发者、架构师、产品经理等更直观地理解并沟通系统结构。相比传统 2D 图表，它的可视化效果更强，交互体验更好，是设计复杂系统的好帮手。
iCraft Editor核心功能
便捷的 3D 设计工具：iCraft Editor 提供丰富的 3D 模型库（包含服务器、数据库、网络设备等常用组件）和示例模板，支持 2D 图表一键转 3D，能帮用户快速开始设计。编辑器有网格自动吸附、元素自动堆叠功能，连线更方便，能节省大量设计时间。
沉浸式 3D 呈现：通过 3D 全景技术，用户可以自由旋转、缩放、拖拽模型，从不同角度查看架构细节；支持动画效果（比如管道流动、物体动态），能让设计理念更生动；子场景无缝切换功能能把复杂设计拆成多个层次（像前端、后端、基础设施），让信息展示更有条理。
数字孪生与实时同步：iCraft Editor 提供 Web 渲染组件（JavaScript SDK），能轻松嵌入网页应用，通过 SDK 控制 3D 元素状态（比如高亮异常节点）；支持实时数据同步，可以把系统里的服务器 CPU 使用率、网络流量等数据映射到 3D 架构图上，直观展示系统运行状态，方便快速发现异常。
强大的编辑与扩展能力：iCraft Editor支持导入 GLB、glTF、OBJ 等多种 3D 文件格式，用户可以上传自定义模型（比如企业 logo、专用设备），扩展设计资源；提供网格自动吸附、元素自动堆叠等功能，能提升绘图准确度和效率。
iCraft Editor使用场景
软件架构设计：帮架构师清晰展示系统各组件及相互关系，方便团队理解沟通。
系统部署维护：让运维人员直观了解服务器、网络设备等的部署和运行状态。
培训交流：通过生动的 3D 架构图和动画，让学员更容易理解复杂概念。
工业设计：适合工业设计师使用，提供精准 3D 建模工具。
电子商务：电商用户能创建吸引人的 3D 产品展示。
教育演示：教育工作者可以制作生动的 3D 教学材料。
iCraft Editor使用方法
在线使用
访问官网：直接打开 iCraft Editor 官网：https://icraft.design/，不用安装软件。
创建项目：在iCraft Editor官网新建项目或打开已有项目。
添加元素：用工具栏里的工具添加 3D 模型（比如服务器、网络设备）。
调整布局：通过拖拽、旋转操作调整元素位置和方向，还能设置大小、颜色等属性。
添加连接线：根据元素关系添加连接线，表示它们的连接。
添加文字说明：给元素添加文字，方便观众理解。
保存导出：设计完成后，可以保存到云端，也能导出为 .iplayer 文件，用于嵌入其他项目或离线查看。
本地使用
准备环境：确保系统安装了 Node.js 和 Git。
克隆项目：用命令 git clone https://github.com/gantFDT/icraft.git把项目下载到本地。
安装依赖：进入项目文件夹，运行 npm install安装所需依赖。
启动项目：在项目文件夹里运行 npm start启动项目，然后用浏览器打开 http://localhost:3000查看。
编辑保存：在本地编辑器里设计，完成后保存项目。
嵌套子场景的使用
进入子场景：选一个元素，点击悬浮工具条上的子场景按钮，进入该元素的子场景。
编辑子场景：在子场景里添加元素、调整位置、连线等，直到满足需求。
返回主场景：子场景编辑完成后，返回主场景继续调整整体架构图。
集成到其他项目
安装前端组件：如果要把 iCraft Editor 制作的 3D 场景嵌入 React 项目，运行命令 pnpm install @icraft/player-react --save安装组件库。
集成代码：在项目里用对应代码集成 3D 场景。
import { ICraftPlayer } from "@icraft/player-react";
export default function MyScene() {
return <ICraftPlayer src='your-scene.iplayer' />;
}其中 your-scene.iplayer 是从 iCraft Editor 中导出的 3D 场景文件。
iCraft Editor项目地址：https://github.com/gantFDT/icraft
