Cant get mesh to work with line vertices (Convert vertices or Line to mesh)

Questions
,
1

Hi, i have vertices that when is use line, it works, but when i change to mesh it doesn’t

 var vertices = new Float32Array( [
	0, 0, 0,
	8, 0, 0,
	8, -2, 0,
	10, -2, 0,
	10, -10, 0,
	0, -10, 0,
	0, 0, 0
]);

geometry.addAttribute( 'position', new THREE.BufferAttribute(vertices, 3));
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
let line = new THREE.Line(geometry, material); // let line = new THREE.Mesh(geometry, material); doesnt work

I tried adding the vertices one after another, but i notice it wont when point has a negative number.

var vertices = new Float32Array( [
   0, 0, 0,
   8, 0, 0,
   8, 5, 0, // if i change to (8, -5, 0) mesh wont show
]);

geometry.addAttribute( 'position', new THREE.BufferAttribute(vertices, 3));
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
let line = new THREE.Mesh(geometry, material);
2

Hi!
A face is visible to a camera when its vertices has counter-clockwise order, when you look at it.
When you set [8, -5, 0], then the order is clockwise and it means that you’re looking at the face from its back, so if you didn’t set material’s side: THREE.DoubleSide or side: THREE.BackSide , then you won’t see the face.

Try this order:

var vertices = new Float32Array( [
   0, 0, 0,
   8,-5, 0,
   8, 0, 0
]);
1 Like
3

Yes! thanks alot, this worked fine, but this

0, 0, 0,
8, 0, 0,
8, -2, 0,
10, -2, 0,
10, -10, 0,
0, -10, 0,
0, 0, 0

Is a mess, I have a line that i just want to cover with a mesh

4

You need to triangulate you set of points. You can achieve it with THREE.Shape().
Check this example: https://jsfiddle.net/prisoner849/tzsevaL8/
There I re-use vertices of the shape buffer geometry in THREE.LineLoop() object.

1 Like
5

Thanks this is what i needed.