three实现变色粒子在容器中碰撞动画效果代码
代码语言:html
所属分类:粒子
代码描述:three实现变色粒子在容器中碰撞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700"); * { margin: 0; padding: 0; } html, body { overflow: hidden; font-family: Inconsolata, sans-serif; color: #eee; } h1 { position: relative; z-index: 1; padding: 1rem; font-weight: 400; font-size: 1rem; } .webgl { position: fixed; top: 0; left: 0; outline: none; } </style> </head> <body > <canvas class="webgl"></canvas> <script type="x-shader/x-vertex" id="vertexShader"> uniform mat4 projectionMatrix; uniform mat4 viewMatrix; uniform mat4 modelMatrix; attribute vec3 position; attribute vec2 uv; varying vec2 vUv; void main() { vec4 pos=vec4(position,1.); vec4 modelPosition=modelMatrix*vec4(position,1.); vec4 viewPosition=viewMatrix*modelPosition; vec4 projectedPosition=projectionMatrix*viewPosition; vUv=uv; gl_Position=projectedPosition; } </script> <script type="x-shader/x-fragment" id="fragmentShader"> precision mediump float; uniform float u_time; varying vec2 vUv; #define PI 3.141592653589 #define TWO_PI 6.28318530718 float rand(float x) { return fract(sin(x * 1.14529) * 43758.5453123); } vec3 light_point(vec2 xy, vec2 center, vec3 color, float strength, float threshold) { vec3 clr = vec3(0.0); float l = length(xy - center); clr += (strength / l) * smoothstep(0.0, threshold, strength / l); return clr * color; } vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } void main() { vec2 uv = vUv; vec2 center = vec2(.5); vec3 color = vec3(.0); const int count = 150; float t = 12. + TWO_PI * u_time * .25; for (int i = 0; i < count; i++) { float j = rand(float(i)); //vec3 rgb_color = hsl2rgb(vec3(sin(u_time * .25) + j * .125, 0.5, .5)); vec3 rgb_color = vec3(0.7, 0.2 + 0.6 *sin(u_time), .1 + j); vec3 new_c = light_point(uv, center + vec2(0.35 * 1. * sin(j + 1. + 2. * t * j), +.45 * sin(j * .75 * PI + PI + t)), rgb_color, 0.0025, .8 - .2*(1. - (1. - uv.y)* uv.y) ); color += new_c; } gl_FragColor = vec4(vec3(color), 1.0); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"><.........完整代码请登录后点击上方下载按钮下载查看
网友评论0