I'm currently working on a project where I am trying to recreate a truncated icosidodecahedron using three.js. My goal is to apply unique image textures to each of the faces of this complex shape.
To start, I used the code from this Three.js example as a reference point because I am relatively new to Three.js and 3D graphics. However, I have encountered difficulties while trying to implement texture materials into my project.
The snippet below is crucial to my current approach. In the initial setup, I have defined three different solid color materials based on the number of 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++;
}
}
After applying the above code, this correctly generates the following output:
https://i.sstatic.net/t1DvF.png
However, once I attempt to replace even one of these materials with 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 encounter various WebGL errors, along with the texture failing to display properly.
[.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.
This issue has led me to wonder if I might be making a simple mistake or if there are limitations when it comes to applying textures to Face3 triangles?
Additionally, I am open to suggestions regarding alternative approaches to building this object while maintaining the ability to showcase distinct textures on different faces.