Textur über zwei Gesichter

Question

Ich versuche, eine Diamantform mit einer Textur zu erstellen. Ich habe die Geometrie erstellt, die ich möchte, aber jetzt habe ich Probleme beim Auftragen einer Textur auf den Diamanten.

Es scheint es auf dem Gesicht zu teilen und ich bin nicht wirklich sicher warum. Ich bin ziemlich neu bei three.js, also wäre jede Hilfe großartig. Was verursacht dieses Problem und wie kann ich es beheben?

Hier ist meine jsfiddle: https://jsfiddle.net/7fjLar4b/

geometry = new THREE.PlaneGeometry(); 
geometry.vertices = [ 
    new THREE.Vector3(1, 0, 0), 
    new THREE.Vector3(2, 1, 0), 
    new THREE.Vector3(1, 2, 0), 
    new THREE.Vector3(0, 1, 0) 
]; 
geometry.faces = [ 
    new THREE.Face3(1, 2, 3), 
    new THREE.Face3(3, 0, 1) 
]; 
texture = loader.load("https://i.imgur.com/am2LQon.jpg") 

material = new THREE.MeshBasicMaterial({map: texture}); 
mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

Answer 1

Reihenfolge der Eckpunkte für die erste Fläche

geometry.faces = [ 
    new THREE.Face3(2, 3, 1), 
    new THREE.Face3(3, 0, 1) 
];