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

Three.js中可以使用自定義的著色器（shader），進(jìn)行材質(zhì)的渲染，并且Three.js的類庫中預(yù)置了一些常用的shader，可以直接拿來進(jìn)行使用，下載Three.js的類庫包，可以在three\examples\js\shaders中使用對應(yīng)的js文件。

以垂直模糊為例：
js引用

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

查看js文件，可以看到需要的參數(shù)設(shè)置。

初始化著色器材質(zhì)：
//調(diào)用垂直模糊著色器

let?verblurshader?=?THREE.VerticalBlurShader;

?uniforms2?=?{

??//貼圖文件

????????????????"tDiffuse":?{

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

????????????????},

//垂直模糊參數(shù)

????????????????"v":?{

????????????????????value:?1.0?/?256.0

????????????????}

????????????};

//設(shè)置貼圖屬性

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

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

//初始化著色器材質(zhì)

????????????const?shadermaterial?=?new?THREE.ShaderMaterial({

? ? ? ? ? ? ?//傳遞著色參數(shù)

????????????????uniforms:?uniforms2,

?? ? ? ? ? ??//設(shè)置頂點著色器和片段著色器

????????????????vertexShader:?verblurshader?.vertexShader,

????????????????fragmentShader:?verblurshader?.fragmentShader,

?? ? ? ? ? ??//雙面渲染參數(shù)等設(shè)置

????????????????side:?THREE.DoubleSide,

????????????????opacity:?1.0,

????????????????transparent:?true,

????????????});

將以上著色器材質(zhì)作用到對應(yīng)的形狀上，設(shè)置不同的渲染參數(shù)，能夠達(dá)到渲染的效果：

動態(tài)設(shè)置uniforms，能夠?qū)崿F(xiàn)渲染的實時變化，達(dá)到動畫的效果。

引用內(nèi)容：

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