在这个一切都往云上搬的时代，设计类应用也在快速告别笨重的本地软件。然而，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 数据库”。

文件解析器：libdxfrw-converter

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

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

真正实现了文件“即拖即看，离线也能飞”。

WebGL 渲染层：three-renderer

有了数据，就要看图。CAD-Viewer 使用 Three.js 将 CAD 实体转为高性能 WebGL 图形，实现流畅的三维交互：

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

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

应用层：cad-viewer 与 cad-simple-viewer

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

cad-viewer: Vue 3 组件

• ✅ 自带工具栏、状态管理和样式
• ✅ 即插即用，适合 Vue 项目
• ✅ 适合快速搭建仪表盘、后台界面

cad-simple-viewer: 无 UI 内核

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

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

很多人可能以为：“浏览器渲染 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 使用文档

框架无关场景：
👉 cad-simple-viewer 使用文档

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

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

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

如果你也相信 CAD 的未来属于 Web，不妨加入我们！

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

最后的话

CAD 的未来正在悄然发生转变，CAD-Viewer 正站在这场变革的前沿。它用纯前端架构、GPU 加速渲染和灵活的模块化设计，重新定义了 CAD 的呈现方式。

如果你正在构建现代 CAD 工具、注重隐私的平台，或者只是想找一个到处都能用的 DWG 查看器，CAD-Viewer 值得你加入工具箱！

转自https://juejin.cn/post/7535734834464833588