Search code examples
javascriptsvgthree.jsraycastingnormals

Faces normal when extruding SVG

enter image description here

The above image is THREE scene with an extrusion from an SVG Path. You can see the scene axis in the center, blue is Z, red is X and green is Y. This is the SVG path I'm extruding:

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 path is about equivalent to this image:

enter image description here

I'm extruding this SVG using the code from this THREE example. I just changed it a little to add random colors to each face of the geometry.

My problem here is with the faces' normals. I have an small rectangle that moves with the cursor and positions itself always parallel to the surface where the mouse is onto, for example:

enter image description here

You can see the small red square parallel to the wall face, now, this doesn't work with all the faces, here is the cursor positioned in other part of the wall:

enter image description here

The square is not parallel to the wall face, so, if I get the normal of this face using raycast I get this:

enter image description here

As you can see the normal of the face is the Y axis (the green axis in the center of the scene) when it should be the Z axis as in the first picture when the red rectangle stays parallel to the walls' face.

Why does this happen? Do I have to apply something to make the faces normal to be correct?

EDIT:

The extruded SVG is not a Mesh but a Group containing in this case 2 'Meshes'. The problems seems to appear when I rotate the group: group.rotateX(THREE.Math.degToRad(90));

Solution

  • Ok, I solved it the helper FaceNormalsHelper helped me a lot. I was rotating the Group using group.rotateX(THREE.Math.degToRad(90)). This worked fine, but the Geometry is not rotated together with the group so the normals detected with raycast doesn't match the mesh faces. To solve it I just rotated the all the Geometry in the group instead of the entire group; on this way the Mesh and Geometry are rotated and normals are where expected!

    I also added the lines suggested by @gaitat

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