Three.js transparency model texture bug

Question

I have searched over all internet and tried a lot of ways, but no results.. How to remove texture transparency bug? Check on image

So, on 3dsmax model looks okey. I have converted to .js format from .obj with python script in order .png files were transparent (.obj does not make transparence).

How to solve my problem? Thank you

var loader = new THREE.JSONLoader();
loader.load('tree_model.js', function(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    object.traverse( function ( child ) {
            if ( child.material instanceof THREE.MeshPhongMaterial ) {

                // this code is unattainable, but anyway without if (..) it does not work

                child.material.alphaTest = 0.5;
                child.material.depthWrite = false;
                child.material.depthTest = false;
                child.material.side = THREE.BackSide;
                child.material.transparent = true;
            }
        });
        scene.add(object);
    });
});

And renderer:

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

you are using jpg textures that do not hold transparency. convert them to png and only use the `alphaTest`. — gaitat, Mar 01 '16 at 03:31
@gaitat: This model uses Alpha maps to handle transparency, so it could work. In this case it doesnt work because various other code errors. — Falk Thiele, Mar 02 '16 at 10:45

Falk Thiele · Accepted Answer · 2016-03-02T11:49:58.480

You have to set alphaTest on your materials. Additionally setting the leafes and branches to THREE.DoubleSide ensures that they are not disappearing when viewed from the other side.

The code you have posted contains various errors, so replace it with this:

var loader = new THREE.JSONLoader();
loader.load('model/Elka.js', function(geometry, materials) {

    for( var i = 0; i < materials.length; i ++ ) {
        var material = materials[ i ];
        material.alphaTest = 0.5;
        material.side = THREE.DoubleSide;
        // not-so-good practice
        if ( material.name === "NorwaySpruceBark" ) {
            material.transparent = false;
        }
    }

    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    scene.add(object);
});

To further reduce transparency artefacts, set the trunk to non-transparent. Your model should contain the correct material settings, so this is kind of a bad practice.

Edit: Setting alpha and premultipliedAlpha in the renderer is not necessary for this problem.

Result:

Three.js transparency model texture bug

1 Answers1