'From Blender to THREEJS, export with GLTF a mesh with UV texture & material color: material color lost

In my game, i use mesh (skeleton, animations and materials without texture) made with Blender (2.79b) ,then exported in glb format (gltf binary v2). In THREEJS scene, i modify dynamicaly the color of some materials by changing the color. I use the r109 version for THREEJS. The gltf exporter version is 1.2.0

I wanted to improve my mesh by adding an UV texture to my materials, like adding a decals.

Unfortunately, in the THREEJS scene, if the texture rendering is ok, the color of the material is black.

To better explain my problem, i used the default cube of Blender. I created:

  • UV map
  • 1 material per face with a different color + 1 UV texture

To build my UV texture:

  • "Smart UV project"
  • UVs -> Export UV Layout (cube.png)

UV export (change Fill opacity to 0)

  • Modified cube.png with Gimp.
  • Image -> Open image (cube.png)

I let the default options of Blender.

Then i exported the mesh as usual with the GLTF exporter and rendered into THREEJS scene.

var ambientLight =new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
ambientLight.position.set( 0,5, 0 );
scene.add( ambientLight );
var otherCube=new THREE.Mesh( new THREE.CubeGeometry(1,1,1),new THREE.MeshBasicMaterial({color: "blue"}) )
otherCube.position.x=-2
scene.add( otherCube);

 var GLTF_loader=new THREE.GLTFLoader();
 GLTF_loader.load( '/cube.glb', function(geometry)  {
   var mesh=geometry.scene.getObjectByName( "Cube" );
   scene.add(mesh);
 });

The texture rendering seems ok but the color of each face is lost. I built a blue cube to show it is not a problem of light into the scene.

It looks like an alpha problem, i tried to activate certain options in Blender before export but that didn't change anything. In addition, the rendering in Blender is good.

What would be the options to use in Blender or/and THREEJS so that i get the color of my faces? (and change the color later)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source