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
var loader = new v3d.SVGLoader();
// load a SVG resource
loader.load(
// resource URL
'data/svgSample.svg',
// called when the resource is loaded
function(data) {
var paths = data.paths;
var group = new v3d.Group();
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var material = new v3d.MeshBasicMaterial({
color: path.color,
side: v3d.DoubleSide,
depthWrite: false
});
var shapes = path.toShapes(true);
for (var j = 0; j < shapes.length; j ++) {
var shape = shapes[j];
var geometry = new v3d.ShapeBufferGeometry(shape);
var mesh = new v3d.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');
}
);
[example:webgl_loader_svg]
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager v3d.DefaultLoadingManager].
Creates a new [name].
[page:String url] — A string containing the path/URL of the .svg file.
[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives an array of [page:ShapePath] as an argument.
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains [page:Integer total] and [page:Integer loaded] bytes.
[page:Function 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.
[page:String path] — Base path.
Set the base path for the file.
[sourceHint]