Отображение текстур от одного лица4 до двух Face3 на Three.js

Question

Я играю с Three.js. Я работаю над проектом, который использует старую версию Three.js. Я пытаюсь заменить старую библиотеку на новую (r71). Все идет хорошо, кроме отображения текстуры.

В старом проекте мы используем Face4, который устарел и был удален в новейшей версии Three.js. Поэтому я создал два Face3 вместо одного Face4. Теперь возникает вопрос: как я могу сделать одну текстуру для покрытия обоих Face3, поскольку они были похожи на один Face4?

Старый псевдо-код с помощью Face4

numberOfFaces = 10; 

function createMyGeometry(){ 
var geometry = new THREE.Geometry(); 
... 

for (var i = 0; i < numberOfFaces; i++) { 
    var face = new THREE.Face4(v1.index, v2.index, v3.index, v4.index, [v1.clone(), v2.clone(), v3.clone(), v4.clone()]); 
    face.centroid.add(v1).add(v2).add(v3).add(v4).divideScalar(4); 
    face.normal = face.centroid.clone().normalize(); 
    face.materialIndex = matIdx; 
    geometry.faces.push(face); 
    geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone(), uv4.clone()]); 
} 
... 
return geometry; 
} 

for (var i = 0; i < numberOfFaces; i++) { 
var texture = THREE.ImageUtils.loadTexture("MyImage"+ i + '.jpg'); 
var material = new THREE.MeshBasicMaterial(); 
material.map = texture; 
material.side = THREE.FrontSide; 
materials.push(material); 
} 
materials = new THREE.MeshFaceMaterial(materials); 
myGeometry = new THREE.Mesh(createMyGeometry(), materials); 
scene.add(myGeometry); 

Псевдо-кода с использованием Face3

numberOfFaces = 10; 

function createMyGeometry(){ 
var geometry = new THREE.Geometry(); 
... 

for (var i = 0; i < numberOfFaces; i++) { 
     var face1 = new THREE.Face3(v1.index, v2.index, v3.index, [v1.clone(), v2.clone(), v3.clone()]); 
     var face2 = new THREE.Face3(v1.index, v3.index, v4.index, [v1.clone(), v3.clone(), v4.clone()]); 
     face1.materialIndex = matIdx; 
     face2.materialIndex = matIdx; 
     geometry.faces.push(face1); 
     geometry.faces.push(face2); 
     geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone(), uv4.clone()]); 
} 
... 
return geometry; 
} 
for (var i = 0; i < numberOfFaces; i++) { 
var texture = THREE.ImageUtils.loadTexture("MyImage"+ i + '.jpg'); 
var material = new THREE.MeshBasicMaterial(); 
material.map = texture; 
material.side = THREE.FrontSide; 
materials.push(material); 
} 
materials = new THREE.MeshFaceMaterial(materials); 
myGeometry = new THREE.Mesh(createMyGeometry(), materials); 
scene.add(myGeometry); 

Answer 1

Вы просто должны делать то же самое с вершинных UVS, как с вершинами.

Например:

geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone()]); 
geometry.faceVertexUvs[0].push([uv1.clone(), uv3.clone(), uv4.clone()]);