2D object in 3D space (by Vertices)



Hi everyone!
I have a problem:
How to draw 2D, flat object given by Vertices in 3D Space?
I have an array with 3D Points, and I want to draw line from Points[0] to Points[1], from Points[1] to Points[2] etc…
Now I have a following solution:
var geometry = new THREE.BufferGeometry();

var vertices = faceToTriangles( VerticesArray );  // my function

var uvs = new Float32Array([
	0.0, 0.0,
	1.0, 0.0,
	1.0, 1.0,
	0.0, 0.0,
	1.0, 1.0,
	0.0, 1.0

geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
var material = new THREE.MeshLambertMaterial( {color: 'red' } );
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh( geometry, material );

function faceToTriangles( VerticesArray )
	var Triangles = new Float32Array( (VerticesArray.length-2)*9 );
	var i = 0;
	for($v=1; $v < Face.Vertices3D.length-1; $v++)
		Triangles[i++] = parseFloat(Face.Vertices3D[0].x);
		Triangles[i++] = parseFloat(Face.Vertices3D[0].y);
		Triangles[i++] = parseFloat(Face.Vertices3D[0].z);
		Triangles[i++] = parseFloat(Face.Vertices3D[$v].x);
		Triangles[i++] = parseFloat(Face.Vertices3D[$v].y);
		Triangles[i++] = parseFloat(Face.Vertices3D[$v].z);

		Triangles[i++] = parseFloat(Face.Vertices3D[$v+1].x);
		Triangles[i++] = parseFloat(Face.Vertices3D[$v+1].y);
		Triangles[i++] = parseFloat(Face.Vertices3D[$v+1].z);

	return Triangles;

I wrote it some time ago, and it’s works in most of cases.
It makes a triangles from an objects. But in some cases, function faceToTriangles() works incorretly. It generates triangles going beyond the Object.

How make it correctly?
How to display 2D flat object (given by an array of vertices) in 3D space?
Maybe without converting to triangles?

(sorry for my english)


Does it mean, that all those points are coplanar and they form a contour (which you want to fill with triangles)?


Yes, all of them are coplanar, and next elements of an array form a contour. I want to display it (fill with some color).


One more question: order of points is clockwise or counter-clockwise?
Or it can be either, kind of points of one contour is in clockwise, another contour is in counter-clockwise, and so on.


One time clockwise, another time counter-clockwise.
But always order of points in array is orders of points in object. That means:
1. Edge: Points[0] -> Points[1]
2. Edge: Points[1] -> Points[2]
3. Edge: Points[2] -> Points[3]

n. Edge: Points[n] -> Points[0]


Could you provide a list of points, so I could check my idea with something real?
Also, do you want to have those figures visible from both sides, front and back?


Yeah, sure: (JSON format)

Yes, but I think that I can do it with:
material.side = THREE.DoubleSide;


I’ve answered on Stackoverflow :slight_smile:


Thanks. It was my question on stackoverflow :wink:


Yeah, I see :slight_smile:
Just in case: https://jsfiddle.net/prisoner849/gnp5ktjh/


As always an elegant solution. :+1:t2:

I once tested some variants.

It seems that the method also works with non-complanar points.
Only uv’s missing


It seems that non-complanar points also work. Only uv’s missing!


Thanks for testing :beers:


Kind of a related topic:

I was sure that it won’t last so simple, and there was evolving: