ThreeDXF预览DXF文件集成到vue项目中

已于 2023-01-19 15:17:16 修改
阅读量3k 收藏 6
点赞数 4
文章标签： vue.js javascript 前端 vue
于 2023-01-19 14:18:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41043580/article/details/128734569
版权

由于网上资料都是html的，而自己需要嵌入到vue项目中，查找资料都是在index.html引入script脚本，在写到Vue文件中，但是我尝试过了，各种报错，找不到，window. 根本无法用，于是改注入main.js等等也是各种报错，查看threedxf的sample，发现一共就用到了几个js，于是直接把js放到项目中，在哪里使用就在哪里引入，自己调整了下引入的js文件格式已适用Vue的import，现把步骤记录下来，供大家参考！

1.将所需js文件和字体库放到public下（其他位置我没有尝试）

2.安装dxf-parser，npm install dxf-parser，这个可以安装，也可以导入js，我用的安装

3.在所需要的vue文件中写入预览方法，其实就几行有用的

template下就写入div标签即可，用于展示

 引入所需要的包

我的需求是从后端拿到dxf文件然后进行预览，如果你们的需求是前端上传然后下载也一样，按sample的例子改一下就行，有时间我会写一个threeDXF预览的vue项目例子传到代码库中，有需要的可以直接下载下来看

以上是vue项目需要改动的地方，下面说说我把three-dxf.js和three.js等都改写了哪些地方。

 

 

 OrbitControls.js文件改了这里

 

 以上就是我调整的，供有需要的人做以参考！！！

示例程序已经写好了，可以参考！GitHub - yaqinzhang123/three-dxf-vue: three-dxf预览在vue中使用，建议直接使用此项目中的js

