Currently, I am utilizing Three.js to create a polyhedron with various colors and text on each face, all generated from a canvas element. While I am focusing on polyhedra that have native classes in Three.js for now, my goal is to eventually explore more irregular shapes.
There are numerous resources online, such as StackOverflow posts like Three.js cube with different texture on each face, that demonstrate how to achieve this effect with cubes. However, I have not been able to locate any examples showcasing the same technique applied to non-cube shapes. Despite this, the process that works for CubeGeometry seems to also work for TetrahedronGeometry and similar shapes.
Below is a simplified version of the code I am using to generate the polyhedron:
switch (shape) {
case "ICOSAHEDRON" :
// Step 1: Create the appropriate geometry.
geometry = new THREE.IcosahedronGeometry(PolyHeatMap.GEOMETRY_CIRCUMRADIUS);
// Step 2: Generate individual materials for each face and combine them into one large MeshFaceMaterial.
material = new THREE.MeshFaceMaterial(createMaterials(20, textArray));
// Step 3: Assign each face with its corresponding material.
for (x = 0; face = geometry.faces[x]; x++)
{
face.materialIndex = x;
}
break;
// Repeat the above steps for other shapes.
}
function createTexture (title, color) {
var canvas = document.createElement("canvas");
// Canvas generation logic goes here.
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return new THREE.MeshLambertMaterial({ map : texture });
}
function createMaterials (numFacets, textArray)
{
var materialsArray = [],
material;
for (var x = 0, xl = numFacets; x < xl; x++)
{
material = createTexture(textArray[x], generateColor(textArray[x]));
material.side = THREE.DoubleSide;
materials.push(oMaterial);
}
return materials;
}
This technique renders cubes flawlessly, however, when it comes to other polyhedra, the textures do not behave as intended:
It's challenging to pinpoint exactly what is causing the issue. Essentially, while each face displays the correct texture, the texture itself appears stretched and shifted to cover the entire polyhedron. In simpler terms - when viewing the shape head-on, the upper-left face only shows the upper-left portion of its texture, the upper-right face only shows the upper-right portion, and so forth.
The faces on the opposite side of the polyhedron do not show any texture detail at all; just colors.
Prior to experimenting with Three.js, I had no prior experience with 3D rendering. Therefore, I presume there might be a step that CubeGeometry performs automatically but its related classes do not. While I could reference other examples posted online, most focus on rendering cubes or using solid colors.
What adjustments need to be made to properly scale and center the textures on non-cube shapes?