three.jsを使ってSVGを読み込む

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

three.jsを使ってSVGを読み込めない。

該当のソースコード

ソースコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script> <link type="text/css" rel="stylesheet" href="css/style.css" media="all" /> <script> // ページの読み込みを待つ window.addEventListener('load', init);

function init() {
const width = 960;
const height = 540;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#myCanvas")});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(45,width / height,1,1000);
camera.position.set(0, 0, +1000);

//svg load

var loader = new THREE.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 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' );

}

);
}

</script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>