在我们的three.js开发中，肯定很喜欢半透明的风格，并且three.js封装的半透明设置也很方便，只需要将material中的transparent设置为true,然后在（0,1）之间调节个人适用的透明度。
但是在实际开发中，纹理坐标深度（即朝向屏幕内部的方向）重叠的情况是不可避免的。尤其是在大型项目中的开发，blending的设置更是深深的和用户体验所联系。three.js封装的blending方法有["NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending"].
参考网址：https://threejs.org/examples/webgl_materials_blending.html
NoBlending:坐标深度较浅的物体将会遮挡坐标:深度较深的物体，没有纹理融合效果，设置纹理透明度无效
NormalBlending：默认选项，效果应该同上，暂未发现什么规律，区别就是设置纹理透明度有效
AdditiveBlending：纹理叠加，颜色加法，坐标深度较深的物体纹理会叠加到坐标深度较浅的物体纹理上，设置纹理透明度有效
SubtractiveBlending：纹理相减，颜色加法，坐标深度较浅的物体纹理会弱化坐标深度较深的物体纹理，设置纹理透明度有效，背景的如果和物体颜色相差太大会被背景颜色吃掉，应用场景是弱色背景，强色物体，凸显物体颜色
MultiplyBlending：纹理叠加，颜色乘法，一种神奇的，有无限可能的属性，设置纹理透明度有效
网友评论