CAD-Viewer：面向未来的高性能纯浏览器 DWG/DXF 查看器

在这个一切都往云上搬的时代，设计类应用也在快速告别笨重的本地软件。然而，CAD —— 尤其是 AutoCAD 的 DWG 和 DXF 文件查看 —— 却像是最后的顽固堡垒，大多数 CAD 查看器仍然依赖庞大的桌面应用、后台服务器渲染，或者牺牲性能和隐私。 「那有没有可能，我们直接在浏览器里流畅查看和操作 DWG/DXF 文件？无需安装，无需联网，全离线支持？」 答案是： 「有！」 欢迎认识 「CAD-Viewer」 —— 一款高性能、可扩展、以隐私为核心的 Web CAD 查看器。它完全基于 WebAssembly 和 WebGL，在浏览器中本地运行，不依赖任何后端。无论你是在构建专业工程平台，还是想把 CAD 能力集成进 CMS，又或者只是想离线安全查看图纸，CAD-Viewer 都能帮你轻松实现。

为什么“浏览器里的 CAD”是趋势？

传统 CAD 软件固然强大，但它们又贵又大，只能装在电脑上，更新慢，还经常卡顿。过去，无论工程师还是设计师，只是为了 「“看一眼图纸”」 ，都不得不安装庞大的软件，或者接入后台渲染服务。 而 CAD-Viewer 彻底颠覆了这种方式。它在浏览器中直接加载、解析、渲染 DWG 和 DXF 文件，特点包括：

• 「无需服务器支持」
• 「文件不上传，隐私不外泄」
• 「无需安装插件或软件」
• 「支持静态网站部署（如 GitHub Pages 或 Vercel）」

这种全新模式为很多应用场景打开了大门：

• 注重隐私的行业（国防、政府、大型企业）
• 离线工作场景（建筑工地、现场巡检）
• 轻量平台嵌入（CMS、SaaS、Web门户）
• 自定义 CAD 应用（教育、仿真、设计审阅）

架构一览：模块化、可扩展的未来引擎

CAD-Viewer 的背后是一套高度模块化、可扩展的架构，层层解耦，职责清晰，从文件解析、数据建模、图形渲染，到 UI 交互，都有各自的模块负责。

数据模型核心： @mlightcad/data-model

CAD-Viewer 的“心脏”是基于开源项目 「realdwg-web」 构建的内存数据库，灵感来自 AutoCAD 的 ObjectARX 接口，提供一整套 CAD 数据结构：

• 类似 AcDbLine 、 AcDbCircle 等实体类，组织清晰
• 支持模型空间与布局空间的组织与遍历
• 为 DWG/DXF 解析器提供统一的数据写入接口，屏蔽底层复杂的二进制处理

简而言之，它是浏览器里的“迷你 AutoCAD 数据库”。

文件解析器： @mlightcad/libredwg-converter

DWG 和 DXF 是著名的复杂文件格式。CAD-Viewer 使用 C++ 编写、编译为 WebAssembly 的 libredwg-web 引擎 ，在浏览器中直接解析 DWG 格式，无需服务器介入：

• 客户端解析 DWG 内容。
• 自动构建内存数据库结构
• 插件式设计，未来可支持 SVG 等其他格式

真正实现了文件“即拖即看，离线也能飞”。 注：对于 DXF 文件， 「realdwg-web」 已经内置了一个解析器，所以无需额外的插件。

WebGL 渲染层： @mlightcad/three-renderer

有了数据，就要看图。CAD-Viewer 使用 Three.js 将 CAD 实体转为高性能 WebGL 图形，实现流畅的三维交互。目前的渲染层架构并不强绑定于 Three.js ，只要你实现了 realdwg-web 中定义的 graphic interface 接口 ，你也可以使用其它渲染引擎（例如：Babylon.js）来渲染数据。

• 把 CAD 实体（线、圆、文字、填充等）转为 Three.js Line 或 Mesh
• 支持 GPU 加速渲染、大图纸分批绘制、材质缓存
• 提供缩放、平移、图层控制、对象显示隐藏等交互功能

这一层彻底解耦数据与显示，开发者可以自由定制 UI。

