- 博客(30)
- 收藏
- 关注
RSS订阅原创 如何在three.js中画3D圆弧及半圆弧组成圆
在three.js中画圆弧以及画圆，首先会想到的是ArcCurve，这个曲线API，经过使用发现，他是一个二维平面的，也就是说只在X-Y轴组成的平面可以使用，三维坐标使用的时候不生效，比如说：我期望的圆弧是平行于X-Z这个平面，可能有时候会想到让他沿着某一个轴旋转不就好了么。首先获取的数据是CAD之类的建模软件导出的，这类的数据画圆弧以及画圆，就和小学的时候算圆柱体表面积类似，只不过，圆柱变面积计算是把柱体部分看成是一个长方体，而这一类的是分为对称的两个，因此拿到的起止点两两一组组成的圆弧面。
2024-04-24 09:11:26
230
原创 TrackballControls 实现模型和立方体同步旋转
就在放弃这个功能的时候，鼠标转动模型又回想起这个控制器本身是对相机角度和位置的改变，所以就试了下。将模型变换的时候的相机角度，位置传递给立方体，立方体自己的相机copy这两个属性。之前使用的是OrbitControls控制器，通过控制器的change事件计算出极角和方位角传递个立方体再通过计算赋值给相机实现模型和立方体同步旋转展示模型六个标转面。现在使用TrackballControls 虽然实现模型旋转不受角度限制，但是之前设计好的同步方法就是没有用了，为了实现也是多方查找都没有具体的效果。
2024-03-29 15:57:54
187
原创 TrackballControls 控制器如何让模型显示重置的坐标
由于这个控设置器无法满足不同角度旋转查看模型，所以替换为TrackballControls ，但是替换以后使用之前的方法想让模型重置为一开始展示的模样，也就是相当于旋转后点重置复位的意思。之前的位置设置就会失效。这篇文章反应的就是一开始的设置也是这么做的，一直以为可能实现不了了，但是看到她的第二个方法，又来了灵感，就尝试先将conrols reset 然后将声明的全局化相机位置以及相机正对的中心点位置以及相机到模型的距离这些都可以拿到，又将这些重新赋值给相机，结果就是完美达到自己想要的效果。
2024-03-26 09:10:32
168
原创 three.js中使用three-csg-ts 进行模型相减
首先加载STL模型，加载的时候声明一个loder，若是两个相减，就必须是一个套着一个才能同时获取geometry1和 geometry2，才能够 声明网格mesh,使用CSG.fromMesh 得到两个值，使用差集运算得到difference，然后用CSG.toGeometry将得到的结果转化为要展示的geometry和材质一起生成一个新的mesh 最后添加到scene，就会得到两个模型的差异部分。具体来说，它会将第一个参数（被减去的形状）从第二个参数（减去的形状）中减去，生成差集。
2024-03-26 08:26:15
221
原创 three.js使用dragControls实现拖动
js中文文档中是了解到这么一个控制器的，反复设置就是不生效，因为希望是在点击模型底部的一个按钮后让他切换控制器实现单独的平移操作的。本身已经在使用的是轨道控制器，所以初始化的时候又加了这个拖拽控制器，比较发现在初始化的时候，两个的传参是不一样的，常用的轨道控制器职场需要传入相机和渲染元素render.document 就可以，拖拽控制器还需传入要拖拽的模型元素，就是你要拖拽的目标。由于我的是点击模型要整体移动，我就直接是遍历一开始要存储的数组挨个添加到group 直接用上面的步骤实现的拖动。
2024-03-22 11:20:24
371
原创 three.js使用中文汉字展示方法
一开始使用的就是自己在电脑C盘fonts 文件夹找的字体包在线转换为json引入的。部署上线后发现模型加载出来了文字出不来，过一会刷新才正常展示，打开请求发现文字库即使M，加载太慢了。这篇文章中提取了作者已经在线转好的一份json文件，通过只能AI询问如何挑取自己需要的文字并保存为需要的JSON文件，得到下面一份转换的JS脚本。只要你拥有一份汉字json，挑取自己需要的就能转换得到一份简化后的JSON，大大缩小了文件大小，由原来的30M直接变30K。
2024-03-20 09:33:02
305
原创 three.js 加载glb格式模型的优点
但是又遇到之前在做测量时候的问题，浏览器大部分不支持画线加粗显示。然后和STL点击事件一样也是通过射线相交的方式来确定点击的位置，由于模型的child是MESHl类型因此会相交多个，取最近的那一个也就是相交数组的第一个，需求是点记一个部位变色，点击下一个上一个回复原色，声明一个对象来存储变色前的颜色，点击下一个的时候判断这个是否存在，是否等于当前点击的不等于就回复记录的这个的颜色，改变现在的这个材质颜色，材质颜色用color属性，记录的颜色用originalColor这样就实现点击变色了。
2024-03-16 09:23:41
387
原创 记录一个BUG a-steps 切换步骤点击下一步问题
在切换事件中把current 又改为第一步的值切换也没毛病，就是走不到下一步，以为是版本大切换导致的试着切换到低版本还是不行Cannot read properties of null (reading ‘split‘)“ 包这样一个错很是疑惑？最近心血来潮，想将之前重构的服务端2.0进化为3.0，肯定是要将UI组件升级版本使用，在涉及到忘记密码页面有一个三步走战略，当时以为是很普通的复制粘贴然后修改，然后就出现了一个离奇的BUG。直接照官网的复制个demo,
2024-03-06 17:01:10
331
原创 项目升级nuxt3初始化学习
由于对TS不是很精通（其实是不太感冒），之前选择项目重构的时候选择了nuxt2，还好生态齐全在重构的过程中都能解决，或者得到启发解决遇到的很多问题。可是心里对于nuxt2只能使用低版本的UI组件还是抱有深深的遗憾。为此向nuxt3发起了挑战，之前使用nuxt3，命令创建项目发现不能选择项目的配置，直接就是目录TS一大堆建好的。因此创建这种初始化的命令直接跳过，在gitee上搜索nuxt3很多新建仓库初始化的，并没有深入开发的直接clone 下来。将TS文件剔除并修改为JS（主要是看其中是否是ts写法）
2024-03-01 14:13:37
331
原创 nuxt2 国际化设置及UI组件配置
以上只有antdesignVue组件引入的中英文包，其他具体的不同语言描述请在components后添加，中文添加中文的，英文添加英文的，key值保持一致。将刚刚创建的两个语言JS引入，在nuxt.config.js的plugins模块引入使用。最后就是在页面中的使用了，创建了一个selectLang.vue。服务端还是老问题就是刷新的问题，这个就好解决了，在几个父页面上。然后在plugins文件中创建i18n.js文件。首先在assets文件中创建两个语言JS文件。
2024-01-03 10:30:06
551
原创 回顾项目重构总结（SEO优化）
在重构的这段时光，其实感觉蛮充实的，每天一个小功能，日积周累居然将整个项目不知不觉就重构完成了，现在缺憾的是还没有进行部署检测，nuxt打包分为build 和 generate ，一个是ssr式的，一个是静态网页那样的打包为dist文件部署。项目重构已经基本完结，此刻的感想就是那句老话“千里之行始于足下”，一开始拿到重构任务的时候心情是非常的忐忑的，总是担心完不成咋办，之前从来没想着对一个老项目进行重构，因为老是听说能跑的代码就是好代码，千万不要动。抱着这样的心情开始了项目重构之旅。
2024-01-02 10:33:17
387
1
原创 nuxt2+vue2+antdesignVue1.7.8(四)
首先直接使用官网中对于组件的引用，用的是require,直接报错，由于之前使用过其他的第三方插件，知道都是在plugins下创建JS文件，使用Vueuse()来使用，在nuxt.config.js中在plugins引入，书写的话建议是{src:'xxx",ssr:false}这样的方式避免服务端加载报错。这次SEO优化使用的是vue2且在nuxt上使用，官网对这块有段文档描述，主要是在vue2中的一些方法的使用都有this.$refs.cropper示例，对于使用很便利。描述一下在使用中遇到的坑。
2023-12-19 15:42:02
386
1
原创 nuxt2+vue2+antdesignVue1.7.8(三)
1、遇到了下拉框select 下拉选择的时候显示的文案不发生改变，失焦点击其他功能的时候却又改变了，绑定change事件发现打印的值也是切换的值，就是显示文案没有正确显示。2、table的插槽使用吧，高版本在colums中每一项加一个slots{title:xxx,customRender:xxx}然后在table中想替换表头的是title:xxx，自定义显示表内容的就是customRender。最近都忙着进行项目迁移，因此遇到的问题大多数是UI问题，低版本使用转换的问题特别多。
2023-12-16 16:37:26
401
1
原创 nuxt2+vue2+antdesignVue1.7.8(二)
script引入是把npm下载的jswen文件复制到static进行的文件引入，由于是重构引入wow.js一次性成功不用判断滚动盒子内容。swiper和wow的使用都是在要用到的页面的mounted中初始化并进行相应配置；swiper 使用的是这个配置。这次是针对在项目中使用wow.js动画和swiper组件，在之前的项目中其实已经使用且很稳定没有什么奇奇怪怪的报错。在页面中直接 wow animate__animated animate__fadeInUp 添加到类名上就行。
2023-12-07 16:29:35
423
原创 nuxt2+vue2+antdesignVue1.7.8(一)
查了很多都是将token放在cookie中，在store页面刷新的时候执行nuxtServerInit方法中初始化在后端接口返回req.heaeders.cookie拿,由于还是在admin模板思维，一时没有钻过来，想在前端存储，前端销毁，在跳转的时候拦截鉴权。由于不能使用浏览器缓存，所以不能直接在storez中调用本地存储，所以只能在页面中判断是客户端了触发store.commit()方法赋值到vuex中保持其中的状态，process.client 为true的时候说明是在浏览器运行了。
2023-12-04 19:07:40
394
原创 WOW.js添加动画遇到的问题
然后在想要添加动画的元素上添加类名 wow animate_animated animate_fadeInUp 等操作，这里呢如果使用的是animaite.css就需要引入下缀，在 new WOW()有一个option可以设置自行百度。近期的工作是对公司门户类首页进行一次改版，参照竞品可以看到随着鼠标的滚动，各个元素有一个很美的入场动画，之前对animation以及animate.css有过一定的了解，但是在随着滚动加入动画还是一点头绪 没有。也在竞品的样式类中发现有wow类名。经过设置动画完美添加!
2023-11-10 09:20:02
177
1
原创 three.js 加载STL模型补充遇到的问题
three.js在开发的时候找到的指导文档提到的都是场景相机渲染初始化，相机控制器默认是轨道控制器OrbitControls。在之前的模型加载中有个功能是测量模型距离，只实现了模型点与点的距离测量，两个点必须是在一个平面上，跨平面的话，生成的线会有部分展示不出来，采用的是点击的点与模型射线相交确定在这个点在平面上。将代码的这部分进行调整，判断以点击的点生成的一个平面是否为准，这样的有点就是不会因为视角的关系看到点击的点在模型上了，换一个视角看却还有一段距离，避免这种现象的出现。
2023-10-26 14:40:55
112
原创 模型坐标轴展示（three.js）
创建坐标轴就会出现两个坐标轴，且这个需求是点击坐标轴才会出现上述功能，因此在点击生成坐标轴时，先判断是否存在坐标轴，出在就移除。这部分代码就是生成红色尺寸框的，具体是通过chatAi生成的，加了一个name属性，便于点开生成，再次点击移除。因此在点击的时候就只会出现要加载的坐标轴，这个时候发现没有发生偏移，需要有一点偏移然后生成网格状。一开始加载出来的坐标轴的原点位于模型的左下角，有且只有XYZ三轴并没有网格展示。生成网格使用grid具体的网格大小需要慢慢调整。
2023-09-22 09:47:54
383
1
原创 实现右上角同轴方向转动功能three.js
他还有一个change事件，交接同事的思路是拿到旋转的坐标通过组件传值，子组件到父组件通过emit传值触发对应事件，父组件到子组件是通过ref拿到子组件暴露出去的set坐标的方法来父子互动。定位在右上角是一个立方体，分别对应的是模型的前后左右上下六个面，单独实现并将模型和立方体布局是没有问题的。难点就是互相转动的时候要一起转动，且角度、倾斜角，旋转角度一致！一开始看到这个需求简直是头大，根本无从下手，观察竞品发现是定位到页面上的，首先这个方向实现是对的，但在后面实现剪切截图下载时发现可能还是有点出入。
2023-09-15 15:19:24
150
7
原创 使用霍尔尼扫码PDA记录
使用方法就跟插件市场那样引入，但是最好是配置一下广播动作和key的label，经过百度知道使用的这款PDA的广播动作和key的label后，在js文件中设置一下。像这样 com.honeywell.scan.broadcast。在开发过程中发现，uniapp底部TAB栏若都是引用扫码组件后一个会把前一个的扫码组件覆盖掉，经过试验智能是通过uniapp的生命周期进行控制。这样底下的tab来回跳转也能正常的注册销毁组件，实现在当前页面的正常扫码获取广播。
2023-08-19 15:06:40
200
原创 用SVG创建图片连线说明
之前老板提到一个需求，就是给一张模型图点击图片的某一部件会有这么一个连线的框出来，进行填写选择。但是硬着头皮进行了查找，和同事交流首先想到的是canvas。自己试着完成这个需求，就在WETAB浏览器插件的chat ai 问了下画线实现方法，给出的建议就是使用SVG，首先是感觉跟canvas大致一样SVG充当的就是一个画布的角色，这个也是在逐步完善需求的时候发现的，在SVG中包裹你要连线展示说明的图片。这里展示的是绘制路线以及路线两端的坐标展示为空心圈。以及删除清空的操作。这是根据距离调整的路线坐标。
2023-07-18 10:03:26
482
1
原创 vue手机扫码开发记录
修改部分就是获取到canvas信息后，将原来的jsqr识别转换为此步骤就可以了，缺陷依然比较明显就是识别速度还有待提高，扫描的时候还是得不停地调整位置而不是扫描就能出数据，在这里我一直认为微信二维码扫描应该是前端传图到后端解析的，只是前端进行扫描可能就存在这个问题。上述代码是阿木木提供的扫码组件在uniapp组件可以搜索到，这个组件针对一般的二维码扫描是没有问题的，但是，在老板要求更换Data Matrix格式的二维码后，识别不了了，只能更换jsqr这个识别库。相反，每个类都是单独导出的。
2023-07-12 09:57:35
143
1
原创 vue工业项目使用多个摄像头拍照
在做这个需求的时候先是看到第二篇文章，是获取多个设备的ID 然后进行绑定到多个video标签上，使用视频截取照片实现，之前的人脸识别就是这么截取的照片。在操作的过程中老是获取不到deviceId为空，才找到第一篇文章原来是没有开启浏览器摄像头权限导致的，所以在第一篇文章的success方法中调用第二篇文章获取设备数量以及获取摄像头ID成功打开设备实现了拍照。在这里还要推荐一篇文章。这个是本地开发添加信任网站的设置，不过感觉好像设置之后并没有跳出触发使用摄像头的权限窗口。首先要推荐两篇不错的文章。
2023-06-16 11:26:18
197
1
原创 vue使用扫码枪获取数据
使用扫码枪获取数据查了很多，要么是直接对接扫码枪SDK ，要么就是监听键盘事件。最后但根据自己的需求选择了keydown事件， 通过输入框的keydown事件，监听扫码枪输入完成的Enter事件，获取完整的扫码内容，再对扫码值进行处理，并使用绑定的ref 将输入框清空，不然连续扫码获取的值，字符串累加一起，每次都是累加在后面的。扫码枪工作是需要输入框聚焦的，所以点击按钮扫码聚焦到要获取值的输入框，在当前页面的失焦事件中再次获取聚焦动作 保持扫码枪工作无误。
2023-06-09 17:46:48
1797
4
原创 记录一下a-image-preview-group 相册模式点击切换相册展示数据，不改变却追加了之前的数据的问题
在这段代码中 有一个封面 ，有一个相册数组，官方功能就是点击封面预览相册数组中的图片，在这之外设置了一个切换的按钮 清空相册数组重新赋值期望点击之后可以预览的是另外一组数组信息，然而。不管怎样切换之后的相册居然会携带上之前的数组的信息，点击预览就有 了问题，解决方法就是在。加上判断就可以了，现在就可以正确的变换了！
2023-05-20 10:52:27
1205
1
原创 html5-qrcode 实现扫码
这部分代码是获取设备相机数量 以及开启的是前置还是后置 但是在使用的时候已经设定为后置了，觉得这部分的获取就有点多此一举。在这里主要记录一下使用中的问题 ，这个插件的使用只有在手机自带浏览器中可以，若是换成其他浏览器比如UC。浏览器是自带扫一扫功能的所以在不同浏览器可能方法不同，使用自带的没有进行 深入研究。基本步骤跟这里是一样的，
2023-05-13 15:45:10
5147
6
原创 简单的人脸识别（video+canvas）
上面这一步就是点击打开按钮，就有画面了，切记若是开发环境调试，需要将开发的IP地址添加到浏览器的可信任网址当中。还有就是video元素不能使用v-if控制显示隐藏,会导致不知名错误。这部分是对开启的摄像进行截图获取照片 里面的base64ToFile 是将base64 转化为file 文件传参给后端 在这里找到的方法。之后就是将处理好的图片 传给后端进行人脸识别，后端使用的是阿里的API。使用的是常见的video+canvas方法。js部分就是获取设备的摄像头并和dom部分的元素绑定，
2023-05-13 15:36:15
383
1
原创 ant-design-vue ant-table 实现默认选中 且不影响之后的勾选切换
一般情况下都是加载出来列表之后进行全选的操作，这样ant-table官网的一般选中就能满足，可是公司领导给的需求是列表数据一加载就是默认选中的操作。这两个属性结合，默认将数据的ID 数组赋值selectedRowKey 页面加载出来是全选的效果，但是切换点击勾选失效，不能使用。经过多方查找看到网友使用的时候加有这个参数。不然，选中效果不会有。还有这个在合适的位置加。
2023-04-29 14:01:28
3354
1
原创 transition(CSS)+js实现优雅的展开和折叠
多数时候会碰到更多选项，需要进行展开。这里是我认为的比较好的一点，就是获取子元素高度用父级的数量取整获取有几行然后相乘（这里是一行5个），还有就是切换按钮的摆放位置一定要在改变父级的外面，不然切换着就不见了。首先，查了很多资料，都提到使用transition，这个我也知道一开始就是使用的这个CSS样式，但是一直不生效，原来是这个元素必须有起始值和终止值，才可以。展开和隐藏的元素也要选对，本次使用的是在父级元素进行的，一开始不知道设置多少的起始值，所以就先通过切换事件打印出变化的高度。
2023-03-14 09:55:03
680
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人