提交您的產(chǎn)品 
Ai應(yīng)用
Ai資訊
AI生圖
AI生視頻
開源AI應(yīng)用平臺
iCraft Editor
iCraft Editor簡介
iCraft Editor 是一款網(wǎng)頁版 3D 架構(gòu)圖編輯工具，主打用三維空間展示復(fù)雜系統(tǒng)架構(gòu)，幫開發(fā)者、架構(gòu)師、產(chǎn)品經(jīng)理等更直觀地理解并溝通系統(tǒng)結(jié)構(gòu)。相比傳統(tǒng) 2D 圖表，它的可視化效果更強，交互體驗更好，是設(shè)計復(fù)雜系統(tǒng)的好幫手。
iCraft Editor核心功能
便捷的 3D 設(shè)計工具：iCraft Editor 提供豐富的 3D 模型庫（包含服務(wù)器、數(shù)據(jù)庫、網(wǎng)絡(luò)設(shè)備等常用組件）和示例模板，支持 2D 圖表一鍵轉(zhuǎn) 3D，能幫用戶快速開始設(shè)計。編輯器有網(wǎng)格自動吸附、元素自動堆疊功能，連線更方便，能節(jié)省大量設(shè)計時間。
沉浸式 3D 呈現(xiàn)：通過 3D 全景技術(shù)，用戶可以自由旋轉(zhuǎn)、縮放、拖拽模型，從不同角度查看架構(gòu)細節(jié)；支持動畫效果（比如管道流動、物體動態(tài)），能讓設(shè)計理念更生動；子場景無縫切換功能能把復(fù)雜設(shè)計拆成多個層次（像前端、后端、基礎(chǔ)設(shè)施），讓信息展示更有條理。
數(shù)字孿生與實時同步：iCraft Editor 提供 Web 渲染組件（JavaScript SDK），能輕松嵌入網(wǎng)頁應(yīng)用，通過 SDK 控制 3D 元素狀態(tài)（比如高亮異常節(jié)點）；支持實時數(shù)據(jù)同步，可以把系統(tǒng)里的服務(wù)器 CPU 使用率、網(wǎng)絡(luò)流量等數(shù)據(jù)映射到 3D 架構(gòu)圖上，直觀展示系統(tǒng)運行狀態(tài)，方便快速發(fā)現(xiàn)異常。
強大的編輯與擴展能力：iCraft Editor支持導(dǎo)入 GLB、glTF、OBJ 等多種 3D 文件格式，用戶可以上傳自定義模型（比如企業(yè) logo、專用設(shè)備），擴展設(shè)計資源；提供網(wǎng)格自動吸附、元素自動堆疊等功能，能提升繪圖準確度和效率。
iCraft Editor使用場景
軟件架構(gòu)設(shè)計：幫架構(gòu)師清晰展示系統(tǒng)各組件及相互關(guān)系，方便團隊理解溝通。
系統(tǒng)部署維護：讓運維人員直觀了解服務(wù)器、網(wǎng)絡(luò)設(shè)備等的部署和運行狀態(tài)。
培訓(xùn)交流：通過生動的 3D 架構(gòu)圖和動畫，讓學(xué)員更容易理解復(fù)雜概念。
工業(yè)設(shè)計：適合工業(yè)設(shè)計師使用，提供精準 3D 建模工具。
電子商務(wù)：電商用戶能創(chuàng)建吸引人的 3D 產(chǎn)品展示。
教育演示：教育工作者可以制作生動的 3D 教學(xué)材料。
iCraft Editor使用方法
在線使用
訪問官網(wǎng)：直接打開 iCraft Editor 官網(wǎng)：https://icraft.design/，不用安裝軟件。
創(chuàng)建項目：在iCraft Editor官網(wǎng)新建項目或打開已有項目。
添加元素：用工具欄里的工具添加 3D 模型（比如服務(wù)器、網(wǎng)絡(luò)設(shè)備）。
調(diào)整布局：通過拖拽、旋轉(zhuǎn)操作調(diào)整元素位置和方向，還能設(shè)置大小、顏色等屬性。
添加連接線：根據(jù)元素關(guān)系添加連接線，表示它們的連接。
添加文字說明：給元素添加文字，方便觀眾理解。
保存導(dǎo)出：設(shè)計完成后，可以保存到云端，也能導(dǎo)出為 .iplayer 文件，用于嵌入其他項目或離線查看。
本地使用
準備環(huán)境：確保系統(tǒng)安裝了 Node.js 和 Git。
克隆項目：用命令 git clone https://github.com/gantFDT/icraft.git把項目下載到本地。
安裝依賴：進入項目文件夾，運行 npm install安裝所需依賴。
啟動項目：在項目文件夾里運行 npm start啟動項目，然后用瀏覽器打開 http://localhost:3000查看。
編輯保存：在本地編輯器里設(shè)計，完成后保存項目。
嵌套子場景的使用
進入子場景：選一個元素，點擊懸浮工具條上的子場景按鈕，進入該元素的子場景。
編輯子場景：在子場景里添加元素、調(diào)整位置、連線等，直到滿足需求。
返回主場景：子場景編輯完成后，返回主場景繼續(xù)調(diào)整整體架構(gòu)圖。
集成到其他項目
安裝前端組件：如果要把 iCraft Editor 制作的 3D 場景嵌入 React 項目，運行命令 pnpm install @icraft/player-react --save安裝組件庫。
集成代碼：在項目里用對應(yīng)代碼集成 3D 場景。
import { ICraftPlayer } from "@icraft/player-react";
export default function MyScene() {
return <ICraftPlayer src='your-scene.iplayer' />;
}其中 your-scene.iplayer 是從 iCraft Editor 中導(dǎo)出的 3D 場景文件。
iCraft Editor項目地址：https://github.com/gantFDT/icraft
