使用Three.js将纹理应用于非立方体多面体

我正在使用Three.js生成从画布元素生成的多面体，每面具有不同的颜色和文本。现在，我坚持使用Three.js包含本机类的多面体，但在某些时候，我想扩展为更不规则的形状。

在线上有许多示例（包括StackOverflow帖子，例如在每个面上具有不同纹理的Three.js多维数据集）解释了如何使用多维数据集。我尚未成功找到任何显示出适用于非多维数据集的相同技术的示例，但是在大多数情况下，适用于CubeGeometry的相同过程也适用于TetrahedronGeometry等。

这是我用来生成多面体的代码的简化版本：

switch (shape) {
    case "ICOSAHEDRON" :

        // Step 1: Create the appropriate geometry.
        geometry = new THREE.IcosahedronGeometry(PolyHeatMap.GEOMETRY_CIRCUMRADIUS);

        // Step 2: Create one material for each face, and combine them into one big
        // MeshFaceMaterial.
        material = new THREE.MeshFaceMaterial(createMaterials(20, textArray));

        // Step 3: Pair each face with one of the materials.
        for (x = 0; face = geometry.faces[x]; x++)
        {
            face.materialIndex = x;
        }
        break;

     // And so on, for other shapes.
}

function createTexture (title, color) {
    var canvas = document.createElement("canvas");

    // Magical canvas generation happens 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;
}

多维数据集使用此技术可以完美渲染，但在其他多面体中，纹理的行为不符合预期：

很难确切解释这里发生了什么。本质上，每个面都显示正确的纹理，但是纹理本身已经拉伸和移动，好像覆盖了整个多面体。换句话说-观察固定的形状-左上表面仅显示其纹理的左上部分，右上表面仅显示右​​上部分，依此类推。

多面体另一侧的面完全没有显示纹理细节。只有颜色。

在尝试Three.js之前，我没有3D渲染的经验，因此我想我缺少了CubeGeometry自动处理的某些步骤，但没有它的姊妹类处理。我会参考其他已发布的示例，但是大多数示例都是渲染多维数据集，而那些通常不使用纯色的多维数据集。

要正确缩放和缩放非立方体形状上的纹理，需要做什么？