自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(3)
  • 收藏
  • 关注

原创 Three.js图像波动特效

近些年,我们经常会在一些网站上看到些炫酷的图片特效,这些效果大部分都是用WEBGL技术实现的, 借助shader我们可以实现css无法做到的炫酷视觉效果 。随着这门技术的兼容性越来越好,普及率越来越高,掌握它必将为你工作中的加分项。还在等什么?一起来学习下吧。这次我们用three.js来实现一个图像波动特效,剖析其实现原理,最终可以举一反三,变成自己的东西,先来看效果。图片变形特效演示实现图片全屏显示首先我们要将图片等比例撑满窗口,并可以适应浏览器动态缩放。要实现这个效果...

2020-07-27 13:42:14 1275

原创 Three.js无限3D时空穿梭特效

可能每个人的童年都有个时空穿梭梦,印象深刻的是第一次看《机器猫》,主角康夫卧室的抽屉就是时空隧道的入口,跳进隧道的那一刻,时间浮光掠影般从身边流过,仿佛进入了异世界。这次我们用three.js实现一个3d隧道穿梭效果,打开异世界的大门。 它也可以是一个跑酷游戏原型,又或者是3D空间导航,具体怎么应用由你来决定,先来看下效果。无限循环时空隧道无限循环的隧道实际上是一个首尾无缝相连的管道,你可以将它的形状想象成一个甜甜圈。我们只要将摄像机放置在这个管道内部,并沿着管道路径运动就能实现这..

2020-07-25 18:31:51 1604

原创 基于three.js实现一个粒子系统(三)

在此系列教程的前两部分,我们了解了实现一个粒子系统需要具备的基础知识。这次我们会利用这些知识来实现一个简单的粒子系统,并把这个系统应用到自己的项目中去。粒子系统演示之星轨为实现粒子系统,我们已经不需要什么新知识,我们需要做的是在粒子中添加更多的物理参数,并合理地组织代码来实现系统的复用性,需要添加的物理参数可以参考文尾的源代码,我们这里着重介绍下代码的组织。为了实现粒子系统ParticleSystem的复用,我引入了发射器Emitter的概念,每一种粒子特效诸如:雪花,火焰,爆炸等被实现为发射器的一

2020-05-23 20:47:28 1946 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除