Mappage de texture d'un Face4 à deux Face3 sur Three.js

Question

Je joue avec Three.js. Je travaille sur un projet qui utilise une ancienne version de Three.js. J'essaye de remplacer l'ancienne bibliothèque par la nouvelle (r71). Tout se passe bien sauf le mappage de texture.

Dans l'ancien projet, nous utilisons le Face4 qui est obsolète et qui a été supprimé dans la dernière version de Three.js. J'ai donc créé deux Face3 au lieu d'un seul Face4. Maintenant, la question est: comment puis-je faire une texture pour couvrir à la fois Face3 comme ils étaient comme un seul Face4?

pseudo-ancien code en utilisant 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); 

pseudo-code à l'aide 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

Vous devez juste faire la même chose avec Ubs de sommet comme avec les sommets.

Par exemple:

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