CAD-Viewer：面向未来的高性能纯浏览器 DWGDXF 查看器 在这个一切都往云上搬的时代，设计类应用也在快速告别笨重的本地软件。然而，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专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文