2面のテクスチャ

Question

テクスチャでダイヤモンドシェイプを作成しようとしています。私が望むジオメトリを作成しましたが、現在はダイヤモンドにテクスチャを適用するのに問題があります。

それは顔の上で分裂しているように見えますが、私は本当に理由は分かりません。私はかなり新しい3人です.js、どんな助けも素晴らしいでしょう。この問題の原因は何ですか？どのように解決できますか？ここで

は私の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

注文

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