写代码可以很有趣

webgl

blog

结合three.js的平滑滚动效果

前面我们介绍过基于css的视差滚动效果,这次行歌教大家如何用js在H5页面中实现更加酷炫的视差特效,先来看一下我们这次要实现的案例。 在这个效果中我们用到了2个技术,分别是平滑滚动和three.js的shader编程。 平滑滚动 ...
cover

Three.js图像波动特效

近些年,我们经常会在一些网站上看到些炫酷的图片特效,这些效果大部分都是用WEBGL技术实现的, 借助shader我们可以实现css无法做到的炫酷视觉效果 。随着这门技术的兼容性越来越好,普及率越来越高,掌握它必将为你工作中的加分项。还在等什么?一起来学习下吧。 ...
cover

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

可能每个人的童年都有个时空穿梭梦,印象深刻的是第一次看《机器猫》,主角康夫卧室的抽屉就是时空隧道的入口,跳进隧道的那一刻,时间浮光掠影般从身边流过,仿佛进入了异世界。 这次我们用three.js实现一个3d隧道穿梭效果,打开异世界的大门。 ...
cover

基于WEBGL的文字飞溅特效

今年的梅雨很敬业,已经折腾了一个月,仍然没有要下班的意思,经常是前一秒大太阳,下一秒被浇成落汤鸡,大家管这叫暴力梅。 为了蹭下暴力梅的热度,今天给大家带来一阵文字雨,先来看下效果。 ...
01

基于three.js实现一个粒子系统(二)

本教程的第一部分介绍了公告牌粒子技术的基本概念,并基于THREE.Sprite实现了一个简单的粒子场景。这次我会再用一个简单的例子,让你对对粒子的速度,加速度等物理特性有进一步的认识,这将是实现第三部分粒子系统的基础。 ...