CODEWITHSUNDEEP
javascriptthree.js
user499054
user499054

Reputation:

Texture across two faces

I'm trying to create a diamond shape with a texture. I've created the geometry that I want but now I'm having trouble applying a texture onto the diamond.

It seems to be splitting it on the face and I'm not really sure why. I'm pretty new to three.js, so any help would be great. What's causing this issue and how can I resolve it?

Here's my 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);

Upvotes: 0

Views: 46

Answers (1)

prisoner849
prisoner849

Reputation: 17576

Order of vertices for the first face

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

Upvotes: 1

Related Questions