使用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將紋理應用於非立方體多面體

回答

相關問題