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)

[SOLVED] Is there anything in three to simplify projecting a 3d point on a plane and getting the 2d equivilant

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;

Texture on dynamically created object

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!

Texture on dynamically created object

Thanks for testing :beers:


Kind of a related topic:

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


I have following code now:

function addObject3D( Object )
	var AllFaces = new THREE.Group();
	for(var f=0; f < Object.Faces.length; f++)
		var points = [];
		Object.Faces[f].Vertices3D.forEach(r => {
			points.push(new THREE.Vector3(r.x, r.y, r.z));

		var tri = new THREE.Triangle(points[2], points[1], points[0]);
		var normal = new THREE.Vector3();

		var baseNormal = new THREE.Vector3(0, 0, 1);
		var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, baseNormal);

		var tempPoints = [];
		points.forEach(p => {

		var shape = new THREE.Shape(tempPoints);
		var shapeGeom = new THREE.ShapeGeometry(shape);

		var Texture = new THREE.TextureLoader().load( 'graphic/3D/wood2.jpg' );
		var Material = new THREE.MeshBasicMaterial( { map: Texture } );
		Material.side = THREE.DoubleSide;

		var mesh = new THREE.Mesh( shapeGeom, Material ) ;

		mesh.geometry.vertices = points;

	return AllFaces;

Everything is ok, when I use THREE.MeshBasicMaterial, but when i try to use a texture - the object has a solid color instead the texture.
How to use the texture? :slight_smile:


Possibly, there’s something wrong with UV coordinates.


Also I think threejs is incompatible with php :slight_smile:


My mistake.
There is no <?php line :smiley: