THREE.JS loads the textures from an OBJ/MTL file half way

Question

I have an OBJ, MTL and texture images exported from Cinema 4D. The designers gave me the files in a ZIP. I am trying to display them with the help of THREE.JS. I use the following code:

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('shipka-obj/');
    mtlLoader.load('shipka.mtl', function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('shipka-obj/');
        objLoader.load('shipka.obj', function (object) {
            scene.add(object);
        });
    });

The problem is that the monument is missing parts:

The designers say I do something wrong but I can't see what it can be? Please, help! Thanks.

EDIT: I've uploaded the zip with the obj, mtl and the texture images to Dropbox. Here is a link. https://www.dropbox.com/s/ah8yhjadgihrihr/shipka-obj.zip?dl=0

Without seeing your obj it's difficult to say. The mesh looks like it has inward facing faces, which is a normal issue. Try setting the material to double side. If that does not work, does the obj have multiple mtl files? If so, check: https://stackoverflow.com/questions/41901636/how-to-load-obj-with-multiple-mtl-files-in-three-js — Radio, Jul 25 '17 at 13:53
Additionally, your texture might appear inverted in the y-axis. If that's the case, you might want to flip it: https://stackoverflow.com/questions/29974578/how-to-flip-a-three-js-texture-horizontally — M -, Jul 25 '17 at 17:36
@Radio, thanks for looking at it! I've uploaded the zip with the obj. mtl and the texture images to Dropbox. Here is a link. https://www.dropbox.com/s/ah8yhjadgihrihr/shipka-obj.zip?dl=0 Thanks again. — Martin Dimitrov, Jul 25 '17 at 17:39

M - · Accepted Answer · 2017-07-31T18:52:43.630

You didn't do anything wrong. I looked at your OBJ, and it looks like the person who modeled the geometry made a few mistakes:

Faces:

Three.js can only render three-sided faces (triangles). It understands quads, which it automatically subdivides into triangles, but it doesn't know how to handle faces with five or more edges. The OBJ you were given has poor tesselation, with eight, twelve, sometimes even 20-sided faces!

As you can see, the faces with more than 4 edges are not being rendered in Three.js, but the quads and tris are rendered as expected:

I recommend you request a mesh with better tesselation. Ask for all its faces to be reduced to quads or tris to avoid this issue.

Normals

In the image below, you can see that the platform your structure sits on has normals that are pointing inwards:

The Three.js renderer thinks you want the faces to point in that direction. That's why you can see the underside of the far slopes of this platform, but not the ones closest to the camera:

I recommend you ask your 3d artist to go through the geometry and ensure the normals are all facing outward instead of inward, that way the renderer understands which side of the faces you want to have rendered.

Alternatively, you could ask the renderer to render the backside, or both sides of faces, but I don't recommend this, because you'll be picking and choosing objects all day. Additionally, it's more computationally expensive to render both sides.

Thank you. I will do as you suggest. – Martin Dimitrov Aug 02 '17 at 06:50 — Martin Dimitrov, Aug 02 '17 at 06:50

THREE.JS loads the textures from an OBJ/MTL file half way

1 Answers1