应用层： @mlightcad/cad-viewer 与 @mlightcad/cad-simple-viewer

针对不同需求，CAD-Viewer 提供两种用法：

@mlightcad/cad-viewer : Vue 3 组件

• ✅ 自带工具栏、状态管理和样式
• ✅ 即插即用，适合 Vue 项目
• ✅ 适合拿来即用，不做UI定制的场景

@mlightcad/cad-simple-viewer : 无 UI 内核

• ✅ 没有任何 UI 依赖
• ✅ 提供底层渲染钩子和控制命令
• ✅ 可嵌入 React、Angular、原生 JS 应用或自定义框架，适合于想做自定义UI的场景

性能爆表，复杂图纸也能秒开

很多人可能以为：“浏览器渲染 DWG？是不是只能跑个小玩具图纸？” 「错！」 CAD-Viewer 做了多种性能优化，确保你打开的是“真实工程图”也能稳稳运行：

• WebGL 批渲染和实例化，减少绘制调用
• GPU 着色器优化，矢量图形清晰锐利
• 图层与空间索引控制，提高渲染效率
• 材质缓存，重复元素不重复处理

结果就是： 「复杂图纸，流畅渲染，60+ FPS 根本不是问题。」

开发者友好，轻松扩展

CAD-Viewer 是为开发者打造的工具，架构模块化，文档清晰，易于定制和二次开发：

• 简洁命令与事件 API
• ES 模块可 tree-shaking
• UI 和交互可挂钩扩展
• 文件加载器可配置（支持 DWG、DXF，未来支持 SVG）
• 插件机制支持功能扩展

不论是想做协同审图平台、教育类模拟应用，还是嵌入 ERP 的图纸组件，CAD-Viewer 都能满足你的场景。

隐私为先，绝不上传图纸

很多行业对图纸数据极度敏感，云端传输是不被允许的。CAD-Viewer 的“全前端设计”恰好解决了这一问题：

• 文件绝不上传服务器
• 离线运行无障碍（哪怕在飞机上）
• 可部署为静态网站，无需后端或数据库
• 拖拽本地文件立即查看，无需任何上传操作

这使它成为：

• 工地巡检等 「离线工具」
• 内网环境部署的 「高安全工具」
• 满足 GDPR 的 「合规产品」
• 强调隐私保护的 「SaaS 平台」 的理想选择

未来规划：走向完整 Web CAD 生态

CAD-Viewer 正在快速迭代，未来的功能图景非常令人期待： ✅ 已实现：

• DWG/DXF 文件解析
• WebGL 高性能渲染
• 图层控制、缩放、平移
• Vue 3 UI 组件
• 无 UI 模式 API

🔜 即将上线：

• SVG 导出
• 块编辑与捕捉
• 微信小程序支持
• 高级批注工具

🌟 未来展望：

• 浏览器内完整 CAD 编辑器
• WebRTC/CRDT 协同编辑
• 集成 CMS（如 Notion、WordPress）
• 支持地图图层（OpenLayers/Leaflet）
• 轻量化 BIM 支持

📦 如何安装与使用

「Vue 3 项目：」
👉 cad-viewer 使用文档： https://github.com/mlight-lee/cad-viewer/blob/main/packages/cad-viewer/README.md 「框架无关场景：」
👉 cad-simple-viewer 使用文档：https://github.com/mlight-lee/cad-viewer/blob/main/packages/cad-simple-viewer/README.md

开源，MIT 许可，欢迎参与！

CAD-Viewer 在 GitHub 上完全开源，使用的是宽松的 MIT 协议：

• ✅ 可自由用于商业或私有项目
• ✅ 欢迎 Fork、定制或改进
• ✅ 欢迎贡献功能、修复或插件

最后的话

CAD 的未来正在悄然发生转变，CAD-Viewer 正站在这场变革的前沿。它用纯前端架构、GPU 加速渲染和灵活的模块化设计，重新定义了 CAD 的呈现方式。 如果你正在构建现代 CAD 工具、注重隐私的平台，或者只是想找一个 「到处都能用的 DWG 查看器」 ，CAD-Viewer 值得你加入工具箱！

AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding

点 击 " 阅 读 原 文 " 了 解 详 情 ~