I am working on converting a 3D mesh into a 2D shape. My goal is to achieve a result similar to the one shown in this image.
The image displays a given mesh and its silhouettes from various viewpoints. I aim to replicate this process for any given mesh using Three.js, but I am unsure of how to obtain the silhouette.
I have considered two potential solutions:
1) Duplicating the mesh and scaling it along a specific axis to flatten it (for instance, if I wish to capture the silhouette from positive Z to negative Z, I could scale it as follows:
myMesh.scale.z = 0.001 // A small value for a "2D-like" appearance
Challenge: Copying and redrawing a potentially large mesh may not be efficient.
2) Projecting the vertices of the mesh onto a 2D plane to align them at the same level, then connecting them with lines.
Challenge: This method is flawed because it disregards the connections between vertices that form faces. The resulting shape will vary based on the order in which vertices are projected.
For example, considering this mesh, projecting the vertices "in front" would yield these points (approximately), but the connection between them remains unknown.
How should I proceed?