svg - 给定 SVG 路径，使用 THREE.js 创建 3D 表面

Question

如何在给定 SVG 路径的情况下创建 3D 表面。我希望通过绕轴旋转路径来创建这个表面。

我使用 SVGLoader 加载我的 SVG；这就像一个旋转的挤压。我不确定如何做到这一点。

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 );
    }
);

标签： svgthree.js