原创 站好了 2025-09-05 08:31 重庆
点击关注公众号，技术干货及时达。
在这个一切都往云上搬的时代，设计类应用也在快速告别笨重的本地软件。然而，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-modelCAD-Viewer 的“心脏”是基于开源项目 「realdwg-web」 构建的内存数据库，灵感来自 AutoCAD 的 ObjectARX 接口，提供一整套 CAD 数据结构：类似 AcDbLine、AcDbCircle 等实体类，组织清晰支持模型空间与布局空间的组织与遍历为 DWG/DXF 解析器提供统一的数据写入接口，屏蔽底层复杂的二进制处理简而言之，它是浏览器里的“迷你 AutoCAD 数据库”。文件解析器：@mlightcad/libredwg-converterDWG 和 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 是为开发者打造的工具，架构模块化，文档清晰，易于定制和二次开发：简洁命令与事件 APIES 模块可 tree-shakingUI 和交互可挂钩扩展文件加载器可配置（支持 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专区指南：
点击"阅读原文"了解详情~
