three.js基于html5canvas绘制液态抽象背景动画特效.zip资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

版权申诉

实用代码

实用插件

132 浏览量 2023-09-27 22:18:40 上传评论收藏 133KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

three.js基于html5 canvas绘制液态抽象背景动画特效.zip （4个子文件）

three.min.js 517KB

script.js 2KB

css

style.css 54B

index.html 1KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>three.js基于html5 canvas绘制液态抽象背景动画特效</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> </body> </html>

评论收藏

内容反馈

版权申诉