Currently tackling the challenge of creating a diamond shape with a unique texture. After successfully creating the desired geometry, I'm encountering difficulty in applying a texture to the diamond.
The texture seems to be splitting on the face without clear reasoning behind it. As a relative newcomer to three.js, any guidance or suggestions would be greatly appreciated. Could someone pinpoint the cause of this issue and propose a resolution?
For reference, here's my jsfiddle link: 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);