HTML5 WebGL酷炫的星云背景動畫特效



89 353 118



特效描述:HTML5 WebGL酷炫的 星云背景動畫特效,HTML5 基于WebGL酷炫3D旋轉的星云動畫特效

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<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>

3. HTML代碼

<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;//modified position
  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 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;'></button>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 旋轉翻轉 旋轉 翻轉 圖片拖動 圖片拖拽 圖片翻轉 圖片旋轉 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表