three打造光晕变换动画效果代码
代码语言:html
所属分类:动画
代码描述:three打造光晕变换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background-color: #000; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="container"></div> <script id="vertex" type="x-shader/x-vertex"> void main() { gl_Position = vec4(position, 1.0); } </script> <script id="fragment" type="x-shader/x-vertex"> precision highp float; uniform vec2 u_resolution; uniform float u_time; void main() { vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy; uv += vec2(0.65, 0.5); // Centerings float c = distance(uv, vec2(0.5)); float a = u_time*2.5; vec3 light = vec3(0.5-acos(sin(c*4.+a)), 0.5-acos(sin(c*8.+a)), 0.0); vec3 source = mix(light, vec3(5.), .5-c); vec3 hue = mix(vec3(1.0, 0.41, 0.71), vec3(0.0, 1.0, 1.0), (uv.y-sin(u_time))*0.5); vec3 color = mix(source, hue, uv.x-0.3); gl_FragColor = vec4(color, 1.0); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script> <script> /* * MORPHING LIGHT * Shader Exp LII. * * Follow my shader experiments here: * https://github.com/ilithya/anydayshaders * https://twitter.com/hashtag/anydayshaders * https://www.instagram.com/explore/tags.........完整代码请登录后点击上方下载按钮下载查看
网友评论0