Search code examples
three.jsmeshuv-mapping

three.js Geometry.faceVertexUvs setup is confusing

I am working on implementing a custom model importer. The file contains all the necessary info (vertices, vertex normals, vertex uv coordinates, materials, etc.) It's important to note that the file contains models with multiple materials. The setup of the vertices is fairly straight forward and is working correctly. The setup of the faces I'm not 100% sure about. I do the following:

meshDict[name].faces.push(
new THREE.Face3(parseInt(triangles[t]),
                parseInt(triangles[t + 1]),
                parseInt(triangles[t + 2]),
                [normals[parseInt(triangles[t])],
                 normals[parseInt(triangles[t + 1])],
                 normals[parseInt(triangles[t + 2])]],
                new THREE.Vector3(1, 1, 1), matIndex));

Here: t is the index iterator of the triangles array, normals is an array that holds the normal information of the vertices and matIndex is the material index of the face based on the sub-mesh number from the object file. This also seems to work correctly.

Now for the hard part. I searched all day for a clear explanation and/or good example of how to set-up the faceVertexUvs of a multi material mesh, but every second post I found shows a different method to set this up. After a lot of trial and error I got to this solution that works, but throws a LOT of warnings...

    for (var f = 0; f < faces.length; f++)
    {
        if (currentMesh.faceVertexUvs[faces[f].materialIndex] == undefined)
        {
            currentMesh.faceVertexUvs[faces[f].materialIndex] = []
            faceOffset = (faces[f].materialIndex == 0? 0 : 1) * f;
        }

        currentMesh.faceVertexUvs[faces[f].materialIndex].push(f);
        currentMesh.faceVertexUvs[faces[f].materialIndex][f - faceOffset] = [];

        currentMesh.faceVertexUvs[faces[f].materialIndex][f - faceOffset].push(uvs[faces[f].a]);
        currentMesh.faceVertexUvs[faces[f].materialIndex][f - faceOffset].push(uvs[faces[f].b]);
        currentMesh.faceVertexUvs[faces[f].materialIndex][f - faceOffset].push(uvs[faces[f].c]);
    }

Here uvs is an array of Vector2 of the same length as the vertices array. Basically I am doing: faceVertexUvs[materialIndex][faceIndex][uvs[a], uvs[b], uvs[c]].

The number of material indexes is equal to the number of sub-meshes that the object has.

So this solution kinda works OK, but some of the textures are not looking correct (I suspect because the UV mapping of that area is not being set correctly), and I am getting a lot of warnings that say:

enter image description here

Important to note that all the models look OK in the exporting program so the issue is not from there.

Any ideas as to what I am doing wrong here?

Solution

  • So I think I finally managed to figure it out and I got it working correctly, and since the documentation is severely lacking in this area, and the examples are not quite clear I'll post my understanding of this topic here for anyone having the same issue. So it goes like this:

    Geometry.faveVertexUvs[UV LAYER][face index][uv[face.a], uv[face.b], uv[face.c]]

    As far as I understand unless you have an AO (ambient occlusion) map, you only use UV LAYER 0. Now, if you define a material index when setting up the faces of the geometry then each face will be rendered with the corresponding material, and there is no need to split the UVs into separate areas like I was doing in my question. So you only have to use:

    Geometry.faces.push(new THREE.Face3(v0, v1, v2, [n0, n1, n2], vertexColor, materialIndex));