How do I display 3d object (obj format) with PNG texture in threejs?

Question

I am referring to this. Followed blender render method where the material is made transparent. I used PNG image as texture on a plane in blender. It is showing correctly in rendered mode in blender. But when I export it as obj and load obj & mtl in online 3d viewer or threejs, the object is not visible.

Blender file https://drive.google.com/file/d/1nfRLu_BzHYvycXZG5Jqjymj5eV6tYvxP/view?usp=sharing

Obj file https://drive.google.com/file/d/1gbxpyjpQCz-CG4I91S6XhsmRWyAR_HK_/view?usp=sharing

Mtl file https://drive.google.com/file/d/1lSrtM6Fxgsfrp_zUX_R3Fg_MzrIRCxpB/view?usp=sharing

PNG https://drive.google.com/file/d/1KBGWwm-iikbz14bfR9w0_iUb5N6Km_RP/view?usp=sharing

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('models/');
mtlLoader.setPath( 'models/' );
var url = "spects_plane1.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'models/' );
    objLoader.load( 'spects_plane1.obj', function ( object ) {

        spectsObj.add(object);

    },function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    function ( error ) {
        console.log( 'An error happened' );
    });

});
spectsObj.position.set(0, 0, -1);

scene.add(spectsObj);

var light = new THREE.PointLight( 0xffffff, 1, 0 );

light.position.set(1, 1, 1);

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.50);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.50);

scene.add(light);

When you have problems with loading 3D assets, it's important to share your assets in the thread. So please upload your Blend, OBJ/MTL and texture files. — Mugen87
Blender file drive.google.com/file/d/1nfRLu_BzHYvycXZG5Jqjymj5eV6tYvxP/… — Vedant B Hegde
your model is just a single plane with a texture on it. where is your camera? do you have lights in the scene? Are you sure you are not viewing the model from its thin side? Only code and probably a fiddle can answer these questions. — gaitat
Beginner in blender, I have a camera and lights in blend file. The model is not visible even if it is rotated in 3dviewer.net. — Vedant B Hegde
if the mtl file is as you posted it then it contains absolute paths. You should remove those. After that, I have successfully loaded your model in meshlab. — gaitat

gaitat gaitat · Accepted Answer · 2019-01-29T17:45:21

Use this material file and it should load just fine in 3dviewer.net. You had specified Ka to be 1.0 when you want it to be close to 0.2 generally. But most importantly you had specified opacity 0.0 which mean the object is not visible. I changed it to 1.0

newmtl Material.001
Ns 96.078431
Ka 0.200000 0.200000 0.200000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2
map_Kd spects2.png
map_d spects2.png

How do I display 3d object (obj format) with PNG texture in threejs?

1 Answers