THREE.JS blending与opacity冲突问题

在我们的three.js开发中，肯定很喜欢透明的风格。混合可用于使对象看起来透明。这不是它的唯一用途，但它是它的主要用途之一。three.js封装的透明设置很方便，只需要将material中的transparent设置为true,然后在（0,1）之间调节个人适用的透明度。

但是在实际开发中，纹理坐标深度（即朝向屏幕内部的方向）重叠的情况是不可避免的。尤其是在大型项目中的开发，blending的设置更是深深的和用户体验所联系。three.js封装的blending方法有["NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending"].

参考网址：https://threejs.org/examples/?q=blending#webgl_materials_blending

NoBlending:z-buffer值较大的像素将会遮挡z-buffer值较小的像素，没有纹理融合效果，设置纹理透明度无效。

NormalBlending：默认选项，根据z-buffer正常显示纹理,这是标准混合模式，它单独使用顶层,而不将其颜色与其下面的层混合。

AdditiveBlending：此混合模式只是将一个图层的像素值添加到另一个图层。如果值大于1（在RGB的情况下），则显示白色。线性减淡颜色值。由于它总是产生与输入相同或更浅的颜色，因此它也被称为“加亮”。

SubtractiveBlending：此混合模式将一个图层的像素值减去另一个图层像素值。如果为负值，则显示黑色。

MultiplyBlending：颜色混合，源图像RGB分量与目标图像RGB分量的相乘。