three+webgl实现可调参数的三维浩瀚宇宙星辰粒子旋转动画效果代码
代码语言:html
所属分类:粒子
代码描述:three+webgl实现可调参数的三维浩瀚宇宙星辰粒子旋转动画效果代码,使用dat.gui来调节参数。
代码标签: three webgl 可调 参数 三维 浩瀚 宇宙 星辰 粒子 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { overflow: hidden; } .webgl { position: fixed; top: 0; left: 0; outline: none; } </style> </head> <body > <canvas class="webgl"></canvas> <script> let gVertShader = ` uniform float uTime; uniform float uSize; attribute float aScale; attribute vec3 aRandomness; varying vec3 vColor; vec2 fade(vec2 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); } vec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float cnoise(vec2 P) { vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation vec4 ix = Pi.xzxz; vec4 iy = Pi.yyww; vec4 fx = Pf.xzxz; vec4 fy = Pf.yyww; vec4 i = permute(permute(ix) + iy); vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024... vec4 gy = abs(gx) - 0.5; vec4 tx = floor(gx + 0.5); gx = gx - tx; vec2 g00 = vec2(gx.x,gy.x); vec2 g10 = vec2(gx.y,gy.y); vec2 g01 = vec2(gx.z,gy.z); vec2 g11 = vec2(gx.w,gy.w); vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)); g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w; float n00 = dot(g00, vec2(fx.x, fy.x)); float n10 = dot(g10, vec2(fx.y, fy.y)); float n01 = dot(g01, vec2(fx.z, fy.z)); float n11 = dot(g11, vec2(fx.w, fy.w)); vec2 fade_xy = fade(Pf.xy); vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x); float n_xy = mix(n_x.x, n_x.y, fade_xy.y); return 2.3 * n_xy; } void main(){ vec4 modelPosition = modelMatrix * vec4(position, 1.0); //spin here float angle = atan(modelPosition.x, modelPosition.z); float distanceToCenter = length(modelPosition.xz); float angleOffset = (1.0 / distanceToCenter) * (uTime*0.2); // angle-= angleOffset+uTime/distanceToCenter/2.0; // angle-= 100.0-10.0*(uTime/1.0*(distanceToCenter*0.02)); // angle-= sin(angleOffset+uTime)/(distanceToCenter * cnoise(aRandomness.xz)); angle-= sin(angleOffset+uTime)/distanceToCenter + cnoise(aRandomness.xz)*cnoise(aRandomness.xy); modelPosition.x = cos(angle)* distanceToCenter+ cnoise(aRandomness.xz)*cnoise(aRandomness.yz);; modelPosition.z = sin(angle)* distanceToCenter+ cnoise(aRandomness.xz)*cnoise(aRandomness.xy);; // modelPosition.y = sin(aRandomness.y) * 11.0+abs(2.0/distanceToCenter)-10.0; modelPosition.y = (aRandomness.y*aRandomness.x) * 1.0-(aRandomness.y*aRandomness.y); modelPosition.xyz += aRandomness/12.0; vec4 viewPosition = viewMatrix * modelPosition; vec4 projectedPosition = projectionMatrix * viewPosition; gl_Position = projectedPosition; // gl_PointSize = uSize*aScale; gl_PointSize *= ( 1.0 / - viewPosition.z ); vColor = color; } `; let gFragShader = ` varying vec3 vColor; void main() { // //Disc // float strength = distance(gl_PointCoord, vec2(0.5)); // strength = step(0.2, strength); // strength = 1.0-strength; //Diffues // float strength = distance(gl_PointCoord, vec2(0.5)); // strength *=2.0; // strength = 1.0-strength; // //Diffues float strength = distance(gl_PointCoord, vec2(0.5)); strength = 1.0-strength; strength = pow(strength, 7.0); vec3 color = mix(vec3(0.0), vColor, strength); gl_FragColor = vec4(color,1.0); } ` </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.144.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.144.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script > const gui = new dat.GUI(); const canvas = document.querySelector('.webgl'); const scene = new THREE.Scene(); scene.background = new THREE.Color("#333"); const parameters = { count: 9000, radius: 5, branches: 12, randomness: 1.0, randomnessPower: 3, insideColor: '#cd3b0e', outsideColor: "#81037d" }; let geometry = null; let material = null; let points = null; const generateGalaxy = () => { if (points !== .........完整代码请登录后点击上方下载按钮下载查看
网友评论0