Wie man ein 3D-Mesh in eine 2D-Form "glätten" kann in Three.js

Question

Ich versuche, ein 3D-Mesh in eine 2D-Form zu glätten. Was ich versuche zu erreichen, ist etwas wie this

Grundsätzlich, was Sie in dem Bild sehen, ist ein gegebenes Mesh und seine Silhouetten entlang verschiedener Ansichten. Ich würde das gleiche für jedes Mesh mit Three.js machen, aber ich weiß nicht, wie ich die Silhouette bekommen kann.

Ich dachte an zwei mögliche Lösungen:

1) das Netz kopieren und entlang der gegebenen Achse skalieren, so dass es abgeflacht erhalten (zum Beispiel, wenn ich die Silhouette der Form bringen Ich sehe Suche aus positive Z zu negativ, würde ich vergrößere es einfach so:

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

Problem: ich bin Kopieren und ein Netz neu zu zeichnen, die möglicherweise sehr groß sein könnte, das ist so nicht sehr effizient

2). Projizieren Sie die Scheitelpunkte des Gitters auf eine 2D-Ebene, so dass sie sind alle auf der gleichen Ebene und dann Linien zwischen den Vertices erstellen.

Problem: So gestellt funktioniert es überhaupt nicht, weil ich Informationen darüber verloren habe, wie die Scheitelpunkte als Flächen verbunden sind. Die resultierende Form hängt vollständig von der Reihenfolge ab, in der die Scheitelpunkte projiziert werden.

Zum Beispiel, wenn wir diese mesh betrachten und ich projiziere die Eckpunkte „vor mir“, aus dieser Sicht würde ich these points (mehr oder weniger), aber ich würde nicht wissen, wie sie zu verbinden.

Wie soll ich fortfahren?

Answer 1

Ich empfehle, zusätzliche Rendering-Pässe zu Texturen mit orthogonal projection und Erstellen von Ebenen mit diesen Texturen auf ihnen.

Wenn Sie keine Materialdetails des Objekts benötigen, lohnt es sich, das Material in ein einfaches Material zu ändern. Auch wenn sich Ihre Flugzeuge und Ihr Objekt in derselben Szene befinden, möchten Sie sie möglicherweise unsichtbar machen, wenn Sie mit ortho rendern.

In three.js WebGLRenderTarget könnte für das Rendern auf Textur, OrthographicCamera für ortho Projektion und MeshBasicMaterial als einfaches Material verwendet werden.