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
– Mugen87, Commented Jan 28, 2019 at 8:58
Blender file drive.google.com/file/d/1nfRLu_BzHYvycXZG5Jqjymj5eV6tYvxP/… — Vedant B Hegde
– Vedant B Hegde, Commented Jan 28, 2019 at 13:57
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
– gaitat, Commented Jan 28, 2019 at 15:20
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
– Vedant B Hegde, Commented Jan 28, 2019 at 16:47
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, Commented Jan 29, 2019 at 0:15

gaitat · Accepted Answer · 2019-01-29 17:45:21Z

1

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

answered Jan 29, 2019 at 17:45

gaitat

12.7k5 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vedant B Hegde Over a year ago

Here the transparency is lost. I want to make portion outside the spects transparent.

gaitat Over a year ago

that is a totally different question from the one above. please accept this answer and ask a new question.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related