以前做项目，碰到 .dwg 或 .dxf 文件，第一反应都是：“得用 AutoCAD 打开” 或者 “让后端去解析吧”。毕竟这类文件结构复杂，前端直接处理听起来有点不现实。
但现在，这个局面被打破了。
最近我搞了个小东西叫 MlCadViewer，用 Vue 3 写的，可以直接在浏览器里加载、查看，甚至编辑 DWG 和 DXF 文件——完全不需要后端参与，文件也不用上传，全在本地跑。
程序员导航
优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站
这玩意儿到底是什么？
简单说，MlCadViewer 是一个基于 Vue 3 的 CAD 查看组件。它能在浏览器里原生解析 AutoCAD 文件，支持缩放、平移、图层管理、命令行操作，UI 风格也尽量贴近 AutoCAD，上手基本没门槛。
而且它自带渲染引擎、状态管理、多语言和主题切换，集成起来特别简单，一句话就能用。
主要特点
- ✅ 不用后端：解析、渲染全在浏览器完成
- ⚡ 性能不错：大图纸也能保持 60 帧以上
- 🎛️ UI 可配：工具栏、命令行、坐标显示这些都能关
- 🔒 文件安全：全程不上传，隐私有保障
怎么用？三步搞定
1. 安装
npm install @mlightcad/cad-viewer
2. 引入并使用
<template>
<!-- 直接丢一个组件进去，指定文件地址就行 -->
<MlCadViewer canvas-id="canvas" locale="zh" url="example.dwg" />
</template>
<script setup lang="ts">
// 引入组件
import { MlCadViewer } from '@mlightcad/cad-viewer'
</script>
就这么简单。更多例子可以看这个仓库：cad-viewer-example
AI 工具导航
优网导航旗下AI工具导航，精选全球千款优质 AI 工具集
能不能自定义界面？
当然可以。组件提供了全局配置，比如你想关掉命令行或者工具栏：
import { AcApSettingManager } from '@mlightcad/cad-simple-viewer'
// 关掉命令行
AcApSettingManager.instance.isShowCommandLine = false
// 或者关掉工具栏
// AcApSettingManager.instance.isShowToolbar = false
你想怎么搭界面，基本都能实现。
都有哪些功能？
- 文件操作：打开、保存（后续支持）
- 视图控制：缩放、平移、重置
- 图层管理：控制显示/隐藏
- 命令行：支持 AutoCAD 风格命令输入
- 状态栏：实时显示坐标、缩放比例
- 支持拖拽上传文件
- 中英文切换
- 暗黑/明亮主题
操作方式
电脑上怎么用？
- 选中图形：左键点击
- 缩放：滚动鼠标滚轮
- 移动视图：按住中键拖动
手机或平板？
- 选中：手指点一下
- 缩放：双指捏合或张开
- 移动：双指拖动
操作逻辑和 AutoCAD 几乎一样，老用户基本不用适应。
背后是怎么实现的？
整个项目分了几层，结构还算清晰。
模型层：解析文件
- 用
@mlightcad/data-model定义统一的数据结构 libredwg-converter处理 DWG 文件dxf-json解析 DXF- 几何计算靠
geometry-engine，支持各种曲线、矩阵运算
说实话，开源的 DWG 解析工具都不太完善。我也是基于一些开源代码自己魔改的。要是谁手里有 ODA（Open Design Alliance）的源码，欢迎联系我，搞个更强的版本。
渲染层：画出来
- 用 Three.js 做 WebGL 渲染（
three-renderer） - 也支持导出 SVG（
svg-renderer） - 统一接口，方便以后扩展
视图层：交互逻辑
cad-simple-viewer负责核心逻辑，不带 UIcad-viewer在它基础上套了个 Vue 3 的壳子，加上菜单、工具栏这些，变成一个现成可用的组件
渲染难点怎么解决？
大图纸卡不卡？
关键在于减少 GPU 的绘制调用（Draw Call）。Three.js 有个 BatchedMesh 可以合批，但它不支持点和线。所以我照着它的思路，自己写了个支持点、线、面合并的批处理机制，性能提升明显。
免费在线工具导航
优网导航旗下整合全网优质免费、免注册的在线工具导航大全
文字怎么还原 AutoCAD 的样子？
AutoCAD 用的是 MText 和 SHX 字体（一种用线条画的字体，渲染快）。
我的做法是：
- 写了个
mtext-parser来解析富文本 shx-parser处理 SHX 字体文件mtext-renderer把文字画出来- 中文字体文件大，解析慢？那就缓存到 IndexedDB，下次打开就快了
顺便还做了个富文本编辑器 mtext-editor，调试起来方便多了。这玩意儿目前开源圈还不多见，有需要的可以拿去用。
线型和填充呢？
这部分用了 Three.js 的 Shader 来实现，比如虚线、点划线、填充图案。
不过目前还有点限制：线型里带文字的暂时还不支持，后面会逐步补上。
最后说两句
MlCadViewer 还在持续迭代中，目标是做一个真正能在生产环境用的、纯前端的 CAD 查看方案。
如果你感兴趣，欢迎去看看代码，或者提 Issue。要是遇到 Bug，最好能附个测试文件，方便我复现。
📚 项目地址：GitHub – cad-viewer
相关文章
