Polygon mapping or projection

Currently, I have vertex data for a polygon, which may be a concave or convex polygon. Now, I want to imprint this polygon onto a mesh with any material, even a plain color would suffice. I looked at some examples in Three.js, and DecalGeometry seems to be the most suitable library for my expectations. However, when I attempted to modify the generation of the geometry, I encountered an issue where the orientation of the polygon appears to be fixed, retaining only the shape. When I tried to delve deeper into the modification, I found it to be quite complex. Now, I’d like to ask if there are better solutions.

The following code represents my modifications to the DecalGeometry source. The term ‘polygon’ denotes the collection of polygons I provide.

			// second, clip the geometry so that it doesn't extend out from the projector

			// decalVertices = clipGeometry( decalVertices, plane.set( 1, 0, 0 ) );
			// decalVertices = clipGeometry( decalVertices, plane.set( - 1, 0, 0 ) );
			// decalVertices = clipGeometry( decalVertices, plane.set( 0, 1, 0 ) );
			// decalVertices = clipGeometry( decalVertices, plane.set( 0, - 1, 0 ) );
			for ( let i = 0; i < polygons.length - 1; i ++ ) {

				const side = polygons[ i ].clone().sub( polygons[ i + 1 ].clone() );
				const normal = new Vector3( 0, 0, - 1 ).cross( side ).normalize();
				// normal.transformDirection(mesh.matrixWorld);
				decalVertices = clipGeometry( decalVertices, plane.copy( normal ) );

			}

			decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, 1 ) );
			decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, - 1 ) );

The 3rd parameter to the DecalGeometry constructor is “orientation” which is a new THREE.Euler(x,y,z) rotation.

I understand that the second parameter is “orientation,” but my logic involves replacing the Quadrangular used for mapping with polygonal prism. I thought this would result in correctly oriented clipping surfaces, but it did not work.

Can you describe on a higher level what/why you are trying to achieve?

I may be able to lead you down an alternate frustrating rabbit hole…

The situation is like this: in my project, there is a requirement to render road surfaces and markings on the roads. Both the road surfaces and the markings only consist of vertex information. When I used this vertex information to construct a triangulated mesh using Earcut and rendered it, I found that some markings had vertices at lower heights than the road surface. This caused parts or even the entire markings to be obscured by the road surface. Even after projecting the marking vertices along the z-axis onto the road surface, I realized that it did not resolve the aforementioned issue because the road surface has variations in elevation. In my search for a solution, I came across DecalGeometry, which led to the creation of this post.
image
image