THREE。js如何扩展已有材质

　　本文主要从以下几个方面进行讲述：创建没有光照效果的立方体；扩展lambert材质，创建有光照效果的立方体；
　　适用人群：对THREE。js和glsl有基本了解的人。创建没有光照效果的立方体
　　本示例会创建一个前后左右面是纯色，上下面是贴图的立方体。该部分的内容主要包括以下部分：创建bufferG自定义shaderMaterial，在shaderMaterial里面判断是用纯色还是贴图；创建mesh。创建bufferGeometry
　　因为想更深入的了解THREE。js的实现原理，所以这块没有直接使用BoxBufferGeometry，而是自己定义顶点信息：constgeometrynewTHREE。BufferGeometry（）constposition〔每个面两个三角形，每个三角形三个顶点，每个顶点三个坐标值，所以一个三角形是339个值，一个面是33218个值1，1，1，1，1，1，1，1，1，frontface1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，rightface1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，backface1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，leftface1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，topface1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，bottomface1，1，1，1，1，1，1，1，1〕定义了一个长宽高都是2的立方体，所以上面xyz的坐标要么是1，要么是1geometry。setAttribute（position，newTHREE。BufferAttribute（Float32Array。from（position），3））
　　然后，给每个顶点添加颜色信息，每个顶点既可以是纯色也可以是贴图，纯色需要rgb三个分量，贴图需要uv两个分量，所以每个顶点至少需要三个分量来表示。
　　那么，如何判断这个顶点是纯色还是贴图呢？
　　我们当然可以再使用一个数组来表示。但是注意到上面贴图只需要两个分量，那么我们就可以利用第三个分量来判断。glsl语言里面rgb色值的范围是01，所以我们可以使用这个范围之外的值表示这是一个贴图。
　　那取什么值呢？我们这个立方体定义了上下面是贴图，也就是贴图不只一个，那么这个值还要能推导出是第几个贴图。我这里设置了一个textureBaseIndex为2的变量。constcolors〔〕consttextureBaseIndex2for（leti0；i12；i）｛switch（i）｛case0：frontcolorcase1：colors。push（1，0，0，1，0，0，1，0，0）红breakcase2：rightcolorcase3：colors。push（0，1，0，0，1，0，0，1，0）绿breakcase4：backcolorcase5：colors。push（0，0，1，0，0，1，0，0，1）蓝case6：leftcolorcase7：colors。push（1，1，0，1，1，0，1，1，0）黄breakcase8：toptextureuv，前两个分量表示uv，第三个分量表示取第几个纹理，在纹理实际索引值的基础上加上textureBaseIndexcolors。push（0，0，textureBaseIndex0，1，0，textureBaseIndex0，1，1，textureBaseIndex0）breakcase9：colors。push（1，1，textureBaseIndex0，0，1，textureBaseIndex0，0，0，textureBaseIndex0）breakcase10：bottomtextureuv，前两个分量表示uv，第三个分量表示取第几个纹理，在纹理实际索引值的基础上加上textureBaseIndexcolors。push（1，1，textureBaseIndex1，0，1，textureBaseIndex1，0，0，textureBaseIndex1）breakcase11：colors。push（0，0，textureBaseIndex1，1，0，textureBaseIndex1，1，1，textureBaseIndex1）break｝｝geometry。setAttribute（color，newTHREE。BufferAttribute（Float32Array。from（colors），3））自定义shanderMaterial
　　顶点着色器的代码比较简单，把color属性通过varying变量vColor传给片元着色器：functiongetVertexShader（）｛returnattributevec3varyingvec3vCvoidmain（）｛vCglPositionprojectionMatrixmodelViewMatrixvec4（position，1。0）；｝｝
　　接下来是片元着色器，主要有以下几点：通过vColor。z判断是纯色还是贴图；把贴图信息通过sampler2D数组传入，然后在根据vColor。z获取数组下标的时候，前面在生成下标的时候加了一个textureBaseIndex，所以用的时候得先减去；通过下标获取sampler2D数组中的某一项的时候，不能直接使用textures〔index〕，glsl要求〔〕里面的内容必须是Integralconstantexpression，所以使用了一个generateSwitch函数动态生成一系列if代码；
　　完整代码如下：functiongetFragmentShader（textureLength，textureBaseIndex）｛functiongenerateSwitch（）｛letstrfor（leti0；itextureLi）｛str｛str。length？else：｝if（index｛i｝）｛glFragColortexture2D（textures〔｛i｝〕，vec2（vColor。x，vColor。y））；｝｝returnstr｝return｛textureLength？uniformsampler2Dtextures〔｛textureLength｝〕；：｝varyingvec3vCvoidmain（）｛｛textureLength？if（vColor。z1。0）｛glFragColorvec4（vColor，1。0）；｝else｛intindexint（vColor。z）｛textureBaseIndex｝；｛generateSwitch（）｝｝：glFragColorvec4（vColor，1。0）；｝｝｝
　　生成自定义材质：consttextures〔newTHREE。TextureLoader（）。load（。texturescolors。png），顶面贴图newTHREE。TextureLoader（）。load（。texturescolors。png）底面贴图〕constmaterialnewTHREE。ShaderMaterial（｛uniforms：｛textures：｛value：textures｝片元着色器中会使用｝，vertexShader：getVertexShader（），fragmentShader：getFragmentShader（textures。length，textureBaseIndex）｝）创建mesh
　　这步就比较简单了，创建一个mesh，并添加到场景中：constmeshnewTHREE。Mesh（geometry，material）scene。add（mesh）
　　这样，立方体就创建好了。本例使用了基本的WebGLRenderer，Scene，PerspectiveCamera，没有特殊处理，这里就不再写了。实现效果截图如下：
　　frontrighttop面效果截图
　　backleftbottom面效果截图
　　扩展lambert材质，创建有光照效果的立方体
　　我的实际应用场景中的物体是lambert材质，也就是MeshLambertMaterial。所以，下面的实例代码以扩展lamert材质的光照效果为例。要想使用该实现方案，最好研究下THREE。js的源码。
　　THREE。js里面预先定义了一系列材质，MeshLambertMaterial材质就是其中之一。这部分代码在srcrenderersshaders文件夹下面，ShaderLib。js里面是材质的入口，比如MeshLambertMaterial：constShaderLib｛lambert：｛uniforms：mergeUniforms（〔uniform变量UniformsLib。common，UniformsLib。specularmap，UniformsLib。envmap，UniformsLib。aomap，UniformsLib。lightmap，UniformsLib。emissivemap，UniformsLib。fog，UniformsLib。lights，｛emissive：｛value：newColor（0x000000）｝｝〕），vertexShader：ShaderChunk。meshlambertvert，顶点着色器代码fragmentShader：ShaderChunk。meshlambertfrag片元着色器代码｝，｝
　　ShaderChunk和ShaderLib文件夹下面就是实际的着色器代码，区别是ShaderLib是THREE。js给我们直接使用的，ShaderChunk是更细粒度的代码。ShderLib里面的不同材质有很多共有的代码，所以这个共有的代码就提取成一个个ShaderChunk，达到复用的目的。一个材质是由多个ShaderChunk生成的。我们可以打开ShaderLibmeshlambertvert。glsl。js文件，会发现里面有很多include语句，这些语句最后会被替换为实际的ShaderChunk里面的片段。
　　我们看到shaders文件夹下面只是定义了材质的结构以及glsl代码片段，那么，完整效果的代码是在哪生成的呢？
　　srcrendererswebglWebGLProgram。js文件。
　　列一下这个文件我了解的一些知识点：首先根据我们创建材质时的参数，定义一些define变量，添加在着色器代码的前面；解析ShaderLib里面的代码，把include语句替换为实际代码，参见resolveIncludes函数；
　　更重要的是，ShaderLib里面预定义的一些材质，挂在了THREE变量上，这样我们就可以获得原始代码，并通过修改部分glsl代码达到扩展材质的目的。
　　比如，上面的那个例子，首先改造一下顶点着色器：在默认的lambert顶点着色器代码前面添加属性变量和varying变量；在main函数里面给varying变量赋值；具体插在原始main函数的哪一行看你的需求；functiongetVertexShader（）｛letshaderattributevec3varyingvec3vCTHREE。ShaderLib。lambert。vertexShaderconstindexshader。indexOf（includeuvvertex）shadershader。slice（0，index）vCshader。slice（index）returnshader｝
　　片元着色器的改造如下：在默认的lambert片元着色器代码前面添加uniform变量和varying变量；在main函数里面插入我们的代码，插入位置我选在了include后面，因为这个代码片段和我现在的修改做了类似的事情，所以插在这个位置是可以的。注意，此时就不是直接给glFragColor赋值了，而是把效果加在diffuseColor变量上。实际开发的时候，具体修改哪个值就得参考THREE。js源码了。functiongetFragmentShader（textureLength，textureBaseIndex）｛functiongenerateSwitch（）｛letstrfor（leti0；itextureLi）｛str｛str。length？else：｝if（index｛i｝）｛diffuseColortexture2D（textures〔｛i｝〕，vec2（vColor。x，vColor。y））；｝｝returnstr｝letshaderuniformsampler2Dtextures〔｛textureLength｝〕；varyingvec3vCTHREE。ShaderLib。lambert。fragmentShaderconstindexshader。indexOf（includecolorfragment）shadershader。slice（0，index）｛textureLength？if（vColor。z1。0）｛diffuseColor。rgbvC｝else｛intindexint（vColor。z）｛textureBaseIndex｝；｛generateSwitch（）｝｝：diffuseColor。rgbvC｝shader。slice（index）returnshader｝
　　然后，创建着色器：修改一下uniform变量，把lambert默认的uniform变量也添加进去；添加lights参数为true，否则代码报错；THREE源码默认diffuse是0xeeeeee，覆盖一下，修改为0constmaterialnewTHREE。ShaderMaterial（｛uniforms：THREE。UniformsUtils。merge（〔THREE。ShaderLib。lambert。uniforms，｛textures：｛value：textures｝｝，｛diffuse：｛value：newTHREE。Color（0xffffff）｝｝〕），vertexShader：getVertexShader（），fragmentShader：getFragmentShader（textures。length，textureBaseIndex），lights：true｝）
　　这个时候刷新页面，会发现是一个黑色的立方体，这是因为我们还没有添加光源：constlightnewTHREE。DirectionalLight（0xffffff）；平行光light。position。set（1，1，1）；scene。add（light）；constambientnewTHREE。AmbientLight（0xffffff，0。7）；环境光scene。add（ambient）
　　之所以添加两个光源是因为发现：环境光不受几何物体法线影响；平行光受几何物体法线影响；
　　添加上述代码后，如果把环境光注释掉，会发现材质还是黑色的，这是因为上面创建的geometry没有法线信息，所以需要使用下面的方法添加一下法线信息：geometry。computeVertexNormals（）
　　最终效果截图如下：
　　frontrighttop面效果截图，同时受平行光和环境光影响
　　backleftbottom面效果截图，不在平行光照射范围内，只受环境光影响
　　文章来源：https：segmentfault。coma1190000039057974