threejs实现宇宙黑洞星云旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:threejs实现宇宙黑洞星云旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { margin: 0; padding: 0; } #container { position: fixed; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script> <script id="vertexShader" type="x-shader/x-vertex"> uniform float u_time; const float spawnrate = .01; const float life = 200.; const float fadetime = 20.; const int octaves = 5; const float seed = 43758.5453123; const float seed2 = 73156.8473192; float random(float val) { return fract(sin(val) * seed); } vec2 random2(vec2 st, float seed){ st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) ); return -1.0 + 2.0*fract(sin(st)*seed); } float random2d(vec2 uv) { return fract( sin( dot( uv.xy, vec2(12.9898, 78.233) ) ) * seed); } varying float v_z; float easeLinear(float time, float begin, float change, float duration) { return change * time / duration + begin; } vec2 easeLinear(float time, vec2 begin, vec2 change, float duration) { return change * time / duration + begin; } void main() { vec4 pos = vec4(position,1.0); float id = position.z; bool emitter = mod(id, 2.) == 0.; float rand = random(id); float rand1 = random(id + 1.); float pointsize = 100. * rand * rand1; // float spawnrate = spawnrate + (sin(u_time / 10.) + 1.) * .01; float time = mod(u_time - id * spawnrate, life); float step = time / life; bool alive = time >= 0.; vec2 polar = vec2(0., 0.); if(alive) { if(emitter) { // pos.xy = vec2(10. * rand); vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10., 200.); polar = easeLinear(time, vec2(sin(u_time / 50.), 100. + sin(u_time / 10.) * 50.), outerPolar, life); // polar.x += sin(u_time / 10. * rand) + 1.; polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.); if(time < fadetime) { pointsize = easeLinear(time, 0., pointsize, fadetime); } else if(time > life - fadetime) { pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime); } pointsize *= (sin((u_time + 100.) / 10. * rand1) + 1.); pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.; pos.z = 100.; } else { // pos.xy = vec2(10. * rand); vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10. + 3.14, 200.); polar = easeLinear(time, vec2(sin(u_time / 50.) + 3.14, 100. + cos(u_time / 10.) * 50.), outerPolar, life); // polar.x += sin(u_time / 10. * rand) + 1.; polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.); if(time < fadetime) { pointsize = easeLinear(time, 0., pointsize, fadetime); } else if(time > life - fadetime) { pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime); } pointsize *= 1. - (sin((u_time + 100.) / 10. * rand1) + 1.); // pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.; pos.z = 90.; } } pos.x += cos(polar.x) * polar.y; pos.y += sin(polar.x) * polar.y; v_z = pos.z / 100. + polar.x / 100.; gl_PointSize = pointsize; gl_Position = projectionMatrix * modelViewMatrix * pos; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 u_resolution; uniform float u_time; uniform sampler2D tSprite; varying float v_z; vec3 hsb2rgb( in 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 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix( vec3(1.0), rg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0