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​​