Faces normale lors de l'extrusion SVG

Question

L'image ci-dessus est THREE scène avec une extrusion à partir d'un chemin de SVG. Vous pouvez voir l'axe de la scène dans le centre, le bleu est Z, le rouge est X et vert est Y. Ceci est le chemin SVG J'extrusion:

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 

Ce chemin est à peu près équivalente à cette image:

Je suis extrusion de ce SVG en utilisant le code de thisTHREE exemple. Je viens de le changer un peu pour ajouter des couleurs aléatoires à chaque face de la géométrie.

Mon problème ici est avec les normales des visages. J'ai un petit rectangle qui se déplace avec le curseur et se positionne toujours parallèle à la surface où la souris est sur, par exemple:

Vous pouvez voir le petit parallèle carré rouge à la face du mur, maintenant , cela ne fonctionne pas avec tous les visages, voici le curseur positionné dans une autre partie du mur:

la place est pas parallèle à la face du mur, donc, si je reçois la normale ce visage en utilisant raycast je reçois ceci:

Comme vous pouvez voir la normale du visage est l'axe Y (axe vert au centre de la scène) quand il devrait être l'axe Z comme dans la première image lorsque le rectangle rouge reste parallèle au visage des murs.

Pourquoi cela se produit-il? Dois-je appliquer quelque chose pour que les visages soient normaux?

EDIT:

Le SVG extrudé est pas un Mesh mais un Group contenant dans ce cas, 2 'Meshes'. Les problèmes semblent apparaître quand je fais tourner le groupe: group.rotateX(THREE.Math.degToRad(90));

Answer 1

Ok, je l'ai résolu l'assistant FaceNormalsHelper m'a beaucoup aidé. Je faisais tourner le Group en utilisant group.rotateX(THREE.Math.degToRad(90)). Cela a bien fonctionné, mais le Geometry n'est pas pivoté avec le groupe de sorte que les normales détectées avec raycast ne correspondent pas aux faces du maillage. Pour le résoudre, je viens de faire pivoter tous les Geometry dans le groupe au lieu du groupe entier; de cette façon, les Mesh et Geometry sont tournés et les normales sont là où on s'y attend!

J'ai aussi ajouté les lignes proposées par @gaitat

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