在這個一切都往云上搬的時代，設(shè)計類應(yīng)用也在快速告別笨重的本地軟件。然而，CAD —— 尤其是 AutoCAD 的 DWG 和 DXF 文件查看 —— 卻像是最后的頑固堡壘，大多數(shù) CAD 查看器仍然依賴龐大的桌面應(yīng)用、后臺服務(wù)器渲染，或者犧牲性能和隱私。

那有沒有可能，我們直接在瀏覽器里流暢查看和操作 DWG/DXF 文件？無需安裝，無需聯(lián)網(wǎng)，全離線支持？

答案是：有！

歡迎認識 CAD-Viewer —— 一款高性能、可擴展、以隱私為核心的 Web CAD 查看器。它完全基于 WebAssembly 和 WebGL，在瀏覽器中本地運行，不依賴任何后端。無論你是在構(gòu)建專業(yè)工程平臺，還是想把 CAD 能力集成進 CMS，又或者只是想離線安全查看圖紙，CAD-Viewer 都能幫你輕松實現(xiàn)。

為什么“瀏覽器里的 CAD”是趨勢？

傳統(tǒng) CAD 軟件固然強大，但它們又貴又大，只能裝在電腦上，更新慢，還經(jīng)常卡頓。過去，無論工程師還是設(shè)計師，只是為了**“看一眼圖紙”**，都不得不安裝龐大的軟件，或者接入后臺渲染服務(wù)。

而 CAD-Viewer 徹底顛覆了這種方式。它在瀏覽器中直接加載、解析、渲染 DWG 和 DXF 文件，特點包括：

• 無需服務(wù)器支持
• 文件不上傳，隱私不外泄
• 無需安裝插件或軟件
• 支持靜態(tài)網(wǎng)站部署（如 GitHub Pages 或 Vercel）

這種全新模式為很多應(yīng)用場景打開了大門：

• 注重隱私的行業(yè)（國防、政府、大型企業(yè)）
• 離線工作場景（建筑工地、現(xiàn)場巡檢）
• 輕量平臺嵌入（CMS、SaaS、Web門戶）
• 自定義 CAD 應(yīng)用（教育、仿真、設(shè)計審閱）

架構(gòu)一覽：模塊化、可擴展的未來引擎

CAD-Viewer 的背后是一套高度模塊化、可擴展的架構(gòu)，層層解耦，職責(zé)清晰，從文件解析、數(shù)據(jù)建模、圖形渲染，到 UI 交互，都有各自的模塊負責(zé)。

數(shù)據(jù)模型核心：@mlightcad/data-model

CAD-Viewer 的“心臟”是基于開源項目 realdwg-web? 構(gòu)建的內(nèi)存數(shù)據(jù)庫，靈感來自 AutoCAD 的 ObjectARX 接口，提供一整套 CAD 數(shù)據(jù)結(jié)構(gòu)：

• 類似 AcDbLine、AcDbCircle 等實體類，組織清晰
• 支持模型空間與布局空間的組織與遍歷
• 為 DWG/DXF 解析器提供統(tǒng)一的數(shù)據(jù)寫入接口，屏蔽底層復(fù)雜的二進制處理

簡而言之，它是瀏覽器里的“迷你 AutoCAD 數(shù)據(jù)庫”。

文件解析器：libdxfrw-converter

DWG 和 DXF 是著名的復(fù)雜文件格式。CAD-Viewer 使用 C++ 編寫、編譯為 WebAssembly 的 libdxfrw 引擎，在瀏覽器中直接解析這些格式，無需服務(wù)器介入：

• 客戶端解析 DWG/DXF 內(nèi)容
• 自動構(gòu)建內(nèi)存數(shù)據(jù)庫結(jié)構(gòu)
• 插件式設(shè)計，未來可支持 SVG 等其他格式

真正實現(xiàn)了文件“即拖即看，離線也能飛”。

WebGL 渲染層：three-renderer

有了數(shù)據(jù)，就要看圖。CAD-Viewer 使用 Three.js 將 CAD 實體轉(zhuǎn)為高性能 WebGL 圖形，實現(xiàn)流暢的三維交互：

• 把 CAD 實體（線、圓、文字、填充等）轉(zhuǎn)為 Three.js Mesh
• 支持 GPU 加速渲染、大圖紙分批繪制、材質(zhì)緩存
• 提供縮放、平移、圖層控制、對象顯示隱藏等交互功能

這一層徹底解耦數(shù)據(jù)與顯示，開發(fā)者可以自由定制 UI。

應(yīng)用層：cad-viewer 與 cad-simple-viewer

