标签归档:WebGL

HTML5 WebGL 3D樱花飘落动画

今天要给大家分享一个非常炫酷的HTML5 3D樱花飘落动画,基于WebGL技术。每一片樱花落叶都是在canvas上绘制而成,而且樱花叶片也会随着不同的角度发出不同的色泽光芒,总体呈现出3D立体的视觉效果。整个樱花飘落动画非常大气,如花雨一般,让人倍感震撼。另外,整个动画还可以通过按钮控制开启和暂停。

html5-webgl-sakura-animation

在线演示源码下载

WebGL和Canvas可视化3D飞机模型结构 可360度预览

今天给大家分享一个基于HTML5 Canavs和WebGL的3D模型结构,它是一个可360度预览的可视化3D飞机模型结构。我们可以通过鼠标拖拽自定义不同的角度对飞机模型进行观察,也可以点击按钮对飞机的具体部位进行详细观察。同时,我们也可以通过鼠标滚轮来缩放飞机的大小。

webgl-svg-3d-plain

在线演示源码下载

基于HTML5 WebGL的3D星云动画特效

今天我们给大家分享一个基于HTML5 Canvas的星云动画特效,整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

html5-webgl-galaxy

在线演示源码下载

HTML5 WebGL绚丽五彩流体模拟动画

WebGL是目前最为流行的3D绘图协议,我们之前也分享过一款很酷的HTML5 WebGL水波模拟动画HTML5 WebGL粒子爆炸动画。这次我们要分享一款基于HTML5 WebGL的绚丽五彩流体模拟动画,我们可以在画布上点击鼠标,拖动鼠标后释放,即可看到不同色彩的流体从产生到消失的动画特效,看上去非常绚丽。

html5-webgl-fluid-animation

在线演示源码下载

HTML5 WebGL粒子爆炸动画

之前我们分享过几款非常炫酷的HTML5粒子动画,比如这款HTML5像素粉碎图片动画HTML5 Canvas彩色像素进度条动画,都是利用了HTML5的粒子渲染特性实现。今天我们要分享另外一款基于HTML5和WebGL的粒子爆炸动画特效,效果非常令人震撼。

html5-webgl-particle-animation

在线演示源码下载

HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙

HTML5特效中,和水波相关的我们已经分享过两款:HTML5 WebGL水面水波荡漾特效HTML5水波荡漾动画特效。这又是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果。

html5-liquid-wave

在线演示源码下载

HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真

之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。

html5-webgl-water-effect

在线演示源码下载