three.js光带冲击波效果

three.js光带冲击波效果

效果如图所示，有三个效果，第一个是光带的高度一致，第二个光带高度不一致，第三个是冲击波效果。
shader代码如下，主要是一个阶梯函数。

vertexShader: [
      'varying vec3 vColor;',
      'varying vec3	vVertexNormal;',
      "varying vec2 vUv;",
      'varying float v_pz; ',
      'void main(){',
      "   vUv = uv;",
      '   v_pz = position.y; ',
      '	vVertexNormal	= normalize(normal);',
      '   vColor = color;',
      '	gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
      '}'
  ]
fragmentShader: [
      'uniform float	boxH;',
      'varying vec3	vVertexNormal;',
      'varying vec3 vColor;',
      "varying vec2 vUv;",
      'varying float v_pz; ',
      'float plot (vec2 st, float pct){',
      'return  smoothstep( pct-8.0, pct, v_pz) -',
      'smoothstep( pct, pct+0.02, v_pz);',
      '}',
      'void main(){',
      'float f1 = plot(vUv,boxH);',
      'vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);',
      'gl_FragColor = mix(vec4(vColor,1.0),b1,f1);',
      'gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',
      ' if(vVertexNormal.y > 0.5){gl_FragColor = vec4(vColor, 1.0);}',
      '}'
  ]
vertexShader: [
      'varying vec3 vColor;',
      'varying vec3	vVertexNormal;',
      "varying vec2 vUv;",
      'varying float v_px; ',
      'varying float v_py; ',
      'void main(){',
      "   vUv = uv;",
      '   v_py = (modelViewMatrix * vec4(position, 1.0)).y; ',
      '   v_px = (modelViewMatrix * vec4(position, 1.0)).x; ',
      '	vVertexNormal	= normalize(normal);',
      '   vColor = color;',
      '	gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
      '}'
  ]
  fragmentShader: [
      'uniform float	boxH;',
      'varying vec3	vVertexNormal;',
      'varying vec3 vColor;',
      "varying vec2 vUv;",
      'varying float v_px; ',
      'varying float v_py; ',
      'float plot (float st, float pct){',
      'return  smoothstep( pct-8.0, pct, st) -',
      'smoothstep( pct, pct+0.02, st);',
      '}',
      'void main(){',
      'float d = length(vec2(v_px,v_py));',
      // 'float f1 = plot(d,boxH);',
      'float f1 = plot(v_py,boxH);',
      'vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);',
      'gl_FragColor = mix(vec4(vColor,1.0),b1,f1);',
      'gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',
      ' if(vVertexNormal.y > 0.5){gl_FragColor = vec4(vColor, 1.0);}',
      '}'
  ]

var cubeGeo = new THREE.BoxBufferGeometry(1, h, 1);
cubeGeo.addAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3));
var colors1 = cubeGeo.attributes.color;
for (var i = 0; i < 24; i+=2) {
    var r = Math.random()*0.8,g=Math.random()*0.7,b=Math.random()*0.5;
    colors1.setXYZ(i, r, g, b);
    colors1.setXYZ(i+1,r, g, b);
}
var k = 2;
colors1.setXYZ(k * 4 + 0, .0, 1.0, 1.0);
colors1.setXYZ(k * 4 + 1, .0, 1.0, 1.0);
colors1.setXYZ(k * 4 + 2, .0, 1.0, 1.0);
colors1.setXYZ(k * 4 + 3, .0, 1.0, 1.0);
var material = new THREE.ShaderMaterial({
    uniforms: ShaderBar.uniforms,
    vertexShader: ShaderBar.vertexShader,
    fragmentShader: ShaderBar.fragmentShader,
    vertexColors: ShaderBar,
});
var cube = new THREE.Mesh(cubeGeo, material);

let ShaderBar = {
    uniforms: {
        boxH: { value: -25.0 },
    },
    vertexShader: [
        'varying vec3 vColor;',
        'varying vec3	vVertexNormal;',
        "varying vec2 vUv;",
        'varying float v_px; ',
        'varying float v_py; ',
        'void main(){',
        "   vUv = uv;",
        '   v_py = (modelViewMatrix * vec4(position, 1.0)).y; ',
        '   v_px = (modelViewMatrix * vec4(position, 1.0)).x; ',
        '	vVertexNormal	= normalize(normal);',
        '   vColor = color;',
        '	gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
        '}'
    ].join('\n'),
    fragmentShader: [
        'uniform float	boxH;',
        'varying vec3	vVertexNormal;',
        'varying vec3 vColor;',
        "varying vec2 vUv;",
        'varying float v_px; ',
        'varying float v_py; ',
        'float plot (float st, float pct){',
        'return  smoothstep( pct-8.0, pct, st) -',
        'smoothstep( pct, pct+0.02, st);',
        '}',
        'void main(){',
        'float d = length(vec2(v_px,v_py));',
        // 'float f1 = plot(d,boxH);',
        'float f1 = plot(v_py,boxH);',
        'vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);',
        'gl_FragColor = mix(vec4(vColor,1.0),b1,f1);',
        'gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',
        ' if(vVertexNormal.y > 0.5){gl_FragColor = vec4(vColor, 1.0);}',
        '}'
    ].join('\n'),
};

也可以做成立体的效果。