挤压 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。我只是稍微改变了一下，为几何体的每个面添加随机颜色。

我的问题是面部的法线。我有一个随光标移动的小矩形，它始终与鼠标所在的表面平行，例如：

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

正方形与墙面不平行，因此，如果我使用光线投射获得此面的法线，我会得到：

如你所见，面部的法线是 Y 轴（场景中心的绿色轴），当红色矩形与墙壁保持平行时，它应该是第一张图片中的 Z 轴' 脸。

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

编辑：

挤出的 SVG 不是 Mesh，而是 Group，在本例中包含 2 'Meshes'。当我旋转组时似乎出现了问题：group.rotateX(THREE.Math.degToRad(90));

Answer 1

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

我还添加了@gaitat

建议的行

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

挤压 SVG 时面朝正常

Faces normal when extruding SVG

javascript

svg

normals

three.js

raycasting