Search code examples
3dthree.jscinema-4d

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

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:

enter image description here

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

Solution

  • 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!

    enter image description here

    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:

    enter image description here

    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:

    enter image description here

    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:

    enter image description here

    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.