2

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

网上有许多示例（包括 StackOverflow 帖子，例如Three.js cube with different texture on each face），解释了如何使用立方体进行此操作。我还没有成功找到任何样本，这些样本显示了应用于非立方体的相同技术，但在大多数情况下，适用于 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 自动处理的步骤，而不是它的姊妹类。我会参考已发布的其他示例，但大多数示例都是渲染立方体，而那些通常不使用纯色的示例。

非立方体形状上的纹理需要发生什么才能正确缩放和居中？

4

1 回答 1

2

您需要设置新的 UV。

我做了一个简单的例子如何做到这一点，不知道这是否是最好的方法。

jsFiddle 示例

更新

  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),

        ]);
    }
于 2013-10-04T19:46:40.147 回答