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'), }; 

也可以做成立体的效果。