Question

A loader for loading a .svg resource.
Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

代码示例

// 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

Constructor

SVGLoader( manager : LoadingManager )

manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.

Creates a new SVGLoader.

Properties

See the base Loader class for common properties.

Methods

See the base Loader class for common methods.

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

url — A string containing the path/URL of the .svg file.
onLoad — (optional) A function to be called after loading is successfully completed. The function receives an array of ShapePath as an argument.
onProgress — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains total and loaded bytes.
onError — (optional) A function to be called if an error occurs during loading. The function receives the error as an argument.

Begin loading from url and call onLoad with the response content.

Static Methods

.createShapes ( shape : ShapePath ) : Array

shape — A ShapePath from the array of ShapePath, given as argument in the onLoad function for the load function of SVGLoader.

Returns one or more Shape objects created from the shape : ShapePath provided as an argument in this function.

Source

examples/jsm/loaders/SVGLoader.js