用threejs 显示SVG文件

要在three.js中显示SVG文件，您需要将SVG文件转换为Three.js可识别的格式。有几种方法可以实现这一目标，其中一种是使用SVGLoader。

首先，您需要在项目中导入Three.js和SVGLoader：

<script src="https://cdn.jsdelivr.net/npm/three@0.127.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.127.0/examples/js/loaders/SVGLoader.js"></script>

现在，您可以使用SVGLoader加载SVG文件并将其转换为Three.js中的可渲染对象：

// 创建一个场景
var scene = new THREE.Scene();

// 创建一个相机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 加载SVG文件
var loader = new THREE.SVGLoader();
loader.load( 'path/to/your/svg/file.svg', function ( data ) {

    // 将SVG数据转换为Three.js中的可渲染对象
    var paths = data.paths;
    var group = new THREE.Group();
    group.scale.multiplyScalar( 0.1 );
    group.position.x = - 70;
    group.position.y = 70;
    group.scale.y *= - 1;
    for ( var i = 0; i < paths.length; i ++ ) {

        var path = paths[ i ];

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

        var shapes = path.toShapes( true );

        for ( var j = 0; j < shapes.length; j ++ ) {

            var shape = shapes[ j ];

            var geometry = new THREE.ShapeBufferGeometry( shape );
            var mesh = new THREE.Mesh( geometry, material );

            group.add( mesh );

        }

    }

    scene.add( group );

} );

// 渲染场景
function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

上面的代码将加载SVG文件并将其转换为Three.js中的可渲染对象，然后将其添加到场景中并渲染场景。您可以根据需要更改材质和对象的位置，以便正确显示SVG内容。