1

I am trying to change the color of my 3D model "behind" the png texture I set (which includes transparency).

I have done a lot of researches, and i finally found an example with a cube which actually works, but I can't understand how to make that with my gltf 3D model (not a BoxGeometry).

METHOD :

Define an array of two materials, first one is my png texture with transparency = true; second one is a basic material with its plain color (the color i will be able to change later...)

    var materialBack = new THREE.MeshBasicMaterial({color: 0xfadce6});
    var materialTxt = new THREE.MeshBasicMaterial({map: mytexture,transparent: true});
    var materials = [materialBack, materialTxt];

It works perfect with a cube :

    var geometry = new THREE.BoxBufferGeometry();
    geometry.clearGroups();
    geometry.addGroup( 0, Infinity, 0 );
    geometry.addGroup( 0, Infinity, 1 );
    
    var cube = new THREE.Mesh( geometry, materials );

Problem : I can't figure out how to do the same when my model is actually an imported GLTF, and not a "BoxBufferGeometry". It looks like we can't assign an array to o.material :

var loader = new THREE.GLTFLoader();
loader.load(mymodel.glb, function(gltf) {
  gltf.scene.traverse((o) => {
    if (o.isMesh) {
      o.material = materials;
    }
    scene.add(gltf.scene);
  });

I also tried to extract geometry from gltf, then create a new mesh, but without success :

var loader = new THREE.GLTFLoader();
loader.load(mymodel.glb, function(gltf) {

  var geometry = gltf.scene.getObjectByName("name").geometry;
  mymesh = new THREE.Mesh(geometry,materials);
  scene.add(mymesh);
  });

Can someone please help ?

Niklas E.
  • 1,848
  • 4
  • 13
  • 25
PierreBchr
  • 11
  • 2
  • Maybe this can help you: https://stackoverflow.com/questions/17486614/three-js-png-texture-alpha-renders-as-white-instead-as-transparent] Best regards. – Matheus May 19 '21 at 11:58

0 Answers0