CODEWITHSUNDEEP
webthree.js3dmodelingvertex
FacePuncher7
FacePuncher7

Reputation: 139

Threejs OBJLoader'd mesh appears to have incorrect vertex ordering

I'm using OBJLoader to load an OBJ file into my scene.

For whatever reason the vertex ordering seems to be out of whack.

Here is a pic of my model in blender:

enter image description here

And here is a pic of my model in three:

enter image description here

I've seen similar effects before with models and it's always been due to vertex ordering so I make the assumption something is going wrong there.

EDIT By the way, notice the triangles crossing over the letters where in Blender there are none. I believe there may be an offset in the vertex count introduced somewhere.. maybe.

The code:

    const mtlLoader = new MTLLoader();
mtlLoader.load('./test.mtl',
    (materials) => {
        materials.preload();

        const objLoader = new OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(
            './test.obj',
            (object) => {
                scene.add(object);
            },
            (xhr) => {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            (error) => {
                console.log('An error happened');
            }
        );
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.log('An error happened');
    }
)

Upvotes: 1

Views: 262

Answers (1)

M -
M -

Reputation: 28482

By default, Three.js only renders the front face of triangles. It looks like some of your faces are inverted. Make sure you calculate normals in your 3D editor so they're pointing "outwards". That way, when you export them the engine will know which way the triangles should be facing.

Also, Three.js doesn't render n-gons, and it looks like your letters have lots of them. Look at the 'U', it's one flat plane. Make sure you convert to triangles before exporting. Or at least convert to quads, so the exporter can easily subdivide them into tris.

Upvotes: 2

Related Questions