<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>three.js抽象液体背景特效 - 【更多源码：www.96flw.com】</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container"></div>
<script src="js/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
#extension GL_OES_standard_derivatives : enable
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
//参考: http://glslsandbox.com/e#57848.0
void main( void ){
vec2 uv = ( gl_FragCoord.xy / resolution.xy )*4.0;
vec2 uv0=uv;
float i0=2.2;
float i1=1.95;
float i2=1.5;
vec2 i4=vec2(0.0,0.0);
for(int s=0;s<10;s++){
vec2 r;
r=vec2(cos(uv.y*i0-i4.y+time/i1),sin(uv.x*i0+i4.x+time/i1))/i2;
r+=vec2(-r.y,r.x)*0.2;
uv.xy+=r;
i0*=1.93;
i1*=1.25;
i2*=1.7;
i4+=r.xy*1.0+0.5*time*i1;
}
float r=cos(uv.x-time)*0.5+0.2;
float b=sin(uv.y+time)*0.5-1.;
float g=sin((sqrt(uv.x*uv.x+uv.y*uv.y)+time))*0.5-0.1;
vec3 c=vec3(r,g,b);
gl_FragColor = vec4(c,1.0);
}
</script>
<script src="js/script.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
