用three打造黑暗空间穿梭动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blackness, darkness, forever</title> <style> body { margin: 0; padding: 0; } #container { position: fixed; touch-action: none; } </style> </head> <body translate="no"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ccapture.js"></script> <script src="//repo.bfw.wiki/bfwrepo/js/three.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"> uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D u_noise; // Hash function. This particular one probably doesn't disperse things quite // as nicely as some of the others around, but it's compact, and seems to work. // vec3 hash33(vec3 p){ float n = sin(dot(p, vec3(7, 157, 113))); return fract(vec3(2097152, 262144, 32768)*n); } float pn( in vec3 p ){ vec3 i = floor(p); p -= i; p *= p*(3. - 2.*p); p.xy = texture2D(u_noise, (p.xy + i.xy + vec2(37, 17)*i.z + .5)/256., -100.).yx; return mix(p.x, p.y, p.z); } float trigNoise3D(in vec3 p){ float res = 0., sum = 0.; float n = pn(p*8. + u_time*2.); vec3 t = sin(p.yzx*3.14159265 + cos(p.zxy*3.14159265+1.57/2.))*0.5 + 0.5; p = p*1.5 + (t - 1.5); // + u_time*0.1 res += (dot(t, vec3(0.333))); t = sin(p.yzx*3.14159265 + cos(p.zxy*3.14159265+1.57/2.))*0.5 + 0.5; res += (dot(t, vec3(0.333)))*0.7071; return ((res/1.7071))*0.85 + n*0.15; } // Distance function. float map(vec3 p) { float n = trigNoise3D(p*0.2); float t = sin(u_time*.0001)*.5+.5; float c = cos(p.z*.05*t+n); float s = sin(p.z*.05+n*.5); p.xy *= mat2(c, -s, s, c); p -= n*1.5; p.y = mod(p.y, 4.0) - 2.; return abs(p.y) - .1; return trigNoise3D(p*0.5); } void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec3 rd = normalize(vec3(fragCoord - u_resolution.xy*.5, u_resolution.y*.75)); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0