javascript - 如何使用“加法混合”以外的混合模式使不透明度影响材质

Question

我正在研究 Three.js 中的一个项目，并且遇到了在同一材质上同时使用不透明度和混合模式的障碍。在我的测试中，我发现除了“AdditiveBlending”和“NormalBlending”之外，在应用混合模式时更改材质的不透明度没有任何影响。

我的问题是：如何让所有混合模式（包括自定义模式）的行为方式与“AdditiveBlending”和“NormalBlending”相同？也就是说，当应用任何混合模式时，能够明显地调整材质的不透明度。

我已经尝试调整源和目标因素，但它们似乎没有任何效果。我还尝试将 blendSrcAlpha 和 blendDstAlpha 设置为材质的不透明度，但这似乎也没有任何效果。

https://threejs.org/docs/#api/en/constants/CustomBlendingEquations

如果您觉得有帮助，我会附上我编写的代码的一部分。

let opacity = layers[l]["layer"]["opacity"]/100;
this[layerMaterial].opacity = opacity;
let blendMode = layers[l]["layer"]["blendMode"];
setBlendingMode(blendMode,this[layerMaterial],opacity);

let blendingModes = ["Normal","Lightest","Darkest","Add","Subtract","Reverse Subtract","Multiply"];
function setBlendingMode(blendMode,material,opacity){

    if (["Normal","Add","Subtract","Multiply"].includes(blendMode)){
        if(blendMode === "Normal"){ blendMode = "NormalBlending"}
        if(blendMode === "Add"){ blendMode = "AdditiveBlending"}
        if(blendMode === "Subtract"){ blendMode = "SubtractiveBlending" }
        if(blendMode === "Multiply"){ blendMode = "MultiplyBlending" }

        material.blending = THREE[ blendMode ];
    }

    else{
        material.blending = THREE[ "CustomBlending" ];

//      These do not seem to have any effect
        material.blendSrc = THREE.OneFactor;
        material.blendDst = THREE.DstAlphaFactor;

        if(blendMode === "Lightest"){
            material.blendEquation = THREE.MaxEquation;
        }
        if(blendMode === "Darkest"){
            material.blendEquation = THREE.MinEquation;
        }
        if(blendMode === "Reverse Subtract"){
            material.blendEquation = THREE.ReverseSubtractEquation;
        }
    } 

//    I commented this out because it didn't seem to have any effect either.
//    material.blendSrcAlpha = opacity;
//    material.blendDstAlpha = opacity;
}

这是我第一次使用堆栈溢出。如果您需要更多信息，请告诉我。

谢谢！

标签： javascriptthree.js