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

news2024/9/21 14:35:10

由于网上资料都是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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/172216.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

主动服务再升级!这个品牌引领智慧生活进入“深度体验”

文|智能相对论作者| 佘凯文1月15日,一档央视新闻的新概念科技节目《KU A !酷啊未来 | 中国科技创新之夜》正式播出,来自中国科学院的多领域顶级科学家及许多科技企业、青年科研人员代表,共同分享了科技创新之路上的成果和突破。不…

EDI文件处理失败如何汇总?

知行之桥EDI系统在后台自动运行的时候,有时会遇到处理文件失败的情况,导致失败的原因有很多,部分客户希望把处理失败的文件都汇总起来,便于分析失败原因,减少未来再出现类似的错误,同时也能够方便后期排查&…

ERD Online 4.0.7 在线数据库建模、元数据管理(免费、私有部署)

4.0.7❝ feat(erd): 增加新春火红主题feat(erd): 增加团队协作人员进入、退出提示fix(erd): 修复权限配置页面显示混乱doc(erd): 修改更新通告地址❞变化一览 增加新春火红主题 新春主题所有按钮、菜单、元素由原来的蓝色改为火红色修复权限配置页面显示混乱 团队功能增加团队协…

【算法基础】快速排序

目录 一、快速排序核心思想 二、快速排序步骤 (1)暴力做法 (2)双指针做法 三、代码模板 四、边界问题 五、总结 一、快速排序核心思想 分治,即将一个序列划分成左部分小于等于x,右部分大于等于x 二、快速排序步骤 ①确定一个分界点x。分界点可以是左端 a[l]、右…

【Linux】两个故事带你使用git命令行

目录一.历史故事背景经过git的诞生二.git版本管理1.小故事2.理解版本管理三.git的使用1.仓库的创建2.安装git和仓库克隆3.上传代码三板斧addcommitpushgithub和gitee是代码的托管平台,我们上传代码或文件在其中,来管理我们的代码和不同版本软件。 在多人…

【操作系统】——主流的操作系统(带你快速了解)

📜 “作者 久绊A” 专注记录自己所整理的Java、web、sql等,IT技术干货、学习经验、面试资料、刷题记录,以及遇到的问题和解决方案,记录自己成长的点滴。 🍁 操作系统【带你快速了解】对于电脑来说,如果说…

【Java IO流】字符集使用详解

文章目录前言ASCIIGBKUnicode为什么会出现乱码前言 上一节关于字节流的文章中,在使用字节流读取本地文件中的数据时,文件中只存放了英文,而并没有存放中文数据。我们还提到了不建议使用字节流读取纯文本文件的数据,否则会出现乱码…

Elasticsearch7.8.0版本高级查询—— 匹配查询文档

目录一、初始化文档数据二、匹配查询文档示例2.1、概述2.2、示例一、初始化文档数据 在 Postman 中,向 ES 服务器发 POST 请求 :http://localhost:9200/user/_doc/1,请求体内容为: {"name":"张三","age&…

浅谈php原生类的利用 2(ErrorSoapClientSimpleXMLElement)

除了上篇文章浅谈 php原生类的利用 1(文件操作类)_php spl原生类_葫芦娃42的博客-CSDN博客 里提到的原生利用文件操作类读文件的功能,在CTF题目中,还可以利用php原生类来进行XSS,反序列化,SSRF,XXE。 常用内置类: Dire…

【SAP Abap】X档案:SAP Native SQL 简介及实现方式(EXEC SQL、ADBC、AMDP)

SAP Native SQL 简介及实现方式(EXEC SQL、ADBC、AMDP)1、SAP Open SQL 与 Native SQL 的特点2、Native SQL 的实现方式方式一:Exec SQL(1)获取单值(2)获取多行(3)游标应…

TCP协议的长连接和短连接详解

一 前言TCP在真正开始进行数据传输之前,Server 和 Client 之间必须建立一个连接。当数据传输完成后,双方不再需要这个连接时,就可以释放这个连接。TCP连接的建立是通过三次握手,而连接的释放是通过四次挥手。所以说,每…

【SpringCloud】Eureka的基本原理与使用

【SpringCloud】Eureka的基本原理与使用 一、Eureka-提供者与消费者 【问】如果服务A调用了服务B,而服务B又调用了服务C,服务B的角色是什么? 二、Eureka的结构和作用 什么是Eureka? Eureka 解决服务调用的问题 order-servic…

博物馆3d数字化全景展示设计方案

作为近几年新兴的营销方式,交互式营销能够让消费者对产品从主动感兴趣到互动体验,甚至自主自发传播,达到“在销售中传播,在传播中销售”的目的。进入数字体验经济时代,当3d数字化展示技术遇上传统行业,3d数…

Redis原理篇(三)通信协议

一、RESP协议 1、定义 Redis是一个cs架构的软件,通信一般分两步: 客户端client向服务端server发送一条命令服务端解析并执行命令,返回响应结果给客户端 因此客户端发送命令的格式、服务端响应结果的格式必须有一个规范,这个规…

HashMap源码学习:JDK1.8版本源码解析

文章导航 HashMap源码学习:红黑树原理详解 HashMap源码学习:JDK1.8版本源码解析 目录文章导航前言正文HashMap重要属性HashMap构造方法HashMap扩容方法HashMap链表迁移HashMap红黑树迁移HashMap链表转红黑树HashMap红黑树转链表HashMap添加数据HashMap移…

让你彻底明白Java SPI与SpringBoot自动配置,内附实例代码演示

一、Java SPI的概念和术语 SPI:全称是Service Provider Interface:是一种基于ClassLoader来发现并加载服务的机制 SPI由三个组件构成:Service、Service Provider、ServiceLoader Service:是一个公开的接口或抽象类,定…

数说菊风2022

春风传捷报, 梅韵贺新年! 2022,已悄然划过, 就让我们用数字说话, 述说这年的精彩! 树十大标杆案例 国际运营商战略合作——Telkomsel 携手印尼运营商Telkomsel在RCS融合通信和RTC实时音视频领域形成合…

golang入门笔记——kitex

WSL的安装 由于Kitex并不支持Linux,所以需要首先安装WSL2 WSL一句话来说就是微软出的一个虚拟机工具 Win11下安装WSL2的步骤为: 1.“开始菜单”搜索功能,打开“启动或关闭Window功能” 2.勾选以下功能 1.适用于Linux的Window子系统 2.虚…

qsort函数

目录1.什么是qsort函数2.实现一个qsort函数3.用qsort函数排序一个结构体4.模仿qsort的功能实现一个通用的冒泡排序1.什么是qsort函数 我们以前学习过的一些排序算法,如冒泡、希尔、快排等等,它们速度有快有满,但是这些排序都只能排序一种类型…

iOS 内存泄漏检测 Instruments Leaks

Xcode 中 按住 command I 或者菜单栏 Product – Profile 2. 双击 Leaks 或者按 choose,打开 Leaks 面板 3. 在显示的 Leaks 面板中,点击左上角红色点,即可运行内存检测。 4. 在运行过程中如果发现Leak Checks(如图)…