Irregular polyhedron with different texture materials on each face

Question

I'm trying to create a truncated icosidodecahedron in three.js with different image textures on each of the different face shapes.

I've been using the source of this Three.js example as the basis of my code (as I'm very new to Three.js and 3D), but I'm having trouble getting the texture material working.

This, I believe, is the important part of the code below. In this working example, I've got three solid color materials, selected based on how many vertices each face has.

var materials           = [
    new THREE.MeshBasicMaterial({ color: 0x00ccdd }),
    new THREE.MeshBasicMaterial({ color: 0xccff00 }),
    new THREE.MeshBasicMaterial({ color: 0x6600ff })
];

var faceMaterial        = new THREE.MeshFaceMaterial(materials);

var faceGeom            = new THREE.Geometry();
    faceGeom.vertices   = vertices;

var faceIndex           = 0;

for (var i = 0; i < data.faces.length; i++) {
    var vertexIndexes   = data.faces[i];
    var vertexCount     = vertexIndexes.length;

    for (var j = 0; j < vertexIndexes.length - 2; j++) {
        var face        = new THREE.Face3(vertexIndexes[0], vertexIndexes[j + 1], vertexIndexes[j + 2]);

        switch (vertexCount) {
            case 4:  face.materialIndex = 0; break;
            case 6:  face.materialIndex = 1; break;
            case 10: face.materialIndex = 2; break;
        }

        faceGeom.faces[faceIndex]   = face;
        faceIndex++;
    }
}

And this correctly produces this:

But, when I try to change even one of the materials to an image texture, like so:

var materials           = [
    new THREE.MeshBasicMaterial({ color: 0x00ccdd }),
    new THREE.MeshBasicMaterial({ color: 0xccff00 }),
    new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture("assets/images/lovely-texture.jpg")
    }),
];

. I get a bunch of strange WebGL errors, and the texture does not appear.

[.WebGLRenderingContext-0x7ffc6a6f3ef0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
WebGL: too many errors, no more errors will be reported to the console for this context.

I'm wondering if I'm making a simple mistake, or if the problem is in trying to apply a texture to a Face3 triangle?

Is there a better way to approach building this object and having the ability to show different textures on different faces?

WestLangley WestLangley · Accepted Answer · 2015-07-31T23:45:37

If your material has a texture, your mesh's geometry must have UVs defined.

See SphereGeometry.js for an example of one way to set the THREE.Geometry property faceVertexUvs[ 0 ].

How you set your UVs is up to you. You might want to start with a simpler example, first, unitl you get the hang of it.

three.js r.71

Irregular polyhedron with different texture materials on each face

1 Answers