I've scoured the entire internet and tried numerous methods, but to no avail. How can I fix the texture transparency bug? Please refer to the image.
https://i.sstatic.net/L4SOI.png
When viewing the 3dsmax model, everything appears fine. However, after converting it to .js format from .obj using a python script, the .png files turned transparent (since .obj does not support transparency).
Please help me find a solution to this issue. 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 seems unreachable, but omitting if(..) prevents it from working
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);
});
});
Rendering code:
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, premultipliedAlpha: true });