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

構(gòu)造函數(shù)

SVGLoader( manager : LoadingManager )

manager — 供加載器使用的 loadingManager。默認(rèn)值為 THREE.DefaultLoadingManager。

創(chuàng)建一個新的 SVGLoader。

屬性

請參閱基本 Loader 類以了解公共屬性。

方法

常用方法見 Loader 基類。

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

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

onLoad — （可選）加載成功完成后要調(diào)用的函數(shù)。該函數(shù)接收一個 ShapePath 數(shù)組作為參數(shù)。

onProgress — （可選）在加載過程中調(diào)用的函數(shù)。參數(shù)將是 XMLHttpRequest 實例，它包含總字節(jié)數(shù)和加載字節(jié)數(shù)。

onError — （可選）加載期間發(fā)生錯誤時調(diào)用的函數(shù)。該函數(shù)接收錯誤作為參數(shù)。

從 url 開始加載并使用響應(yīng)內(nèi)容調(diào)用 onLoad。

靜態(tài)方法

.createShapes ( shape : ShapePath ) : Array

shape — 來自 ShapePath 數(shù)組的 ShapePath，作為 SVGLoader 加載函數(shù)的 onLoad 函數(shù)中的參數(shù)給出。

返回一個或多個從 shape 創(chuàng)建的 Shape 對象：ShapePath 在此函數(shù)中作為參數(shù)提供。

源碼

examples/jsm/loaders/SVGLoader.js