5 专注前端30年

尚未进行身份认证

暂无相关简介

等级
TA的排名 784

解决webpack打包ie报错不兼容的问题,promise 未定义

用ie打开webpack打包好的代码突然报这个错,ie11也出现这个问题。最后通过百度查了一下,是因为方法转换异步的问题,没有保证所有的不兼容对象都转换成功,所以,通过查询找到了别的朋友写的解决方案:通过增加babel-polyfill 模块来实现全局处理通过npm安装当前模块:npm install --save babel-polyfill在源码的顶部引入当前模块,确保它在任何其他代...

2020-01-17 17:44:05

兼容最新版浏览器的陀螺仪的心得

记录一下当前时间,当前时间为2020年1月16号。当前版本的移动端浏览器的权限都更新了,首先说明一下安卓系统的浏览器:如果你发现你的浏览器陀螺仪代码没有改什么,但是陀螺仪确不管用了,那肯定是你用的协议出了问题,在当前版本的浏览器中,需要使用https协议才可以开启陀螺仪,不安全的https已经不兼容了。另外再说一下ios13,在经历了悲催的ios12需要手动去设置中设置允许浏览器使用陀螺仪,...

2020-01-16 15:00:58

TS入门笔记

一下记录了一下TS相关入门的笔记记录,作为备忘录TS中定义基本数据类型:布尔值、数值、字符串、null、undefined以及ES6中的symbol。例子:let bool: boolean = false; //布尔类型let num: number = 1; //数字类型let str: string = '字符串类型'; //字符串类型let u: undefined = und...

2020-01-14 18:19:03

使用js实现拖动缓动的效果

话不多说,先上效果,一个体验非常好的拖拽缓动的效果,让页面提升一个档次。这个效果看似很简单,到也困惑了很长时间,为什么别人写出来的拖拽体验为什么这么好?直到我自己实现了以后,才发现,原来我想的实现方式不对。接下来,我通过简短的几句话,来提供这个功能的实现思路。首先,我们要明白,我们鼠标拖拽是在一个2d平面上拖拽2d平面只有x轴和y轴,而且获取的拖拽值也是基于平面的像素获取的。所以,我们第...

2020-01-10 17:59:45

使用css3 实现3d正反翻转特效

首先,上传一下最终效果:接下来,我们按照结构来实现当前的demo效果:第一步,创建一个触发hover效果的容器,并设置3d距离:<!--item 可以触发翻转的区域--><div class="item">...</div>设置.item的perspective属性距离,就是3d效果的z轴距离,浏览器默认就xy两个轴向,css3增加了z轴,就是...

2020-01-09 14:39:00

使用canvas实现对图片的翻转

要通过canvas实现对图片沿x轴或者颜色y轴实现翻转,我们可以通过canvas2d的接口进行实现。使用到的api:使用getContext来获取canvas2d对象使用 canvas2d对象的scale方法进行翻转由于翻转的xy轴使用的是原点,也就是canvas的左上角的位置的轴,所以,我们还需要使用到translate方法,来移动将翻转后的图片移动到canvas的显示区域逻辑说完了,...

2019-12-10 23:37:19

书写一个自运行函数的坑

抛出问题:今天群友提出了一个问题,看题: let b = 1; (function b() { b = 9; console.log(b) })();请问,b打印的值是什么?根据经验来说,大家明眼一看,肯定感觉打印的值是9,因为在上面就赋值了,打印的肯定就是9。可惜事与愿违,这个打印的竟然是函数function b。当场直接蒙蔽,下面...

2019-11-15 16:51:03

canvas 获取鼠标位置是否处于图形中

实现这个思路的方法就是使用canvas对象的context的2d对象的方法:isPointInPath我们可以通过这个方法判断绘制的图形,以及自己通过随机的点绘制的2d图形以下是demo的源码:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> &lt...

2019-10-23 15:05:19

通过经纬度获取OpenstreetMap,谷歌地图,高德地图的切片

直接复制代码放到本地运行即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>根据经纬度坐标获取对应的切片算法</title></head><script> function getP...

2019-10-12 11:52:39

Layabox 2 使用其它编辑器开发layabox2d

由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用教程,无法进行配置。接着,我就通过创建一个新项目,将新项目文件夹内的bin文件夹转移过来,来实现的效果。这种实现方式有可能不是很好,但是绝对可用,而且还有代码提示...

2019-08-14 23:11:27

Layabox 1 layabox的项目文件以及项目配置

