Search code examples
three.jstextures

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


Actually I am trying to upload these .obj and .mtl file by OBJMTLloader. all is working fine but the image in mtl file is loaded by map_d is not uploaded.

newmtl Eyelashes

Ns 10.0000
Ni 1.5000
d 0.5000
Tr 0.0000
Tf 1.0000 1.0000 1.0000 
illum 2
Ka 0.5880 0.5880 0.5880
Kd 0.5880 0.5880 0.5880
Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000

map_Ka EyelashesDiffuseTexture.jpg
map_Kd EyelashesDiffuseTexture.jpg
map_d EyeLashes_Opacity_Texture.jpg

My code is

 var loader = new THREE.OBJMTLLoader();
   loader.load( 'upload/model.obj', 'upload/model.mtl', function ( object ) {
                                        object.position.y = -35;
                                        scene.add( object );
                                } ); 
window.addEventListener( 'resize', onWindowResize, false );
            }
function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

What i need to change in my code. I try so may example and checked so many answers but not get helpful answer.


Solution

  • three.js does not support alpha-maps in any of its materials.

    The work-around is to bake the alpha-map into the alpha-channel of the diffuse map.

    three.js r.66