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

我正在使用Three.js生成一个多面体，每个面上都有不同的颜色和文本，由canvas元素生成。现在，我坚持使用Triple.js包含本机类的多面体，但在某些时候，我想扩展到更不规则的形状

在线上有许多示例（包括StackOverflow帖子，如）解释了如何使用多维数据集。我还没有成功地找到任何样品，显示了同样的技术应用于非立方体，但在大多数情况下，同样的过程，适用于立方几何也适用于四面体几何等等

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

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;
}

开关（形状）{
案例“二十面体”：
//步骤1：创建适当的几何图形。
几何=新的三个二十面体几何（多热图几何半径）；
//步骤2：为每个面创建一种材质，并将它们组合成一个大的面
//网面材料。
材质=新的三个.MeshFaceMaterial（createMaterials（20，textArray））；
//步骤3：将每个面与其中一种材质配对。
对于（x=0；面=几何体。面[x]；x++）
{
face.materialIndex=x；
}
打破
//等等，对于其他形状。
}
函数createTexture（标题、颜色）{
var canvas=document.createElement（“canvas”）；
//神奇的画布生成发生在这里。
var纹理=新的三个纹理（画布）；
texture.needsUpdate=true；
返回新的3.MeshLambertMaterial（{map:texture}）；
}
函数createMaterials（numFacets，textArray）
{
var materialsArray=[]，
材料；
对于（变量x=0，xl=numFacets；x

立方体使用此技术进行完美渲染，但对于其他多面体，纹理的行为与预期不符：

很难准确地解释这里发生了什么。基本上，每个面都显示了正确的纹理，但纹理本身已被拉伸和移动，好像覆盖了整个多面体。换言之，观察死角的形状，左上表面仅显示其纹理的左上部分，右上表面仅显示右上部分，依此类推

多面体另一侧的面根本不显示纹理细节；只有颜色

在试用Three.js之前，我没有3D渲染方面的经验，所以我想我遗漏了一些步骤，这些步骤是由CubeGeometry自动处理的，而不是它的姐妹类。我会参考已经发布的其他示例，但大多数示例都是渲染立方体，而那些没有渲染立方体的示例通常使用纯色

---

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

您需要设置新UV

我举了一个简单的例子，不知道这是不是最好的方法

更新

  geometry.faceVertexUvs[0] = [];

   for(var i = 0; i < geometry.faces.length; i++){                              

        // set new coordinates, all faces will have same mapping.            
        geometry.faceVertexUvs[0].push([
        new THREE.Vector2( 0,0 ),
        new THREE.Vector2( 0,1 ),
        new THREE.Vector2( 1,1),

        ]);
    }

geometry.faceVertexUvs[0]=[]；
对于（var i=0；i

如何使其覆盖整个面部而不是3个三角形？想让图像只覆盖星形面吗？