本人使用的是layabox ide 2.1版本。首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。.laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。比如文件夹内的compile.js中33行就是设置项目文件的主入口。bin文件夹内是项目输出的文件,在编辑器上运行时,其实就是运行的bin文件夹下的html文件。laya文件夹存放的是项目的资源文件...

2019-08-12 22:29:22

一种基于边缘Bloom的溶解shader的实现

此文章为转载:作者:胡说ba道原文:https://blog.csdn.net/qq_37925032/article/details/80146256溶解效果在游戏中十分常见,然而普通的溶解效果往往并不好看,本文将实现一种基于边缘bloom的溶解效果的实现先上最终效果图整体思路:将溶解的边缘提取出来,bloom之后再与原图像混合。首先我们实现一下最基础的溶解,下面给出关键代码:...

2019-07-25 10:49:57

layabox 节点查找

layabox也是一个树形结构。如果一个组件类绑定到节点上面,可以通过 this.owner来获取绑定的节点。获取一个节点的父亲节点,则使用 this.owner.parent获取节点所在的场景 this.owner.scene根据名称查找孩子节点,则使用 this.owner.getChildByName(“孩子name”);通过索引查找孩子节点,则可以使用 this.owner....

2019-07-08 23:18:14

本人的项目案例

bim案例:http://www.wjceo.com/examples/demo/bim/街景案例:http://www.wjceo.com/examples/demo/streetscape/移动端展示效果:http://www.wjceo.com/examples/demo/3dartTest/ (点击建筑大门可以移动到建筑内部)个人普通案例网站:http://www.wjceo.com...

2019-07-08 14:49:40

矩阵的逆矩阵 和 转置矩阵

这几天用到了逆矩阵,就在这里总结一下逆矩阵和转置矩阵。逆矩阵逆矩阵就是一个矩阵的逆向。比如一个点乘以一个矩阵后得到了一个新的点的位置,如果想通过这个点再获得矩阵转换前的位置,那我们就需要乘以这个矩阵的逆矩阵。在Three.js里面,我们可以通过newTHREE.Matrix4().getInverse(matrix4)方法来获得一个矩阵的逆矩阵。具有的性质:可逆矩阵一定是方阵。如果矩...

2019-06-17 13:59:25

cesium获取某个位置垂直于当前地表的垂直坐标系

我们可以通过Cesium.Transforms对象来获取到相关的方法:Cesium.Transforms.eastNorthUpToFixedFrame常用的有Cesium.Transforms.eastNorthUpToFixedFrame这个方法,这个方法支持通过传入一个中心点,然后获取到中心点的正东正北,和地表法线的方向:x轴指向当前点的东方向。y轴指向当前点的北方向。z轴在椭圆体...

2019-06-14 11:24:52

CESIUM获取世界坐标转为屏幕坐标

我们可以通过场景对象scene的cartesianToCanvasCoordinates 方法进行获取。方法将返回转换成在画布的位置坐标。这个方法支持传入两个值,一个是需要获取坐标的世界三维坐标。第二个值为可选,可以指定一个Cartesian2对象,cesium将自动填充对象内的值为画布上的坐标。例子:var scene = widget.scene;var ellipsoid = sc...

2019-06-14 09:58:27

向量的基础

2019-06-13 09:53:17

使用C++或者js求空间点到直线垂足坐标的解算方法

假设空间某点O的坐标为(Xo,Yo,Zo),空间某条直线上两点A和B的坐标为:(X1,Y1,Z1),(X2,Y2,Z2),设点O在直线AB上的垂足为点N,坐标为(Xn,Yn,Zn)。点N坐标解算过程如下:首先求出下列向量:由向量垂直关系,两个向量如果垂直,那么两个向量的点积(点乘,向量积)则为0,可得出。上式记为(1)式。点N在直线AB上,根据向量共线定理: (2)由(2)得: ...

2019-06-12 18:51:51

110 THREE.JS 获取一个点,沿坐标轴的偏转

如果让我们自己算,需要通过三角函数自己求。好在,Three.js封装了自己的数学库,里面有相关的对象,叫Spherical类。这是一个虚拟的球坐标类,我们可以定义一个点通过此类获取到当前的偏转弧度。实例化此类需要三个值:radius phi theta 。radius代表当前点距离原点的距离。phi代表从Y轴正方向沿X轴的旋转角度。theta代表从Z轴正方向逆时针沿Y轴旋转的角度。这三...

2019-05-04 03:51:12

查看更多

CSDN身份
  • 博客专家
勋章 我的勋章
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。