横跨两张脸的纹理

Question

我试图创建一个带纹理的钻石形状。我已经创建了我想要的几何体，但现在我在将纹理应用到钻石上时遇到了麻烦。

它似乎在脸上分裂，我不确定为什么。我对three.js很新，所以任何帮助都会很棒。导致此问题的原因是什么？如何解决？

这是我的傻瓜：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

第一张脸的顶点顺序

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