three.js SVGLoader

用于加载 .svg 资源的加载程序。

可缩放矢量图形是一种基于 XML 的矢量图像格式，用于支持交互性和动画的二维图形。

代码示例

// instantiate a loader
const loader = new SVGLoader();

// load a SVG resource
loader.load(
	// resource URL
	'data/svgSample.svg',
	// called when the resource is loaded
	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 = SVGLoader.createShapes( path );

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

	},
	// 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' );

	}
);

例子

webgl_loader_svg

构造函数

SVGLoader( manager : LoadingManager )

manager — 供加载器使用的 loadingManager。默认值为 THREE.DefaultLoadingManager。

创建一个新的 SVGLoader。

属性

请参阅基本 Loader 类以了解公共属性。

方法

常用方法见 Loader 基类。

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined

url — 包含 .svg 文件的路径/URL 的字符串。

onLoad — （可选）加载成功完成后要调用的函数。该函数接收一个 ShapePath 数组作为参数。

onProgress — （可选）在加载过程中调用的函数。参数将是 XMLHttpRequest 实例，它包含总字节数和加载字节数。

onError — （可选）加载期间发生错误时调用的函数。该函数接收错误作为参数。

从 url 开始加载并使用响应内容调用 onLoad。

静态方法

.createShapes ( shape : ShapePath ) : Array

shape — 来自 ShapePath 数组的 ShapePath，作为 SVGLoader 加载函数的 onLoad 函数中的参数给出。

返回一个或多个从 shape 创建的 Shape 对象：ShapePath 在此函数中作为参数提供。

源码

examples/jsm/loaders/SVGLoader.js