THREE.ExtrudeBufferGeometry 的多边形很少

Question

我有一个带有简单矩形的 SVG（虽然作为路径），我使用 THREE.SVGLoader 将其加载到我的应用程序中，如下所示：https://threejs.org/examples/#webgl_loader_svg，并使用此代码：

            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

我创建了一个几何体并从中创建了一个 3d 网格。

问题在于 ExtrudeBufferGeometry 使用（我认为）Earcut 三角剖分来创建构成路径形状的多边形，因此，在其顶面和底面上没有很多三角形我的网格。

我需要很多面，因为我想使用这个库 https://github.com/drawcall/threejs-mesh-modifiers 来弯曲网格，但是如果没有很多面，那将不会很好，如下图所示：

我尝试使用 SubdivisionModifier 添加多边形，但它没有用，因为它产生了奇怪的孔洞和人工制品（此库中有一条评论说修改器不能很好地处理锐边）。

我什至尝试使用 CSG 库，通过它我将这个挤压网格与具有许多段的 BoxGeometry 网格相交并且它有效但它也产生了孔和工件。

似乎 THREE.ExtrudeBufferGeometry 创建的几何体没有 100% 正确的法线。

总的来说，我尝试了很多东西，例如：标志、计算顶点法线、面法线、平面着色、平滑着色、更改了 ExtrudeBufferGeometry 的所有参数，但似乎没有任何效果。

非常感谢任何帮助！

Answer 1

使用此解决方案： 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 :

THREE.ExtrudeBufferGeometry 的多边形很少

THREE.ExtrudeBufferGeometry has very few polygons

geometry

svg

path

triangulation

three.js