針對不同需求，CAD-Viewer 提供兩種用法：

cad-viewer: Vue 3 組件

• ? 自帶工具欄、狀態(tài)管理和樣式
• ? 即插即用，適合 Vue 項目
• ? 適合快速搭建儀表盤、后臺界面

cad-simple-viewer: 無 UI 內(nèi)核

• ? 沒有任何 UI 依賴
• ? 提供底層渲染鉤子和控制命令
• ? 可嵌入 React、Angular、原生 JS 應(yīng)用或自定義框架

性能爆表，復(fù)雜圖紙也能秒開

很多人可能以為：“瀏覽器渲染 DWG？是不是只能跑個小玩具圖紙？”

錯！

CAD-Viewer 做了多種性能優(yōu)化，確保你打開的是“真實工程圖”也能穩(wěn)穩(wěn)運行：

• WebGL 批渲染和實例化，減少繪制調(diào)用
• GPU 著色器優(yōu)化，矢量圖形清晰銳利
• 圖層與空間索引控制，提高渲染效率
• 材質(zhì)緩存，重復(fù)元素不重復(fù)處理

結(jié)果就是：復(fù)雜圖紙，流暢渲染，60+ FPS 根本不是問題。

開發(fā)者友好，輕松擴展

CAD-Viewer 是為開發(fā)者打造的工具，架構(gòu)模塊化，文檔清晰，易于定制和二次開發(fā)：

• 簡潔命令與事件 API
• ES 模塊可 tree-shaking
• UI 和交互可掛鉤擴展
• 文件加載器可配置（支持 DWG、DXF，未來支持 SVG）
• 插件機制支持功能擴展

不論是想做協(xié)同審圖平臺、教育類模擬應(yīng)用，還是嵌入 ERP 的圖紙組件，CAD-Viewer 都能滿足你的場景。

隱私為先，絕不上傳圖紙

很多行業(yè)對圖紙數(shù)據(jù)極度敏感，云端傳輸是不被允許的。CAD-Viewer 的“全前端設(shè)計”恰好解決了這一問題：

• 文件絕不上傳服務(wù)器
• 離線運行無障礙（哪怕在飛機上）
• 可部署為靜態(tài)網(wǎng)站，無需后端或數(shù)據(jù)庫
• 拖拽本地文件立即查看，無需任何上傳操作

這使它成為：

• 工地巡檢等離線工具
• 內(nèi)網(wǎng)環(huán)境部署的高安全工具
• 滿足 GDPR 的合規(guī)產(chǎn)品
• 強調(diào)隱私保護的SaaS 平臺的理想選擇

未來規(guī)劃：走向完整 Web CAD 生態(tài)

CAD-Viewer 正在快速迭代，未來的功能圖景非常令人期待：

? 已實現(xiàn)：

• DWG/DXF 文件解析
• WebGL 高性能渲染
• 圖層控制、縮放、平移
• Vue 3 UI 組件
• 無 UI 模式 API

?? 即將上線：

• SVG 導(dǎo)出
• 塊編輯與捕捉
• 微信小程序支持
• 高級批注工具

?? 未來展望：

• 瀏覽器內(nèi)完整 CAD 編輯器
• WebRTC/CRDT 協(xié)同編輯
• 集成 CMS（如 Notion、WordPress）
• 支持地圖圖層（OpenLayers/Leaflet）
• 輕量化 BIM 支持

?? 如何安裝與使用

Vue 3 項目：
?? cad-viewer 使用文檔

框架無關(guān)場景：
?? cad-simple-viewer 使用文檔

開源，MIT 許可，歡迎參與！

CAD-Viewer 在 GitHub 上完全開源，使用的是寬松的 MIT 協(xié)議：

• ? 可自由用于商業(yè)或私有項目
• ? 歡迎 Fork、定制或改進
• ? 歡迎貢獻功能、修復(fù)或插件

如果你也相信 CAD 的未來屬于 Web，不妨加入我們！

GitHub 項目地址：?? https://github.com/mlight-lee/cad-viewer

最后的話

CAD 的未來正在悄然發(fā)生轉(zhuǎn)變，CAD-Viewer 正站在這場變革的前沿。它用純前端架構(gòu)、GPU 加速渲染和靈活的模塊化設(shè)計，重新定義了 CAD 的呈現(xiàn)方式。

如果你正在構(gòu)建現(xiàn)代 CAD 工具、注重隱私的平臺，或者只是想找一個到處都能用的 DWG 查看器，CAD-Viewer 值得你加入工具箱！

轉(zhuǎn)自https://juejin.cn/post/7535734834464833588