CODEWITHSUNDEEP
javascriptthree.jstextures
sirjay
sirjay

Reputation: 1766

Three.js transparency model texture bug

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

tree model texture bug

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

Upvotes: 4

Views: 3723

Answers (1)

Falk Thiele
Falk Thiele

Reputation: 4494

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:

Transparent Tree

Upvotes: 8

Related Questions