HTML5+WebGL实现的3D星云动画特效

这是一款基于HTML5和WebGL实现的3D星云动画特效案例。3D星云的效果类似星球爆炸。本文介绍它的实现和制作代码。

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

本文用到了HTML5、Canvas、WebGL、CSS3等知识点。整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

整个运行效果如下所示:

HTML5+WebGL实现的3D星云动画特效

HTML5+WebGL实现的3D星云动画特效

主要实现代码如下:

 <!DOCTYPE html> <html lang="en" > 
 <head>   <meta charset="UTF-8">   
 <title>web前端中文站:www.lisa33xiaoq.net</title>   
 <meta charset="utf-8">  
 <link rel="stylesheet" href="css/style.css">  
 <style type="text/css">  
 .btn_style{   
 position:absolute;   
 width:100%;   
 text-align:center;   
 border-radius:5px;   
 right:10px;font-family:Arial;   
 color:#33c;outline:none;background:none;   
 border:none;text-decoration:underline;   
 font-size:16px;cursor:pointer;  }  
 </style> 
 </head> 
 <body> 
 <script id='vShader' type='x-vertex/x-shader'>   
 uniform float size;   
 uniform float t;   
 uniform float z;   
 uniform float pixelRatio;   
 varying vec3 vPosition;   
 varying vec3 mPosition;   
 varying float gas;   
 float a,b=0.;    
 void main(){     
 vPosition=position;     
 a=length(position);     
 if(t>0.)b=max(0.,(cos(a/20.-t*.02)-.99)*3./a);     
 if(z>0.)b=max(0.,cos(a/40.-z*.01+2.));     
 mPosition=position*(1.+b*4.);     
 vec4 mvPosition=modelViewMatrix*vec4(mPosition,1.);     
 gl_Position=mvPosition*projectionMatrix;     
 gas=max(.0,sin(-a/20.));     
 gl_PointSize=pixelRatio*size*(1.+gas*2.)/length(mvPosition.xyz);   } 
 </script> 
 <script id='fShader' type='x-fragment/x-shader'>   
 uniform float z;   
 varying vec3 vPosition;   
 varying vec3 mPosition;   
 varying float gas;    
 void main(){     
 float a=distance(mPosition,vPosition);     
 if(a>0.)a=1.;     
 float b=max(.32,.0065*length(vPosition));     
 float c=distance(gl_PointCoord,vec2(.5));     
 float starlook=-(c-.5)*1.2*gas;      
 float gaslook=(1.-gas)/(c*10.);     
 float texture=starlook+gaslook;              
 gl_FragColor=vec4(.32,.28,b,1.)*texture*(1.-a*.35);     
 if(z>0.)gl_FragColor*=cos(1.57*z/322.)*(1.-.001*length(mPosition));   } 
 </script> 
 <button Class="btn_style"></button> 
 <script src="js/stat.js" defer="defer" async="async"></script> 
 <script src='js/three.min.js'></script> 
 <script src='js/TweenMax.min.js'></script> 
 <script  src="js/index.js"></script> 
 </body> 
 </html>

相关CSS代码和JavaScript 代码我就不贴了,需要源码的可以到我共享的百度网盘下载链接

抱歉,只有对本文发表过评论才能阅读隐藏内容。

 

本文借助了three.min.js,TweenMax.min.js等相关js库。

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到

(5)条精彩评论:
  1. bills
    效果很COOL
    bills2018-12-24 11:41 回复
  2. 世俗骑士
    想做相关的东西,借来看看
    世俗骑士2018-11-14 15:53 回复
  3. phil
    333
    phil2018-07-06 10:41 回复
  4. <a href='http://www.lisashopmall.com' rel='external nofollow' class='url'>lisa</a>
    链接在哪??
    lisa2018-03-16 19:59 回复
    • web前端中文站
      评论后刷新就可以看到了 :grin:
      web前端中文站2018-08-20 22:11 回复