OBJMTLLoader() not transparent .png in model

Question

I have read a lot of questions and articles about this issue, but anyway png images for models are not transparent. Instead it has white background. Like:

three.js: how to apply alpha-map when using OBJMTL loader?

Assigning Alpha channels to OBJ/MTL model meshes

Three.js png texture - alpha renders as white instead as transparent

Maybe someone has ideas how to fix it and what code to add?

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

var loader = new THREE.OBJMTLLoader();
loader.crossOrigin = 'anonymous';
loader.load( 'model.obj', 'model.mtl', function ( object ) {
    object.position.set(0, 0, 0);
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
        if ( child.material instanceof THREE.MeshPhongMaterial ) {
            child.material.opacity = 1;
            // 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);
});

model.mtl:

newmtl Cap
    Ns 37.6553
    Ni 1.5000
    d 0.9990
    Tr 0.0010
    Tf 0.9990 0.9990 0.9990 
    illum 2
    Ka 0.7333 0.7333 0.7333
    Kd 1.0000 1.0000 1.0000
    Ks 0.0980 0.0980 0.0980
    Ke 0.0000 0.0000 0.0000
    map_Kd Cap_01.png
    map_bump Cap_01_Normal.png
    bump Cap_01_Normal.png

newmtl Bark
    Ns 37.6553
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.7333 0.7333 0.7333
    Kd 1.0000 1.0000 1.0000
    Ks 0.0980 0.0980 0.0980
    Ke 0.0000 0.0000 0.0000
    map_Kd BroadleafBark.png
    map_bump BroadleafBark_Normal.png
    bump BroadleafBark_Normal.png

newmtl Leaves
    Ns 37.6553
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.7647 0.7647 0.7647
    Kd 1.0000 1.0000 1.0000
    Ks 0.4118 0.4118 0.4118
    Ke 0.0000 0.0000 0.0000
    map_Kd BroadleafLeaves.png
    map_Ks BroadleafLeaves_Spec.png
    map_d BroadleafLeaves_Alpha.png
    map_bump BroadleafLeaves_Normal.png
    bump BroadleafLeaves_Normal.png

your question is not clear. you have a png that is transparent and you want to see the transparency on your object? — gaitat, Dec 27 '15 at 22:54

score 1 · Answer 1 · edited May 23 '17 at 12:23

Finally! I found solution. I have converted .obj to .js loader with authors of threejs python script (How to convert object to json file for three.js model loader) and then use JSONLoader():

var loader = new THREE.JSONLoader();
loader.load('model.js', function(geometry, materials) {
   var material = new THREE.MeshFaceMaterial(materials);
   var object = new THREE.Mesh(geometry, material);
   ...

OBJMTLLoader() not transparent .png in model

1 Answers1