Faces normal, wenn SVG Extrudieren

Question

Das obige Bild THREE Szene mit einer Extrusion von SVG-Pfad ist. Sie können die Szene Achse in der Mitte sehen, blau Z ist, ist rot X und grün Y. Dies ist der SVG Pfad I Extrudieren bin:

M202.387 120.741 C 201.599 122.809,201.303 275.025,201.728 459.000 C 202.495 791.243,202.540 793.500,208.500 793.500 C 214.459 793.500,214.505 791.246,215.263 462.759 L 216.026 132.018 714.763 131.259 C 1211.247 130.503,1213.500 130.473,1213.500 124.500 C 1213.500 118.527,1211.247 118.497,708.659 117.741 C 306.365 117.137,203.528 117.746,202.387 120.741 M1804.140 121.356 C 1803.221 123.752,1803.343 127.127,1804.411 128.856 C 1805.758 131.035,2049.634 132.000,2598.927 131.999 L 3391.500 131.998 3389.682 540.749 C 3388.682 765.562,3387.669 1088.209,3387.432 1257.743 L 3387.000 1565.985 2787.750 1566.743 L 2188.500 1567.500 2187.736 1868.250 L 2186.971 2169.000 1199.995 2169.000 L 213.018 2169.000 212.259 1685.250 C 211.504 1203.753,211.472 1201.500,205.500 1201.500 C 199.528 1201.500,199.496 1203.753,198.741 1688.682 C 198.184 2046.264,198.880 2176.946,201.358 2179.932 C 206.061 2185.598,2192.737 2186.063,2198.400 2180.400 C 2201.152 2177.648,2202.000 2106.594,2202.000 1878.871 L 2202.000 1580.942 2801.250 1581.030 L 3400.500 1581.119 3402.702 1071.809 C 3403.914 791.689,3404.589 465.637,3404.202 347.250 C 3403.539 143.982,3403.792 131.999,3408.750 132.000 C 3412.350 132.000,3414.000 129.643,3414.000 124.500 L 3414.000 117.000 2609.906 117.000 C 1909.708 117.000,1805.596 117.563,1804.140 121.356 

Dieser Weg etwa entspricht dieses Bild:

ich Extrudieren dieser SVG den Code aus thisTHREE Beispiel. Ich habe es nur ein wenig geändert, um jeder Geometriefläche zufällige Farben hinzuzufügen.

Mein Problem ist hier mit den Normalen der Gesichter. Ich habe ein kleines Rechteck, das mit dem Cursor bewegt und positioniert sich an der Oberfläche immer parallel, wo die Maus auf ist, zum Beispiel:

Sie können die kleinen roten Quadrat parallel zur Wandfläche sehen, jetzt , dies mit allen Gesichtern nicht, hier arbeitet die Cursor in anderem Teil der Wand positioniert sind:

der Platz ist nicht parallel zu der Wandfläche, so, wenn ich die normalen bekommen von Dieses Gesicht mit Raycast ich bekomme dies:

Wie Sie die Normale des Gesichts sehen können, ist die Y-Achse (die grüne Achse in der Mitte der Szene), wenn es um die Z-Achse, wie im ersten Bild sein soll, wenn das rote Rechteck bleibt parallel zum Gesicht der Wände.

Warum passiert das? Muss ich etwas anwenden, damit die Gesichter normal sind?

EDIT:

Die extrudierte SVG ist kein Mesh sondern ein Group in diesem Fall, die 2 'Meshes'. Das Problem scheint zu erscheinen, wenn ich die Gruppe rotiere: group.rotateX(THREE.Math.degToRad(90));

Answer 1

Ok, ich habe es gelöst, der Helfer FaceNormalsHelper hat mir sehr geholfen. Ich drehte die Group mit group.rotateX(THREE.Math.degToRad(90)). Dies funktionierte gut, aber die Geometry wird nicht zusammen mit der Gruppe gedreht, so dass die mit Raycast erfassten Normalen nicht mit den Gitterflächen übereinstimmen. Um es zu lösen, habe ich nur die ganze Geometry in der Gruppe anstelle der gesamten Gruppe gedreht; Auf diesem Weg werden die Mesh und Geometry rotiert und Normale sind wo erwartet!

Ich habe auch die von @gaitat vorgeschlagenen Linien

group.children[n].geometry.rotateX(THREE.Math.degToRad(90)); 
group.children[n].geometry.computeFaceNormals(); 
group.children[n].geometry.computeVertexNormals();