从复杂到简单：用 three-dxf-viewer 轻松搞定 DXF 渲染

介绍

在我们当前的项目中，Three.js 已被广泛应用于渲染 GLTF、GLB、FBX 等主流模型格式，为项目带来了高效且流畅的三维可视化体验。然而，最近我接到了一项新任务：使用Three 渲染 DXF 文件.。

这里先介绍一下 DXF 文件格式, DXF 是一种由 CAD 绘制的数据文件格式 ，在工程设计和制造领域应用广泛.

为了解决这个问题. 我研究了目前npm 中几款不错的包，接下来我会通过一个 Demo 完整地展示我的研究思路与实现过程，以及我最终的选择。我希望通过这个 Demo，不仅能梳理自己的技术思路，还能为同样面临类似问题的开发者提供一些参考和帮助。接下来，我将逐步分享这一过程，期待与大家共同探讨与进步！

准备工作

为了快速搭建一个用于展示的 Demo 环境，我首先使用 Vite 官方提供的脚手架工具创建了一个项目，作为我们的基础服务框架。接着，我准备了一个 demo.dxf 文件，并将其放置在项目的 public 目录中，以便后续使用。同时，我对默认的 App.vue 页面进行了改造，将其调整为一个适合展示和研究 DXF 模型的简洁页面。

页面样式如下:

代码结构:

在完成基础环境的搭建之后，我便正式开启了对 DXF 文件渲染的研究与分析。在研究过程中，我重点关注了以下几个开源工具和库：dxf-parser、three-dxf、dxf-viewer 以及 three-dxf-viewer。这些工具分别从不同角度提供了对 DXF 文件的解析与渲染能力，成为我探索过程中的核心研究对象。

后续，我将逐一分析这些工具的功能特性、使用场景以及优缺点，并结合实际需求，评估它们是否能够满足我们项目的目标

方案一： dxf-parser,three-dxf组合

在几种解决方案中，我首先选择了 dxf-parser 和 three-dxf 的组合方案作为研究起点。这一组合的核心在于 dxf-parser，它专注于 DXF 文件的解析，能够将 DXF 格式的图形数据提取并转换为更易于处理的 JSON 对象。为了更全面地了解这一工具，我首先查看了其在 npm 上的官方描述。