Estoy tratando de representar un objeto con three.js (con @react-three-fiber ). Cargo el modelo desde un archivo glb , que creé con blender. Y asígnele dinámicamente el color del material y el mapa. Adjunté la imagen de mi calcomanía de prueba a continuación (las regiones cuadriculadas son transparentes).

Esta es la sección del código que establece el color y la calcomanía:

 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 })

Se ve bien en la mayoría de los colores de fondo ( cylinderColor ), pero tengo 2 grandes problemas:

• La calcomanía no se muestra en absoluto si el color del cylinderColor es negro
• Cualquier parte blanca en el png no se muestra en ningún color de fondo (las regiones blancas básicamente se tratan igual que las transparentes)

Esto es un problema, ya que a menudo tengo el caso de que necesito una calcomanía blanca sobre un fondo negro.

Tal vez el formato de la textura es incorrecto, pero no entiendo como cambiarlo.