Three.js的着色器材质(ShaderMaterial)

ShaderMaterial简介：http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterial

Three.js中可以使用自定义的着色器（shader），进行材质的渲染，并且Three.js的类库中预置了一些常用的shader，可以直接拿来进行使用，下载Three.js的类库包，可以在three\examples\js\shaders中使用对应的js文件。

以垂直模糊为例：
js引用

  <script src="three/examples/js/shaders/VerticalBlurShader.js"></script>

查看js文件，可以看到需要的参数设置。

初始化着色器材质：
//调用垂直模糊着色器

let verblurshader = THREE.VerticalBlurShader;

 uniforms2 = {

  //贴图文件

                "tDiffuse": {

                    value: new THREE.TextureLoader().load('images/speedline.jpg')

                },

//垂直模糊参数

                "v": {

                    value: 1.0 / 256.0

                }

            };

//设置贴图属性

uniforms2["tDiffuse"].value.wrapS = uniforms2["tDiffuse"].value.wrapT = THREE.RepeatWrapping;

uniforms2["tDiffuse"].value.repeat.set(1, 1);

//初始化着色器材质

            const shadermaterial = new THREE.ShaderMaterial({

             //传递着色参数

                uniforms: uniforms2,

             //设置顶点着色器和片段着色器

                vertexShader: verblurshader .vertexShader,

                fragmentShader: verblurshader .fragmentShader,

             //双面渲染参数等设置

                side: THREE.DoubleSide,

                opacity: 1.0,

                transparent: true,

            });

将以上着色器材质作用到对应的形状上，设置不同的渲染参数，能够达到渲染的效果：

动态设置uniforms，能够实现渲染的实时变化，达到动画的效果。

引用内容：

http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterial