three打造三维粒子流动动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> æther III</title> <style> html, body { background: black; overflow: hidden; } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script type="x-shader/x-vertex" id="vert-shader"> attribute vec3 color; attribute vec2 age; varying vec3 v_color; varying vec2 v_age; void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.); v_color = color; v_age = age; gl_PointSize = 80. * (80. / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } </script> <script type="x-shader/x-fragment" id="frag-shader"> uniform sampler2D u_texture; varying vec3 v_color; varying vec2 v_age; float fadeInOut(float t, float m) { float h = .5 * m; return abs(mod((t + h), m) - h) / h; } void main() { float alpha = fadeInOut(v_age.s, v_age.t); gl_FragColor = vec4(v_color, alpha) * texture2D(u_texture, gl_PointCoord); } </script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script> <script> "use strict"; const { abs, acos, asin, atan, atan2, ceil, cos, floor, max, min, PI, pow, random, round, sin, sqrt, tan } = Math; const HALF_PI = 0.5 * PI; const QUART_PI = 0.25 * PI; const TAU = 2 * PI; const TO_RAD = PI / 180; const G = 6.67 * pow(10, -11); const EPSILON = 2.220446049250313e-16; const rand = n => n * random(); const randIn = (_min, _max) => rand(_max - _min) + _min; const randRange = n => n - rand(2 * n); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0