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

我使用Three.js来生成每个面上具有不同颜色和文本的多面体，从画布元素生成。现在，我坚持使用Three.js包含本地类的多面体，但是在某些时候，我想分支出更多不规则的形状。使用Three.js将纹理应用于非立方体多面体

在网上有很多示例可用（包括StackOverflow的帖子，如Three.js cube with different texture on each face），它解释了如何用多维数据集做到这一点。我没有成功找到任何显示相同技术应用于非立方体的样本，但大部分情况下，适用于立方体几何的相同过程也适用于四面体几何等等。

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

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

立方体呈现完美使用这种技术，但与其他多面体，如预期的纹理不规矩：

Icosahedron Example

很难解释这里发生了什么。实质上，每张脸都显示正确的纹理，但纹理本身已被拉伸并移动，好像覆盖整个多面体一样。换句话说 - 看着死者的形状 - 左上角只显示其纹理的左上角部分，右上角仅显示右上角部分，依此类推。

多面体反面的面没有显示任何纹理细节;只有颜色。

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

需要对非立方体形状上的纹理进行缩放和居中设置？

来源

2013-10-03 Eric

您需要设置新的UV。

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

jsFiddle example

更新

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-04 19:46:40 uhura

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

回答

相关问题