挤出SVG时面向正常

Question

上面的图片是THREE场景，其中包含来自SVG路径的拉伸。您可以在中心看到场景轴，蓝色是Z，红色是X，绿色是Y.这是我挤出的SVG路径：

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

此路径与此图片大致相同：

我使用this THREE示例中的代码挤出此SVG。我只是稍微改了一下，为几何体的每个面添加随机颜色。

我的问题在于面孔＆＃39;法线。我有一个随光标移动的小矩形，它的位置总是与鼠标所在的表面平行，例如：

你可以看到平行于墙面的小红色方块，现在，这不适用于所有的面，这里的光标位于墙的其他部分：

正方形与墙面不平行，因此，如果我使用光线投影得到这张脸的法线，我会得到这个：

正如您所看到的那样，当红色矩形与墙壁保持平行时，正面应该是Y轴（场景中心的绿色轴），当它应该是Z轴，如第一张图片中那样;面对。

为什么会这样？我是否必须应用某些东西才能使面部正常？

修改

挤压的SVG不是Mesh，而是Group，在这种情况下包含2＆＃39;网格＆＃39;。当我旋转小组时似乎出现问题：group.rotateX(THREE.Math.degToRad(90));

Answer 1

好的，我解决了帮助FaceNormalsHelper给了我很多帮助。我正在使用Group轮换group.rotateX(THREE.Math.degToRad(90))。这工作正常，但Geometry不与组一起旋转，因此使用raycast检测到的法线与网格面不匹配。为了解决这个问题，我只旋转了组中的所有Geometry而不是整个组;通过这种方式，Mesh和Geometry会旋转，法线会在预期的位置！

我还添加了@gaitat

建议的行

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