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