5 暮志未晚Webgl

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 703

116 Three.js实现地形扫描效果

以上是当前效果,实现逻辑后面补上。

2020-09-01 23:18:31

115 Three.js实现地形显示隐藏过渡效果

这个就是此逻辑的效果,实现后面补上。

2020-09-01 23:15:43

114 Three.js实现深度遮挡的下雨特效

以上为当前效果的动图。

2020-09-01 23:11:53

113 Three.js的obb (OrientedboundingBox)方向包围盒的使用

一、包围盒简介:包围盒是一个简单的几何空间,里面包含着复杂形状的物体。为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤(即当包围体碰撞,才进行精确碰撞检测和处理)。包围体类型包括球体、轴对齐包围盒(AABB)、有向包围盒(OBB)、8-DOP以及凸壳。包围盒广泛地应用于碰撞检测,比如射击、点击、相撞等,每一个物体都有自己的包围盒。因为包围盒一般为规则物体,因此用它来代替物体本身进行计算,会比直接用物体本身更加高效和简单。目前广泛应用的是AABB和OBB包围盒,其中AA

2020-08-28 15:18:11

小时候看过一部漫画,忘记名字了。。。

在上学的时候,记得看了一部漫画,小本的那种,和七龙珠一样大的,只记得内容情节,但是没办法记住漫画的名字,所以好久了,都没有找到相应的漫画,所以,将剧情书写出来,希望知道名字的小伙伴,能够将名称分享给我。开头记得是男主的暗恋情人害怕的画面,然后男主的暗恋情人就失踪了(好惨)。然后就是学校里面来了一个转校生,女的,也是女主级别的,然后学校就发生了奇怪事情,学校的一个女生开始袭击别人,在袭击男主的时候,被女主救了下来。后面就是女主带着男主来到了一个洞里(好像),然后告诉男主她是从未来穿越来的,而学校的女生袭击

2020-08-19 22:12:04

112 Three.js postProcess 后处理内置shader包

threejs的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,可以直接使用内置的着色器包,避免了复杂的着色器代码编写。效果示例:实现方式:初始化效果组合器composer=new THREE.EffectComposer(renderer); //该参数是WebGLRenderer对象为了保证组合器的正常使用,必要的引用包,在工程文件下可找到,这四个都是必须的,并且注意引用的顺序,如果顺序不对,浏览器控制台会报错的 <script src="js/pos

2020-07-30 17:28:01

111 three.js下雨进阶版,面只旋转y轴朝向相机

之前实现过,是利用的sprite永久朝向相机的特性实现的效果。但是这种效果对于雪还比较好,如果贴图修改成长条形的雨的话,从上往下看,就会有一种说不出的感觉,不真实。而我也通过修改shader和自己拼接渲染数据,实现了一个比较简单的渲染效果。接下来讲解一下实现逻辑:第一步,创建一个包围盒,来设置范围 const box = new THREE.Box3( new THREE.Vector3(-2000, -2000, -2000), new THREE.Vect

2020-07-22 17:25:26

43 Three.js自定义二维图形THREE.ShapeGeometry

简介通过THREE.ShapeGeometry,你可以调用几个函数来创建自己的图形。我们可以使用线条(line)、曲线(curve)和样条曲线(spline)创建图形的轮廓。还可以使用THREE.Shape对象的holes属性给这个图形打几个孔。创建THREE.ShapeGeometry对象使用THREE.Shape对象绘制完成后,需要创建THREE.ShapeGeometry几何...

2017-12-15 00:03:03

使用canvas实现对图片的旋转

注意点:一定要先变换完成后才可以旋转。默认canvas是原点位置旋转,可以通过对原点偏移进行设置切换旋转中心。封装的方法,第一个传img,必须load完成的,第二个传入一个角度 function createCanvas(img, deg) { const canvas = document.createElement("canvas"); canvas.height = img.height; canvas.width = img.width;

2020-05-26 14:33:00

nodejs读取图片并将二进制数据转换成base64格式

首先,使用nodejs进行数据读取,需要用到nodejs的fs模块进行数据读取:fs.readFile('你的资源路径','binary',function(err,data){ if(err){ console.log(err) }else{ console.log('数据读取成功'); }});读取到当前的文件数据以后,我们还需要...

2020-03-04 14:46:12

解决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

查看更多

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