- 博客(46)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 threejs 大场景下，对小模型进行贴图处理
大概知道这个模型由哪些子模型组成，这个模型没有group的概念，只有简单的mesh组成，根据实际的业务需求，模型名称可能有一定的约束规范，例如id之类。针对已有模型，根据数据状态进行贴图处理，例如：机房内电脑告警状态、电脑开关机状态下的不同状态贴图等。单个模型的情况下，直接对其进行 material 进行赋值即可，亲测有效。第一步加载完模型后，查看下模型的结构，可以打印下object的子模型。模型组的场景，对其进行children遍历，进行材质重新赋值。贴图后，忽略红色丑树干，只是增强演示效果。
2024-02-28 10:26:50
589
原创 threeJS 大模型中对小模型进行删除
大概知道这个模型由哪些子模型组成，这个模型没有group的概念，只有简单的mesh组成，根据实际的业务需求，模型名称可能有一定的约束规范，例如id之类。核心代码就是用的remove()方法，注意的是，需要对其材质和物体进行一个dispose销毁操作。在ThreeJS项目中，拿到一个大场景的模型，可能后续有根据需求进行小模型的删除和调整。第一步加载完模型后，查看下模型的结构，可以打印下object的子模型。最后放一张删除后的效果图吧（对比图一：树已经被删除了）例如，大模型示例图中，我们需要删除树的小模型。
2024-02-28 10:10:26
500
原创 threeJs 模型单双击点击事件
threeJS的事件是计算射线和模型的交点的方法，其中核心是判断event.detail属性，分别打印下单双击事件下的event。控制台根据鼠标的点击次数进行输出，注意的是双击事件时，先打印单击再双击。threeJS中对模型的点击事件，单击还是双击，先放个简单的例子👇。所以根据event.detail属性进行点击事件判断即可实现。关于threeJS模型的引入方法，可以看这个☞。
2024-02-22 10:10:22
389
原创 fabric.js 组件 图片上传裁剪并进行自定义区域标记
利用fabric组件，实现图片上传、图片”裁剪“、自定义的区域标记一系列操作先放一张效果图吧👇。
2024-01-19 15:57:53
856
原创 vlc播放rtsp视频流
首先使用object标签，关于object标签的介绍，放一张图。简单记录一下项目中用到的浏览器内嵌vlc播放rtsp视频流。
2024-01-16 15:34:51
644
原创 vue-cal 使用教程
因为使用的是月历，所以把disable-views属性设置成了"['years', 'month']"个人感觉vue-cal 比 v-calendar 更好用呢，可能因为api写的深入我心，资料比较齐全吧。vue3直接可以看本文最下方的API，有详解。vue-cal组件的API地址☞。events数据结构。
2023-11-09 16:30:27
597
原创 v-calendar 日历组件使用&自定义提示内容
最近项目中用到了日历插件，需要统计每天的任务数量，类似elementui的badge组件，待办任务数量大概最后的效果如下图所示，右上角把代办任务数量展示出来vue的日历相关组件挺多的，选了v-calendar，后期翻API有点难受，中文版不太好找，简单记录下。
2023-11-09 16:10:26
3246
原创 vue 浏览器右侧可拖拽小组件
用vue的自定义指令，做一个v-drag的操作指令，也有许多大佬分享了源码，只不过在此基础上稍加修改下限定，一直保持沿着浏览器右侧上线拖拽而已。很多网页在浏览器右侧有"导航"或者“智能助手”的悬浮小气泡框，比如我们的csdn☞。作为页面友好型的引导标注，某些场景下这些小气泡可以沿着浏览器的右侧进行上下的拖拽。是限制拖拽位置的，共有三处，注释掉放开上一行的代码，即可实现全屏的拖拽。使用非常简单，如上图👆所示，加一个v-drag指令即可。
2023-08-04 09:26:08
925
1
原创 js 不规则字符串进行字节截取
遇到一个小问题，字符串中包括“汉字”、“数字”、“英文”、“符号”等不确定的内容，但是展示的时候需要超长后进行截取展示，单纯的字符串截取可能不能满足需求，找了一下，有个根据字符串计算字节数量的方法，进而进行字节截取。直接贴代码，可能不是很全面，但是也是一种新的思路吧，随手记录一下，直接贴代码。
2023-05-18 09:21:21
346
原创 threeJS 模型中加载html页面
CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，操作Dom元素的positionh和rotation属性来创建动画。/*** CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，Dom => Object3D* 操作Dom元素的positionh和rotation属性来创建动画*///创建控件对象。
2023-04-10 10:24:40
2256
1
原创 video 视频下载，调用浏览器的下载进度方法
简单介绍下需求，跟上次的帖子一样，需要重写video标签的进度栏的样式，当然也包括重写下载方法，调用原生video标签下载视频的时候，浏览器会弹出下载进度条。其实下载常用的可能利用a标签，创建一个请求就可以实现下载，但是这种下载方法死活出不来进度，可能方法使用的不对，如有好的方法可以提示我~展示下自定义下载方法后的效果，点击黄色下载按钮后浏览器的展示效果，除了重新自定义了视频的名称，效果跟原生的下载效果一致。下图为调用原生时候，浏览器的下载进度提示。谷歌可能再底部出现，展示用的是Edge浏览器。
2023-03-23 10:59:18
2115
1
原创 video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
2023-02-24 10:22:05
3548
原创 Three.js 模型加载及加载简单动画
简单介绍下Three.js吧，Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。因为使用简单，入门比较容易。Three.js的具体介绍和使用有很多教程，可以根据自己需要搜索。它重要的三个属性：场景（scene），相机（camera），渲染器（renderer），组合构成一个三维画面。
2023-01-30 10:14:50
3249
2
原创 浅谈深拷贝 内附超好用的深拷贝方法
浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。...
2022-08-15 14:07:54
488
原创 qrcodejs2和vue-qr二维码生成组件使用
npm 中搜索发现好多二维码生成的组件，大概看了下，比较常用的可能是qrcodejs2和vue-qr
2022-07-01 10:56:18
2396
1
原创 css关键词：inherit、initial、overlay、revert、unset解释
写样式好久，这几个属性既陌生又熟悉，可能这几个属性能在关键时刻以四两拨千斤之力解决我们困扰了好久的问题，今天终于腾出时间来系统整理汇总下，如有不对，请多指正~以overflow为例，在控制台样式随机打出overflow时候，浏览器对该属性做了一下提示...
2022-03-04 15:05:36
10108
原创 css 实现div背景上下虚化效果
1. box-shadow属性大部分遇到的场景，边框虚化的话，用box-shadow属性可以轻松解决，例如下面这种效果一行简单的代码即可搞定box-shadow属性设置参数如下：但是如果我只要上下边或者左右需要的效果，使用box-shadow属性有很大的局限了，例如效果图如下（为了演示效果，用了比较显眼的颜色。。。。）2.liner-gradient()函数可能box-shadow使用起来达不到这么理想的效果，我们可以换一个方式，设置div的背景图，利用线性渐变属..
2022-01-21 10:44:01
3194
原创 使用flexible进行可视化大屏适配
关于大屏可视化，大多默认是1920*1080，当然也有更高分辨率，我们做开发适配的时候，可以利用flexible进行屏幕适配工作。针对分辨率，可以进行一个宽高配比，flexible默认将屏幕分割为10份，我们可以自行处理为24份，1920/24=80，所以1rem = 80px，利用rem搭建页面，保证了基本的宽高配比在处理设计图尺寸的时候，以1920*1080举例1920/24=80 1rem = 80px3940/24=80 1rem = 160px ...
2021-12-29 16:52:03
1924
原创 纯css position:sticky 实现表格首行和首列固定
目录1.认识position:sticky2.position:sticky小栗子-实现表格首行和首列固定2.1 效果图2.2 代码1.认识position:sticky我们先来了解一个css属性，position:sticky，粘性布局，粘性布局，下面是MDN的介绍课代表划重点：粘性布局是relation和fixed的结合，必须与top、right、bottom、left的任一属性配合使用才可以。看到这里。感觉功能很强大吧，巴特，然后浏览器的兼容性不是很好。不过..
2021-12-21 09:51:26
1485
原创 css 给一个div设置多张背景图
给div设置背景图，个人习惯用background: url();刚好遇到一个多张背景图，之前没考虑过一个div是不是能设置多张背景图,搜了下，发现background-image就可以，其实后面可以设置多个图片地址，直接放代码吧。.banner{ width: 300px; height: 100px; background-image: url("../img/mobile/banner-bg-right.png"), url(../img/mobile/banner-bg
2021-12-09 15:06:01
3300
原创 js 移动端 日期选择底部弹出插件
先放一张效果图,没用使用框架,H5原生实现插件是我在网上找的,叫Mdate.js这是下载地址https://download.csdn.net/download/jinse29/43001045使用非常简单,看下面代码<input type="text" id="dateSelectorStart" placeholder="选择日期"><script src="../lib/Mdate/iScroll.js"></script><sc
2021-11-16 14:45:19
2615
1
原创 js实现星星打分
先发那个一张效果图用原生js实现一个类似是淘宝评价打分的效果，比较简单，直接上代码0.用到的素材星星图标，选中和未选中两种状态，放在下面????，可以直接下载1.页面内容// 利用ul标签，设置五颗星星,class=light是选中的效果<ul> <li class='light'></li> <li></li> <li></li> <li><
2021-11-16 11:24:52
1441
原创 canvas 实现圆形加背景图
好久不用canvas，昨天有小妹问怎么给一个圆形设置背景图，发现之前会的都遗忘了，顺带重新学习了下canvas，记录下顺手的小知识点。先上效果图图片原图：直接上代码，注释解释的挺详细的~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>canvas画圆并追加背景图</title> <style> #canv..
2021-11-05 14:57:29
1893
原创 数组迭代遍历的方法
js常用的数组遍历方法有很多，尽可能记录比较全，包括ES6新增的方法，介绍下各个特点目录1.forEach()2.map()3.filter()4.some()5.every()6.find()和findIndex()7.reduce()和reduceRight()1.forEach()let arr = ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];// 1.forEach方法arr.forEach((
2021-11-03 15:56:14
508
1
原创 js 两个日期得出时间差
使用方法：获取两个被格式化后的日期字符，得出天数小时分钟的差，如下：timeDifference('2021-10-15 17:30:00', '2021-10-14 15:20:01');==》 返回值：1天2小时9分钟也可以没有时分秒，日期格式比较灵活timeDifference('2021-10-15', '2021-10-14');timeDifference(date1, date2) { date1 = date1.replace(/-/g, '/'); date2 ..
2021-10-22 14:02:06
369
原创 echarts 实现时钟效果
先放一张效果图initRainbowLine() { var datetime = new Date(); var h = datetime.getHours(); var m = datetime.getMinutes(); var s = datetime.getSeconds(); var minutes = m + s / 60; var hours_24 = h + m / 60; var hours_1
2021-10-14 15:11:02
1080
转载 Vuex store 的使用
赚钱好难啊啊啊啊，祝我早日财富自由，开个小卖部~节后第一天，先码篇帖子，只要我够努力，一定会让老板过上想过的生活~Store的代码结构一般由State、Getters、Mutation、Actions这四种组成，也可以理解Store是一个容器，Store里面的状态与单纯的全局变量是不一样的，无法直接改变store中的状态。想要改变store中的状态，只有一个办法，显示地提交mutation。import Vue from 'vue'import Vuex from 'vuex'Vue.use
2021-10-08 14:37:09
416
Unity3D从入门到精通
2018-07-02
JSP技术发展史
2018-05-09
使用Python Scrapy框架编写第一个web爬虫
2018-05-09
Java 科技文献中英文
2018-05-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人