I am trying to render an object with three.js (with @react-three-fiber). I load the model from a glb file, that I created with blender. And dynamically assign the material color and the map to it. I attached my test decal image below (the checkered regions are transparent).

This is the section of the code setting the color and decal:

const cylinderRef = gltf.scene.children.find(c => c.name === 'Cylinder').children[1]
const textureLoader = new TextureLoader()
    
textureLoader.load('decal_test.png', imageDecal => {
    imageDecal.flipY = false
    imageDecal.encoding = sRGBEncoding
    
    cylinderRef.material = new MeshPhongMaterial()
    cylinderRef.material.color = cylinderColor
    cylinderRef.material.map = imageDecal
})

It looks okay on most background colors (cylinderColor), but I have 2 big issues:

• The decal is not shown at all if cylinderColor is black
• Any white parts in the png are not shown on any background color (white regions are basically treated the same as transparent ones)

This is a problem, since I often have the case where I need a white decal on a black background.

Maybe the format of the texture is incorrect, but I don't understand how to change it.