这是一款基于HTML5和WebGL实现的3D星云动画特效案例。3D星云的效果类似星球爆炸。本文介绍它的实现和制作代码。
本文用到了HTML5、Canvas、WebGL、CSS3等知识点。整个画面模拟了一个星系的外观，比如模拟了太阳系，有很多小行星围绕着星系中心旋转，星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成，同时我们还可以拖拽鼠标从不同视角观看星云，非常大气。
整个运行效果如下所示：
主要实现代码如下：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>：www.xttblog.com</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 代码我就不贴了，需要源码的可以到我共享的百度网盘下载链接：https://pan.baidu.com/s/1mhRqzI4 密码：70yu。本文借助了three.min.js，TweenMax.min.js等相关js库。
： » HTML5+WebGL实现的3D星云动画特效
原创文章，作者：kirin，如若转载，请注明出处：https://blog.ytso.com/251336.html