如何使用THREE.js基于SVG路径生成绕轴旋转的3D曲面

需求与现有实现 #

• 加载SVG文件后，需要将SVG对应的轮廓绕指定轴旋转，生成3D回转曲面（类似旋转挤出的效果）
• 当前仅能通过SVGLoader将SVG路径渲染为2D平面图形，无法生成3D旋转效果
• 现有实现核心问题：使用ShapeGeometry将SVG路径转换为纯2D平面图形，未对接3D旋转生成逻辑，无法产出目标效果
• 当前实现代码如下：

const loader = new SVGLoader();

loader.load(
    'data/svgSample.svg',
    function ( data ) {
        const paths = data.paths;
        const group = new THREE.Group();

        for ( let i = 0; i < paths.length; i ++ ) {
            const path = paths[ i ];

            const material = new THREE.MeshBasicMaterial( {
                color: path.color,
                side: THREE.DoubleSide,
                depthWrite: false
            } );

            const shapes = path.toShapes( true );

            for ( let j = 0; j < shapes.length; j ++ ) {
                const shape = shapes[ j ];
                const geometry = new THREE.ShapeGeometry( shape );
                const mesh = new THREE.Mesh( geometry, material );
                group.add( mesh );
            }
        }
        scene.add( group );
    }
);

核心实现逻辑 #

Three.js内置的LatheGeometry（车削几何体）专门用于将二维轮廓绕Y轴旋转生成3D曲面，完全匹配需求，替换原有几何体生成逻辑即可，流程如下：

• 从SVGLoader解析出的路径中提取全部轮廓顶点
• 做坐标系适配，将顶点转换为LatheGeometry要求的Vector2格式二维点数组
• 传入配置参数生成3D车削几何体，挂载到场景中

关键注意事项 #

• 坐标适配：SVG默认坐标原点在左上角、Y轴向下，Three.js坐标原点在场景中心、Y轴向上，提取路径顶点时需将Y轴坐标值乘以-1翻转，避免生成的曲面方向颠倒。
• 轮廓要求：用于旋转的SVG路径应为半开放的单侧轮廓（例如回转体的截面半轮廓），若使用全闭合的填充形状作为旋转路径，会出现面重叠、破面问题。
• 材质适配：原代码为2D平面配置的depthWrite: false、MeshBasicMaterial不适合3D曲面，可替换为常规3D材质（如MeshStandardMaterial），避免深度测试错乱、显示异常。

修正后可运行的实现代码 #

const loader = new SVGLoader();

loader.load(
    'data/svgSample.svg',
    function ( data ) {
        const paths = data.paths;
        const group = new THREE.Group();

        for ( let i = 0; i < paths.length; i ++ ) {
            const path = paths[ i ];
            // 替换为适配3D曲面的材质配置
            const material = new THREE.MeshStandardMaterial( {
                color: path.color,
                side: THREE.DoubleSide,
            } );

            // 从SVG路径中提取轮廓顶点
            const outlinePoints = [];
            for ( let j = 0; j < path.subPaths.length; j ++ ) {
                const subPath = path.subPaths[ j ];
                const subPoints = subPath.getPoints();
                // 坐标适配：翻转Y轴，转换为Lathe要求的二维点格式
                subPoints.forEach(p => {
                    outlinePoints.push( new THREE.Vector2( p.x, -p.y ) );
                })
            }

            // 生成车削3D旋转曲面
            const geometry = new THREE.LatheGeometry(
                outlinePoints,
                64, // 旋转分段数，数值越高曲面越平滑
                0, // 旋转起始角度
                Math.PI * 2 // 总旋转角度，2π为完整闭环
            );
            const mesh = new THREE.Mesh( geometry, material );
            group.add( mesh );
        }

        scene.add( group );
    }
);

内容的提问来源于stack exchange，提问作者NPLS