muguo321
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
dxf-parser与three-dxf展示dxf文件。集成在vue3项目中使用
m0_68748513的博客
12-13 1750
vue使用three-dxf与dxf-parser展示dxf文件显示中文与标注2D画布
探索Three-DXF：三维模型转换神器
gitblog_00089的博客
04-17 408
探索Three-DXF：三维模型转换神器 项目地址:https://gitcode.com/gdsestimating/three-dxf 如果你在寻找一种高效、灵活的方法将DXF（AutoCAD设计交换文件）格式转换为Web上的3D模型，那么你来对地方了。Three-DXF是一个开源项目，旨在将DXF文件无缝集成到Three.js——一个流行的JavaScript库，用于创建和展示互动的3D图...
DXF格式在线预览、在线查看
wangming100110的博客
09-01 977
3D模型在线转换是一个可以进行3D模型格式转换的在线工具，支持多种3D模型格式进行在线预览和互相转换。
three.js官方案例webgl_loader_fbx.html学习
最新发布
hemiaoyuan1989的专栏
05-27 936
先创建必要的场景scene,相机camera，渲染器webrenderer，控制器controls和灯光DirectionalLight. 性能检测stars， 地面， 网格。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。针对后缀的anim的动画文件，目前是需要这么解决。这里模型加载进去小，所以进行了放大100。加上这个光后，模型明显变量了。
three-dxf:使用three.js的浏览器的dxf查看器
04-28
三Dxf Three-Dxf是dxf文件的javascript查看器。 它接收从Dxf-Parser生成的dxf对象，并使用three.js渲染它们。 安装 npm install three-dxf 现在，我们建议克隆存储库，并从我们的示例开始。 请参阅下面的运行样本。 用法 // See index.js in the sample for more details var parser = new window . DxfParser ( ) ; var dxf = parser . parseSync ( fileReader . result ) ; cadCanvas = new ThreeDxf . Viewer ( dxf , document . getElementById ( 'cad-view' ) , 400 , 400 ) ; 运行样本 # first, co
VUE使用DXFParser组件解析dxf文件生成图片
qq_45083002的博客
09-25 1050
vue对dxf解析大致效果图如果大家有疑问欢迎评论我将在更新问题解析！
vue中使用three.js加载各种模型文件（obj,mtl,fbx,dxf）(封装
热门推荐
不上班老板怎么买房买车
03-16 1万+
three初学者,可以直接上手的模型加载（有啥问题评论吖，不定时维护
three引入vue（工程化）
SYXZSs的博客
12-18 347
three引入vue
C# 实现DXF文件操作预览
02-28
C# 实现DXF文件操作预览
DXF文件导入ALLEGRO中的方法及步骤
08-05
在画PCB时，需要跟结构模具进行匹配，此时需要将结构的DXF文件导入到allegro中。 本文主要介绍将dxf文件导入到allegro中的方法及步骤.
Qt 解析 dxf 文件源码
12-14
Qt 解析 dxf 文件源码
在线预览cad图纸
01-18
在线预览cad图纸，支持谷歌火狐等浏览器。cad图纸格式有dwg等等
js-output-dxf
01-15
可集成到任何js框架，导出cad格式数据dxf，提供画点、画线、画圆、画面或者添加注记等基本功能
THREE各种格式文件加载大全*Loader.js
02-22
THREE各种格式文件加载大全，一定能帮大家的忙。*Loader.js, 3MFLoader, AMFLoader, AssimpJSONLoader, AWDLoader, DDSLoader, FBXLoader, KMZLoader, MTLLoader, OBJLoader, PLYLoader, STLLoader, TTFLoader, VTKLoader 等５０多个js文件，很多种格式的模型都可以加载。
dxf浏览工具.zip
04-16
这是一款DXF浏览器，无需CAD开发平台，CSDN文章是 《一款DXF浏览器简要思路》当然开发细节还要继续写 主要目的是学习技术开发
DXF官方帮助文件.7z
09-15
DXF 文件完整的结构如下： HEADER 段。包含图形的基本信息。 CLASSES 段。包含应用程序定义的类的信息，这些类的实例出现在数据库的 BLOCKS、ENTITIES 和 OBJECTS 段中。 TABLES 段。包含以下符号表的定义： APPID...
C#-读取DXF文件.doc
12-21
但是，通过本篇文章，我们可以了解到如何使用C#语言读取DXF文件，并将其应用于实际的项目中。 知识点： 1. DXF文件的基本结构 2. C#语言读取文件的方法 3. 使用FileStream和StreamReader读取文件 4. 解析DXF文件的...
dxf格式详解与在线打开、查看
wangming100110的博客
09-26 4948
使用3D模型在线转换网站进行dxf格式在线打开、查看和转换，NSDT 3dconvert支持将dxf格式在线转换为glb、gltf、obj、stl、dae、ply、off等格式。
three-dxf 在vue中使用
08-17
要在Vue中使用three-dxf.js，您需要按照以下步骤进行设置： 1. 首先，确保您已经安装了Vue.js和Three.js。您可以使用npm或yarn安装它们： ```bash npm install vue three ``` 或 ```bash yarn add vue three ``` 2. 接下来，将three-dxf.js库添加到您的项目中。您可以通过将其下载到您的项目文件夹中，或者使用npm或yarn安装它： ```bash npm install three-dxf ``` 或 ```bash yarn add three-dxf ``` 3. 在Vue组件中，导入所需的库和three-dxf.js： ```javascript import Vue from 'vue'; import * as THREE from 'three'; import ThreeDxf from 'three-dxf'; export default { name: 'YourComponent', mounted() { // 在这里使用Three.js和three-dxf.js进行操作 }, }; ``` 4. 在mounted生命周期钩子函数中，您可以使用Three-dxf.js来读取和渲染DXF文件。例如： ```javascript mounted() { const container = document.getElementById('dxf-container'); // 创建Three.js场景 const scene = new THREE.Scene(); // 创建ThreeDxf实例并加载DXF文件 const threeDxf = new ThreeDxf(scene); threeDxf.load('path/to/your/dxf/file.dxf'); // 创建Three.js渲染器并将其附加到容器中 const renderer = new THREE.WebGLRenderer(); renderer.setSize(container.clientWidth, container.clientHeight); container.appendChild(renderer.domElement); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); } ``` 这是一个简单的示例，展示了如何在Vue中使用three-dxf.js库来加载和渲染DXF文件。您可以根据您的项目需求进行更多的定制和扩展。请确保在引入和使用任何库之前，先了解其文档和API参考。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值