- 博客(121)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 记录一次threejs内存泄露问题排查过程
观察了一段时间，发现JS head size并没有明显的增长，但是DOM Nodes、Js event listeners随着每次组件的销毁、组件的重新挂载一直呈现增加的趋势。其次我观察到DOM Nodes、Js event listeners在1分钟的组件不断销毁和挂载的过程中，呈现阶梯式的增长，且增长的幅度几乎一致，如下图。首先我们看一下JS head size，观察到在1分钟的组件不断销毁和挂载的过程中，是收敛的，组件挂载是增长，组件卸载时释放，是正常现象。注意我框出来的地方。
2024-04-03 17:49:21
953
原创 webgl和threejs的坐标系以及坐标转换
如何将一个世界坐标下的模型，绘制到屏幕上呢？屏幕变换*标准设备变换*视图变换*模型变换*模型坐标。
2024-01-22 13:24:24
1284
原创 threejs在透视相机模式下，绘制像素大小固定的元素
后来意识到sizeAttenuation: false 只是设置了相机的深度跟Sprite没有关系，但是透视相机的fov还是会影响到sprite的大小的。使Sprite大小不随相机的深度而衰减。但是呢，我们如果我们的fov不是固定的怎么办呢，只需要加上如下配置就可以动态的根据fov去获得这个scale了。找到了这个fov，我们设计相机的fov为这个值，现在我们去设置sprite的scale去改变Sprite的大小。1. 第一步，我们找到一个fov值，在这个值下，我们看到的图标是占满屏幕的。
2024-01-04 17:42:30
787
原创 threejs中修改鼠标cursor不生效的问题修复
引入了dragcontrols，查看dragControls的代码，可以看到代码中有对cursor进行修改。我们在dragcontrols中监听hoveron，在回调中修改鼠标的cursor。threejs中修改canvas的鼠标cursor为自定义的图标不生效。当鼠标hover一个元素时，cursor为自定义的图标。第一次修改如下，生效。
2023-12-22 18:43:02
517
原创 threejs ShapeGeometry 自定义贴图的uv坐标
由于一些原因，要绘制一个长方形，但是这个长方形并不是 PlaneGeometry，而是一个ShapeGeometry。但是同样的贴图，同样的形状，贴图贴在PlaneGeometry上时可以正常显示，但是贴在ShapeGeometry中却不可以正常显示。我们看到，uv是这样的，和他的顶点坐标是一致的，但是实际上，我们希望uv的对应关系和PlaneGeometry是一致的。PlaneGeometry默认顶点坐标和uv坐标对应关系如下，其中点1，2，3，4为geometry的vertex顺序。
2023-12-13 19:44:55
781
原创 threejs 使用png的texture时，显示的颜色和图片颜色不一致
【代码】threejs 使用png的texture时，显示的颜色和图片颜色不一致。
2023-11-09 18:16:56
329
原创 threejs BufferGeometry更新了顶点后，可能导致部分位置拾取失效
通过点击线上的点，去更新线的BufferGeometry，导致，只能在更新顶点坐标之前的线的区域上才能被拾取到。
2023-11-07 16:44:59
178
原创 threejs 的 Dragcontrols 拾取不准的问题
绘制一些点、线、面后，拖拽时选中不精确，导致明明选中的是这个点，但是拖拽应用在相近可拖拽元素上。解决方案：提高three拾取的精确度。
2023-10-25 10:49:19
131
原创 react 按住ctrl键，点击时会出现菜单的问题修复
问题二：按住ctrl键点击时出现菜单图层，而且在mousedown或者mouseup事件中阻止默认行为仍出现菜单图层。问题一：按住ctrl键后，点击时不触发click事件，只触发 mousedown和mouseup事件。问题描述：我需要按住crtl键，然后鼠标点击后做一些逻辑操作，但是出现如下问题。问题一解决：在mouseup时去做时间处理。
2023-10-07 14:43:59
84
原创 threejs的DragControls当click时会触发dragstart和dragend问题解决
threejs的DragControls 拖拽问题处理
2023-09-26 16:13:07
248
原创 three mesh.clone() 问题
mesh.clone()获取的新模型和原来的模型是共享材质的几何体的，所以代码改动如下。出现问题：每个mesh的颜色都是一样的，并没有根据color动态修改。
2023-06-13 17:05:03
98
原创 网页性能优化和优化目标
一 Network 中的两个指标DOMContentLoaded:HTML 文档被完全加载和解析完成的时间；如果希望 DOM 在用户请求页面后尽可能快地解析，可以将JS文件异步化Load：总资源的加载时间，适当的拆包，资源的压缩等可以减小Load的时间二、Network瀑布图点击其中一个请求，查看其中的各项数据Queueing 请求排队时间 DNS Lookup DNS查找时间 Initial connection TCP建立连接的时间 SSL 如果为https...
2021-11-05 16:53:37
262
原创 js用类实现一个最小堆数据结构
一、堆插入元素 删除堆顶 获取某个元素的父元素的下标 获取某个父元素的左孩子节点的下标 获取某个父元素的右孩子节点的下标 获取堆的大小 获取堆顶二、实现class MinHeap { constructor() { // 堆以数组表示 this.heap = [] } // 插入操作 insert(val) { this.heap.push(val) this.moveUp(this.heap.length - 1) } //
2021-10-30 14:33:52
148
原创 前端盲水印
需求给图片加上看不到的水印，当通过其他的方式可以清楚的看到图片中暗藏的水印，以此方式追溯到泄密的人解决办法利用canvas实现图片和水印的绘制，具体过程如下：新建canvas，宽度和高度取要加水印的图片的宽度和高度 在该canvas上绘制要添加的水印文字，文字透明度设置要特别的低，但是当水印透明度小于等于0.003,不可恢复到水印。所以我们设置透明度要不得低于0.003 将该canvas转成img（为什么canvas要转成img?之前遇到canvas在移动端无法长按出现保存、转发等操作）
2021-01-08 15:54:53
759
原创 浏览器http缓存问题
一、什么是浏览器缓存浏览器将请求过的资源（html、js、css、img）等，根据缓存机制，拷贝一份副本存储在浏览器的内存或者磁盘上。如果下一次请求的url相同时则根据缓存机制决定是读取内存或者磁盘上的数据还是去服务器请求资源文件缓存通过url来判断，如果url不同则是新的资源。所以我们开发时前端会将一些js、css等文件在后面加hash值来避免资源更新时浏览器仍读取缓存文件，导致需要刷新才能获取新的资源的问题这种做法虽然解决了js、css等文件的更新，但是对于index.html这样的文件由于
2021-01-07 19:01:06
319
原创 解决html2canvas截图空白的问题
问题：当出现滚动条时截图会有空白解决办法：获取需要截图的图片的绝对定位，截图时设置精确的x,yhtml2canvas(that.$refs.imageDom, { // that.$refs.imageDom为需要截图的img元素 getActuralPosition为获取绝对位置，之前的文章有写过 x: that.getActuralPosition(that.$refs.imageDom).left, y: that.getActuralPosition(that.$refs.ima
2020-10-16 19:06:09
7376
3
转载 获取精确的滚动条的宽度
// 获取滚动条的宽度getScrollWidth() { // 创建一个div元素 let noScroll, scroll, oDiv = document.createElement('DIV'); oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'; // 没有滚动条的clientWidth clientWidth为content+p.
2020-10-16 18:52:08
1455
原创 canvas在移动端长按保存图片
一、背景同一个网页，canvas在PC端可以右键下载，但是在移动端长按时却没反应。现在要求在移动端支持长按图片下载二、实现方式画布(canvas)对象有一个非常有用的方法toDataURL()，这个方法能把画布里的图案转变成base64编码格式的png，然后返回Data URL数据。利用这个我们可以将转成一个image/png格式的图片// 获取所有的canvas图片文件let canvasDom = document.getElementsByTagName('canvas')for
2020-09-24 12:00:24
2669
1
转载 获取元素在页面的位置
一、基本须知一张网页的全部面积就是它的大小，通常情况下由css决定。例如我们给网页设置3000*2000的大小，则网页大小为3000*2000，即使在浏览器中我们需要滚动条才能将这个网站看完整 浏览器窗口的大小（视口）指的是浏览器中看到的那部分网页的面积，例如当我们缩小浏览器的大小时，那视口也会减小 当网页可以在浏览器中全部展示时，不需要滚动条时，则浏览器的适口和网页的大小相同二、获取浏览器窗口的宽和高网页上每个元素都有clientWidth和clientHeight属性，该属性指元素的内容加
2020-09-23 14:26:41
3057
1
原创 用队列实现改良版的击鼓传花
游戏规则：几个朋友一起玩一个游戏, 围成一圈, 开始数数（数数时数字都是挨着的，第一个人数1，之后的人数2）, 数到某个数字的人自动淘汰。淘汰的人后面再从1开始数，重复上面的游戏，直到就剩下一个人，请问剩下了谁这个可以用到对列的数据结构，整个队伍放在一个队列中，当某一个人数完之后就把他放在队列的末尾function f(nameList, num) { while (nameList.length > 1) { var queue = nameList; //内层循环
2020-07-07 17:21:16
228
原创 格式化日期的一个方法（可以选择日期的格式化）
export function formatDate(date, reg) { date = new Date(date); //利用分组捕获替换年的部分 if (/(y+)/.test(reg)) { reg = reg.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } //处理月日时分秒的方法同样，只是这里需要补零 let o = { 'M+': date..
2020-06-29 12:30:38
201
原创 斐波那契数列的几种实现方案
一、普通递归function fib(n) { if (n < 2) { return 1; } else { return fib(n - 1) + fib(n - 2) } }二、尾递归
2020-06-13 19:45:54
164
原创 数组去重的几种方案
一、使用Set构造函数Array.prototype.myUniq = function () { var _this = this; _this = Array.from(new Set(_this)); return _this}二、indexOfArray.prototype.myUniq = function () { var _this = this; for (var i = 0; i < _this.length; i++) {
2020-06-13 16:21:06
150
原创 数组扁平化的几种方法
一、ES6新方法 Array.prototype.flat方法function myFlat(arr) { arr = arr.flat(Infinity) //扁平化的维度，可以传入其它数字，如1、2 return arr}二、数组的 Array.prototype.toString方法function myFlat(arr) { arr = arr.toString().split(',').map((item) => { return p
2020-06-13 15:13:02
178
原创 用柯里化思想手写bind方法
模拟bind方法Function.prototype.mybind = function () { //保存原函数，就是this var self = this; //取第一个参数为新的this var context = [].shift.call(arguments); //取剩下的参数args var args = [].slice.ca...
2020-05-08 16:59:42
138
原创 call bind apply
callfn.call(obj)执行过程首先原型上的call方法执行，在执行call方法的时候，让fn方法中的this变成第一个参数值obj，然后再把fn这个函数执行重写简易的call方法Function.prototype.mycall = function (context) { //1. 让fn中this关键字变为context eval(this.toSt...
2020-04-24 14:34:35
114
原创 js内存释放和作用域销毁
如何查找上级作用域当前函数是在哪个作用域下定义的，那么它的上级作用域就是谁var num = 12;function f() { var num = 120; return function () { console.log(num) }}var fn = f();fn();//120(function ...
2020-04-23 10:28:17
535
原创 预解释（变量提升）
基本概念在当前作用域中，js代码执行之前，浏览器首先会默认把所有带var和function关键字的及进行提前声明或者定义；理解声明和定义 var num = 12; 申明：var num; 定义： num= 12对于带var和function关键字的预解释操作是不一样的 var：在预解释的时候只是提前声明 function：在预解...
2020-04-22 15:51:55
160
原创 js函数三种角色，函数存储与执行的过程
函数的预解释function f(a,b){ var total = a+b; console.log(total)}上面这个函数，首先会进行预解释，函数的预解释是声明+定义的；函数的执行当函数执行时首先会形成一个私有作用域，这个作用域是栈内存，然后按以下步骤执行：1）有形参则给形参赋值2）私有作用域预解释3）在私有作用域中将函数代码从上到下执行...
2020-04-22 14:48:39
621
原创 js常用的六种继承方式
一、原型链继承实现方法：设置B.prototype = new A即可（其中B为子类，A为父类）特点：它把父类中的私有属性和共有属性都继承到了子类的原型链上（new A得到一个实例对象，该对象具有构造函数A的私有和公有属性）核心：原型链继承方式并不是将父类的所有属性克隆一份给了子类，而是在父类和子类之间建立了原型链的连接，如果子类需要使用父类的方法，则通过原型链一级一级的向上查找即可...
2020-04-02 16:15:30
333
原创 css常用的五个单位
css中常用的单位由px、em、rem、vh、vwpx（像素）px是绝对单位，一个像素代表一个点。如100px*100px的正方形，则是由宽度100个点，长度100个点组成的平面emem是相对单位，它的参考对象是它的父级的字号，如父级字号是16px，如果设置元素的字号大小为2em的话，元素的字号大小则为32pxremrem由页面的根元素html的字号决定，浏览器一般默认的字号为1...
2020-03-26 17:29:35
818
原创 css实现Ant Design中菊花图loading效果
一、布局<body> <div> <span> <i></i><i></i><i></i><i></i> </span> </div></body>...
2020-03-26 16:11:29
994
空空如也
javascript快速排序提示‘too much recursion’
2018-10-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人