Search code examples
svgthree.jspathgeometrytriangulation

THREE.ExtrudeBufferGeometry has very few polygons

I have an SVG with a simple rectangle (as a path though), which I load it on my app using THREE.SVGLoader like this : https://threejs.org/examples/#webgl_loader_svg, and using this code :

            const paths = paths_.paths
            const geometry = new THREE.Geometry()

            for (let i = 0; i < paths.length; i++) {

                const path = paths[i]

                const shapes = path.toShapes(false)

                for (let j = 0; j < shapes.length; j++) {
                    const shape = shapes[j]

                    const shape3d = new THREE.ExtrudeBufferGeometry(shape, {
                        depth: 0.1,
                        bevelThickness: 2,
                        bevelSize: 1.5,
                        bevelSegments: 5,
                        bevelEnabled: true
                    });

                    const edgeGeometry = new THREE.Geometry().fromBufferGeometry(shape3d)

                    geometry.merge(edgeGeometry)
                }
            }

            geometry.computeFaceNormals()
            geometry.mergeVertices()
            geometry.computeVertexNormals()

            geometry.center()

            return geometry

I create a geometry and create a 3d mesh out of it.

The problem is that the ExtrudeBufferGeometry uses (I think) Earcut triangulation in order to create the polygons that will make up the shape of the paths, and because of this there are not many triangles ont he top and bottom faces of my mesh.

And I need many faces there because I want to bend the mesh using this library https://github.com/drawcall/threejs-mesh-modifiers but that is not going to be nice without the many faces as you can see in the image below :

enter image description here

I tried SubdivisionModifier to add polygons but it didn't work because it created strange holes and artifacts (there is a comment inside this lib that the modifier will not work well with sharp edges).

I tried even using a CSG lib with which I was intersecting this extruded mesh with a BoxGeometry mesh with many segments and it worked but it was too creating holes and artifacts.

It seems that the THREE.ExtrudeBufferGeometry creates a geometry that doesn't have 100% proper normals.

In general I tried many things such as : flags, computing vertex normals, face normals, flat shading, smooth shading, changed all of the parameters of the ExtrudeBufferGeometry and nothing seems to be working.

Any help will be very much appreciated!

Solution

  • Using this solution : intersecting meshes results to mesh with wholes I managed to use the manthrax version CSG library in order to intersect a specific box with my object and get back an object with added polygons on top and bottom : enter image description here