threejs打造三维能量球燃烧释放动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet"> <style> html, body { background: black; overflow: hidden; } .info { background-color: rgba(80, 80, 80, 0.2); bottom: 0; color: white; font-family: 'Roboto Mono', sans-serif; font-size: .8rem; padding: .5rem; position: absolute; } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <p class="info">drag / scroll mouse to rotate / zoom</p> <script src="https://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js" cross-origin="anonymous"></script> <script type="x-shader/x-vertex" id="sphere-vert"> uniform float u_time; varying float v_noise; void main() { vec3 q = vec3(0.); v_noise = turbulence(vec4(position, u_time * .5) * .005); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); } </script> <script type="x-shader/x-fragment" id="sphere-frag"> #define TAU 6.283185307179586 uniform float u_time; varying float v_noise; void main() { vec3 color = vec3(0.); vec3 q = 1. - vec3( .9 * v_noise, .4 * v_noise, .3 * v_noise ); color = mix(q, vec3(.2, .3, .1), clamp(pow(v_noise, 2.) * 4., 0., 1.)); color = mix(color, vec3(.512, .461, .999), clamp(length(q), 0., 1.)); color *= (pow(v_noise, 3.) + .6 * pow(v_noise, 2.) + .5 * v_noise); gl_FragColor = vec4(color, 1.); } </script> <script type="x-shader/x-vertex" id="points-vert"> uniform float u_time; attribute vec3 color; attribute vec2 age; varying vec3 v_color; varying vec2 v_age; void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.); vec3 velocity = (normalize(position) + noiseVel(position, u_time, .005, 4.)) * age.s; vec4 newPosition = vec4(position, 1.) + vec4(velocity, 0.); v_color = color; v_age = age; gl_PointSize = 100. * (100. / -mvPosition.z); gl_Position = projectionMatrix * modelViewMatrix * newPosition; } </script> <script type="x-shader/x-fragment" id="points-frag"> 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="x-shader" id="noise-util"> #define TAU 6.283185307179586 #define NUM_OCTAVES 6 float turbulence(vec4 st) { float value = 0.; float amp = 1.; for (int i = 0; i < NUM_OCTAVES; i++) { value += amp * abs(cnoise(st)); st *= 2.; amp *= .5; } return value; } vec3 noiseVel(vec3 st, float time, float scale, float steps) { float _time = time * scale; float noise = turbulence(vec4(st + _time, _time) * (.1 * scale)); float theta = noise * TAU * steps; float phi = theta * 2.; return vec3(sin(phi) * cos(theta), sin(phi) * sin(theta), cos(phi)); } </script> <script type="x-shader" id="cnoise"> // // GLSL textureless classic 4D noise "cnoise", // with an RSL-style periodic variant "pnoise". // Author: Stefan Gustavson (stefan.gustavson@liu.se) // Version: 2011-08-22 // // Many thanks to Ian McEwan of Ashima Arts for the // ideas for permutation and gradient selection. // // Copyright (c) 2011 Stefan Gustavson. All rights reserved. // Distributed under the MIT license. See LICENSE file. // https://github.com/stegu/webgl-noise // vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec4 fade(vec4 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); } // Classic Perlin noise float cnoise(vec4 P) { vec4 Pi0 = floor(P); // Integer part for indexing vec4 Pi1 = Pi0 + 1.0; // Integer part + 1 Pi0 = mod289(Pi0); Pi1 = mod289(Pi1); vec4 Pf0 = fract(P); // Fractional part for interpolation vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0 vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); vec4 iy = vec4(Pi0.yy, Pi1.yy); vec4 iz0 = vec4(Pi0.zzzz); vec4 iz1 = vec4(Pi1.zzzz); vec4 iw0 = vec4(Pi0.wwww); vec4 iw1 = vec4(Pi1.wwww); vec4 ixy = permute(permute(ix) + iy); vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1); vec4 ixy00 = permute(ixy0 + iw0); vec4 ixy01 = permute(ixy0 + iw1); vec4 ixy10 = permute(ixy1 + iw0); vec4 ixy11 = permute(ixy1 + iw1); vec4 gx00 = ixy00 * (1.0 / 7.0); vec4 gy00 = floor(gx00) * (1.0 / 7.0); vec4 gz00 = floor(gy00) * (1.0 / 6.0); gx00 = fract(gx00) - 0.5; gy00 = fract(gy00) - 0.5; gz00 = fract(gz00) - 0.5; vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); vec4 sw00 = step(gw00, vec4(0.0)); gx00 -= sw00 * (step(0.0, gx00) - 0.5); gy00 -= sw00 * (step(0.0, gy00) - 0.5); vec4 gx01 = ixy01 * (1.0 / 7.0); vec4 gy01 = floor(gx01) * (1.0 / 7.0); vec4 gz01 = floor(gy01) * (1.0 / 6.0); gx01 = fract(gx01) - 0.5; gy01 = fract(gy01) - 0.5; gz01 = fract(gz01) - 0.5; vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); vec4 sw01 = step(gw01, vec4(0.0)); gx01 -= sw01 * (step(0.0, gx01) - 0.5); gy01 -= sw01 * (step(0.0, gy01) - 0.5); vec4 gx10 = ixy10 * (1.0 / 7.0); vec4 gy10 = floor(gx10) * (1.0 / 7.0); vec4 gz10 = floor(gy10) * (1.0 / 6.0); gx10 = fract(gx10) - 0.5; gy10 = fract(gy10) - 0.5; gz10 = fract(gz10) - 0.5; vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); vec4 sw10 = step(gw10, vec4(0.0)); gx10 -= sw10 * (step(0.0, gx10) - 0.5); gy10 -= sw10 * (step(0.0, gy10) - 0.5); vec4 gx11 = ixy11 * (1.0 / 7.0); vec4 gy11 = floor(gx11) * (1.0 / 7.0); vec4 gz11 = floor(gy11) * (1.0 / 6.0); gx11 = fract(gx11) - 0.5; gy11 = fract(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0