• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JAVA web前端中文站 2年前 (2017-11-29) 3451次浏览 已收录 5个评论

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

更多精彩内容请看 web 前端中文站
http://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 代码我就不贴了,需要源码的可以到我共享的百度网盘下载链接


百度网盘下载? ? ?密码:rgru

 

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

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5+WebGL 实现的 3D 星云动画特效
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 效果很COOL
    bills2018-12-24 11:41 回复
  2. 想做相关的东西,借来看看
    世俗骑士2018-11-14 15:53 回复
  3. 333
    phil2018-07-06 10:41 回复
  4. 链接在哪??
    lisa2018-03-16 19:59 回复