three+webgl实现红丝带布料吹动波动动画效果代码
代码语言:html
所属分类:动画
代码描述:three+webgl实现红丝带布料吹动波动动画效果代码
代码标签: three webgl 红丝带 布料 吹动 波动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: #eeeeee; } .full-screen-3d-example { opacity: 0; transition: opacity 1s ease-out; } .full-screen-3d-example.-loaded { opacity: 1; } </style> </head> <body> <div id='root' class='full-screen-3d-example'></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.146.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.146.js"></script> <script > const { THREE } = window; const FLAGS = Object.freeze({ ENABLE_ORBIT_CONTROLS: false, }); const COLOR_PALETTE = Object.freeze({ black: 0x010101, white: 0xeeeeee, wave: 0xe63946, }); const GLSL_UTILS = Object.freeze({ rand: ` float crand(vec2 seed) { return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123); } `, noise: ` float noise(vec2 position) { vec2 p = floor(position); float tl = crand(p); float tr = crand(p + vec2(1.0, 0.0)); float bl = crand(p + vec2(0.0, 1.0)); float br = crand(p + vec2(1.0, 1.0)); vec2 v = smoothstep(0.0, 1.0, fract(position)); return mix(tl, tr, v.x) + (bl - tl) * v.y * (1.0 - v.x) + (br - tr) * v.x * v.y - 0.5; } `, }); class CustomMaterial extends THREE.MeshStandardMaterial { onBeforeCompile(shader) { // eslint-disable-next-line no-param-reassign shader.uniforms.uTime = { value: 0.0 }; // eslint-disable-next-line no-param-reassign shader.vertexShader = shader.vertexShader.replace( '#include <uv_pars_vertex>', `varying vec2 vUv; uniform float uTime;`, ); // eslint-disable-next-line no-param-reassign shader.vertexShader = shader.vertexShader.replace( '#include <uv_vertex>', 'vUv = uv;', ); // eslint-disable-next-line no-param-reassign shader.fragmentShader = shader.fragmentShader.replace( 'varying vec3 vViewPosition;', `varying vec3 vViewPosition; varying vec2 vUv; uniform float uTime;`, ); this.userData.shader = shader; } } class WavesMaterial extends CustomMaterial { constructor() { super({ color: COLOR_PALETTE.wave, side: THREE.DoubleSide, }); } onBeforeCompile(shader) { super.onBeforeCompile(shader); // eslint-disable-next-line no-param-reassign shader.vertexShader = ` ${GLSL_UTILS.rand} ${GLSL_UTILS.noise} float getWaveZ(vec2 xy, float time) { float t = 0.2 * time; return 30.0 * sin(3.3 * uv.x) + 5.0 * sin(0.1 * xy.y) * noise(0.2 * xy - 2.0 * t); } ${shader.vertexShader} `; // eslint-disable-next-line no-param-reassign shader.vertexShader = shader.vertexShader.replace( '#include <begin_vertex>', ` #include <begin_vertex> transformed = position + vec3(0.0, 0.0, getWaveZ(position.xy, uTime)); float d = 0.0001; vNormal = normalize( cross( vec3( d, 0.0, getWaveZ(vec2(position.x + d, position.y), uTime)) -vec3(-d, 0.0, getWaveZ(vec2(position.x - d, position.y), uTime)), vec3( 0.0, d, getWaveZ(vec2(position.x, position.y + d), uTime)) -vec3(0.0, -d, getWaveZ(vec2(position.x, position.y - d), uTime)) ) ); `, ); // eslint-disable-next-line no-param-reassign shader.fragmentShader = ` ${GLSL_UTILS.rand} ${GLSL_UTILS.noise} ${shader.fragmentShader} `; // eslint-disable-next-line no-param-reassign shader.fragmentShader = shader.fragmentShader.replace( '#include <map_fragment>', ` #include <map_fragment> float c = 0.5 * abs(noise(vec2(30.........完整代码请登录后点击上方下载按钮下载查看
网友评论0