How to “flatten” a 3D mesh into a 2D shape in Three.js

Question

I'm trying to flatten a 3D mesh into a 2D shape. What I'm trying to achieve is something like this

Basically what you see in the image is a given mesh and its silhouettes along different views. I'd like to do the same for any given mesh with Three.js, but I don't know how can I get the silhouette.

I thought of two possible solutions:

1) Copy the mesh and scale it along the given axis so that it get flattened (for example, if I want to get the silhouette of the shape I see looking from positive Z to negative, I'd simply scale it like this:

myMesh.scale.z = 0.001 // Small value to make it "2D-like"

Problem: I'm copying and redrawing a mesh that could be potentially very large, so that's not very efficient.

2) Project the vertices of the mesh to a 2D plane so that they're all at the same level and then create lines among the vertices.

Problem: Put like this it doesn't work at all, because I lose information about how the vertices are connected as faces. The resulting shape will depend completely on how the order the vertices are projected.

For example, if we consider this mesh and I project the vertices "in front of me" from that point of view I would get these points (more or less), but I wouldn't know how to connect them.

How should I proceed?

Answer 1

I suggest making additional render passes to textures with orthogonal projection and creating planes with these textures on them.

If you don't need material details of object it is worth to change its material to some simple material. Also if your planes and object are in the same scene, you might want to make them invisible when you render with ortho.

In three.js WebGLRenderTarget could be used for rendering to texture, OrthographicCamera for getting ortho projection and MeshBasicMaterial as simple material.