Применение текстур к многогранникам без кубов с помощью Three.js

Question

Я использую 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; 
} 

Кубики рендеринга отлично, используя эту технику, но с другой многогранников, текстуры не так, как ожидалось:

Трудно точно объяснить, что здесь происходит. По существу, каждое лицо отображает правильную текстуру, но сама текстура растянута и сдвинута, как будто для покрытия всего многогранника. Другими словами - глядя на форму мертвого - верхняя левая сторона показывает только верхнюю левую часть ее текстуры, верхняя правая сторона показывает только верхнюю правую часть и так далее.

Лица на противоположной стороне многогранника не показывают никакой детали текстуры; только цвета.

У меня не было опыта работы с 3D-рендерингом, прежде чем экспериментировать с Three.js, поэтому я предполагаю, что есть какой-то шаг, который мне не хватает, который обрабатывается автоматически CubeGeometry, но не его сестринскими классами. Я хотел бы ссылаться на другие примеры, которые были опубликованы, но большинство примеров представляют собой кубы, а те, которые не используются, обычно используют сплошные цвета.

Что должно произойти, чтобы текстуры на фигурах некуба были масштабированы и центрированы правильно?

Answer 1

Вам необходимо установить новые УФ.

Я сделал простой пример, как это сделать, не знаю, является ли это лучшим способом.

jsFiddle example

Update

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

     ]); 
    }