Assigning Alpha channels to OBJ/MTL model meshes

Question

Am loading a model in three.js which has some meshes where the texture has an alpha channel. However there is no alpha applied to those parts of the mesh.

This is all in Three.js R67

This is my render set up.

renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});

This is the Model loading code.

loader.load( 'chris/Chris_RE6.obj', 'chris/Chris_RE6.mtl', function ( object ) {
    mesh = object;
    mesh.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            // child.material.map = texture;
            child.castShadow = true;

        }

    } );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );

    animate(new Date().getTime());


    var myElement = document.querySelector(".loading");
    myElement.style.display = "none";

} );

Am thinking that maybe I need to traverse the model and assign alphas manually? But that just sounds laborious! Imagine if i have high poly model with multiple transparencies? How would I deduce where on the mesh is the mesh that needs to be transparent? But am not even sure that line of thinking is even correct.

Browser render of the model with transparency not added to hair textures

Did you set `material.transparent = true` for those materials that have transparent textures? — WestLangley, May 14 '14 at 16:15
I don't even know how I would do so in the loop. Do you have an example you can point me to? Right now am console logging the materials and will try to break them apart on that... — Komsomol, May 14 '14 at 16:23
As a hack, try editing the .mtl file and set d = 0.9999 for the required materials. — WestLangley, May 14 '14 at 16:41

score 0 · Answer 1 · answered May 14 '14 at 17:19

I think I fixed it. Though I don't the solution is 100%. Maybe I am going about this the wrong way.

I knew the hair had to be somewhere in the loaded meshes and must be typed in some way. When I logged it I found it, the meshes were named

name: "head_group_151"

I think thought that if hair was appiled it needed to probably be a Mesh with MeshPhongMaterial. So in my traversal of the model I applied transparency to all parts that had that material. This fixed the display of the model. But I don't think it works 100%.

enter As you can see the transparency is still BLACK now instead of white. So it works? But seemingly partly? Is it because my clear color is set to be 0x00000?

Anyways this is the updated code now.

var loader = new THREE.OBJMTLLoader();
loader.load( 'chris/Chris_RE6.obj', 'chris/Chris_RE6.mtl', function ( object ) {
    mesh = object;
    mesh.traverse( function ( child ) {

           if ( child.material instanceof THREE.MeshPhongMaterial ) {

            child.material.transparent = true;

        }

        if ( child instanceof THREE.Mesh ) {

            child.castShadow = true;
            child.receiveShadow = true;

        }

    } );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );

    animate(new Date().getTime());


    var myElement = document.querySelector(".loading");
    myElement.style.display = "none";

} );

Assigning Alpha channels to OBJ/MTL model meshes

1 Answers1

Linked