three.js SVGLoader

// instantiate a loader
var loader = new THREE.SVGLoader();

// load a SVG resource
loader.load(
	// resource URL
	'data/svgSample.svg',
	// called when the resource is loaded
	function ( paths ) {

		var group = new THREE.Group();

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

	},
	// called when loading is in progresses
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}
);

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

更多推荐