Editor: Import loaders dynamically.

editor/js/Loader.js

@@ -1,24 +1,5 @@
 import * as THREE from '../../build/three.module.js';
 
-import { Rhino3dmLoader } from '../../examples/jsm/loaders/3DMLoader.js';
-import { ThreeMFLoader } from '../../examples/jsm/loaders/3MFLoader.js';
-import { AMFLoader } from '../../examples/jsm/loaders/AMFLoader.js';
-import { ColladaLoader } from '../../examples/jsm/loaders/ColladaLoader.js';
-import { DRACOLoader } from '../../examples/jsm/loaders/DRACOLoader.js';
-import { FBXLoader } from '../../examples/jsm/loaders/FBXLoader.js';
-import { GLTFLoader } from '../../examples/jsm/loaders/GLTFLoader.js';
-import { KMZLoader } from '../../examples/jsm/loaders/KMZLoader.js';
-import { MD2Loader } from '../../examples/jsm/loaders/MD2Loader.js';
-import { MTLLoader } from '../../examples/jsm/loaders/MTLLoader.js';
-import { OBJLoader } from '../../examples/jsm/loaders/OBJLoader.js';
-import { PLYLoader } from '../../examples/jsm/loaders/PLYLoader.js';
-import { STLLoader } from '../../examples/jsm/loaders/STLLoader.js';
-import { SVGLoader } from '../../examples/jsm/loaders/SVGLoader.js';
-import { TDSLoader } from '../../examples/jsm/loaders/TDSLoader.js';
-import { VTKLoader } from '../../examples/jsm/loaders/VTKLoader.js';
-import { VRMLLoader } from '../../examples/jsm/loaders/VRMLLoader.js';
-import { XYZLoader } from '../../examples/jsm/loaders/XYZLoader.js';
-
 import { TGALoader } from '../../examples/jsm/loaders/TGALoader.js';
 
 import { AddObjectCommand } from './commands/AddObjectCommand.js';
@@ -100,10 +81,12 @@ function Loader( editor ) {
 
 			case '3dm':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { Rhino3dmLoader } = await import( '../../examples/jsm/loaders/3DMLoader.js' );
+
 					var loader = new Rhino3dmLoader();
 					loader.setLibraryPath( '../examples/jsm/libs/rhino3dm/' );
 					loader.parse( contents, function ( object ) {
@@ -119,7 +102,9 @@ function Loader( editor ) {
 
 			case '3ds':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
+
+					var { TDSLoader } = await import( '../../examples/jsm/loaders/TDSLoader.js' );
 
 					var loader = new TDSLoader();
 					var object = loader.parse( event.target.result );
@@ -133,7 +118,9 @@ function Loader( editor ) {
 
 			case '3mf':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
+
+					var { ThreeMFLoader } = await import( '../../examples/jsm/loaders/3MFLoader.js' );
 
 					var loader = new ThreeMFLoader();
 					var object = loader.parse( event.target.result );
@@ -147,7 +134,9 @@ function Loader( editor ) {
 
 			case 'amf':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
+
+					var { AMFLoader } = await import( '../../examples/jsm/loaders/AMFLoader.js' );
 
 					var loader = new AMFLoader();
 					var amfobject = loader.parse( event.target.result );
@@ -161,10 +150,12 @@ function Loader( editor ) {
 
 			case 'dae':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { ColladaLoader } = await import( '../../examples/jsm/loaders/ColladaLoader.js' );
+
 					var loader = new ColladaLoader( manager );
 					var collada = loader.parse( contents );
 
@@ -179,10 +170,12 @@ function Loader( editor ) {
 
 			case 'drc':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
+
 					var loader = new DRACOLoader();
 					loader.setDecoderPath( '../examples/js/libs/draco/' );
 					loader.decodeDracoFile( contents, function ( geometry ) {
@@ -218,10 +211,12 @@ function Loader( editor ) {
 
 			case 'fbx':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { FBXLoader } = await import( '../../examples/jsm/loaders/FBXLoader.js' );
+
 					var loader = new FBXLoader( manager );
 					var object = loader.parse( contents );
 
@@ -234,10 +229,13 @@ function Loader( editor ) {
 
 			case 'glb':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
+					var { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+
 					var dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
 
@@ -260,7 +258,7 @@ function Loader( editor ) {
 
 			case 'gltf':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
@@ -272,6 +270,9 @@ function Loader( editor ) {
 
 					} else {
 
+						var { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
+						var { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+
 						var dracoLoader = new DRACOLoader();
 						dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
 
@@ -354,7 +355,9 @@ function Loader( editor ) {
 
 			case 'kmz':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
+
+					var { KMZLoader } = await import( '../../examples/jsm/loaders/KMZLoader.js' );
 
 					var loader = new KMZLoader();
 					var collada = loader.parse( event.target.result );
@@ -370,10 +373,12 @@ function Loader( editor ) {
 
 			case 'md2':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { MD2Loader } = await import( '../../examples/jsm/loaders/MD2Loader.js' );
+
 					var geometry = new MD2Loader().parse( contents );
 					var material = new THREE.MeshStandardMaterial( {
 						morphTargets: true,
@@ -394,10 +399,12 @@ function Loader( editor ) {
 
 			case 'obj':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { OBJLoader } = await import( '../../examples/jsm/loaders/OBJLoader.js' );
+
 					var object = new OBJLoader().parse( contents );
 					object.name = filename;
 
@@ -410,10 +417,12 @@ function Loader( editor ) {
 
 			case 'ply':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { PLYLoader } = await import( '../../examples/jsm/loaders/PLYLoader.js' );
+
 					var geometry = new PLYLoader().parse( contents );
 					geometry.sourceType = "ply";
 					geometry.sourceFile = file.name;
@@ -432,10 +441,12 @@ function Loader( editor ) {
 
 			case 'stl':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { STLLoader } = await import( '../../examples/jsm/loaders/STLLoader.js' );
+
 					var geometry = new STLLoader().parse( contents );
 					geometry.sourceType = "stl";
 					geometry.sourceFile = file.name;
@@ -463,10 +474,12 @@ function Loader( editor ) {
 
 			case 'svg':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { SVGLoader } = await import( '../../examples/jsm/loaders/SVGLoader.js' );
+
 					var loader = new SVGLoader();
 					var paths = loader.parse( contents ).paths;
 
@@ -509,10 +522,12 @@ function Loader( editor ) {
 
 			case 'vtk':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { VTKLoader } = await import( '../../examples/jsm/loaders/VTKLoader.js' );
+
 					var geometry = new VTKLoader().parse( contents );
 					geometry.sourceType = "vtk";
 					geometry.sourceFile = file.name;
@@ -531,10 +546,12 @@ function Loader( editor ) {
 
 			case 'wrl':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { VRMLLoader } = await import( '../../examples/jsm/loaders/VRMLLoader.js' );
+
 					var result = new VRMLLoader().parse( contents );
 
 					editor.execute( new SetSceneCommand( editor, result ) );
@@ -546,10 +563,12 @@ function Loader( editor ) {
 
 			case 'xyz':
 
-				reader.addEventListener( 'load', function ( event ) {
+				reader.addEventListener( 'load', async function ( event ) {
 
 					var contents = event.target.result;
 
+					var { XYZLoader } = await import( '../../examples/jsm/loaders/XYZLoader.js' );
+
 					var geometry = new XYZLoader().parse( contents );
 
 					var material = new THREE.PointsMaterial();
@@ -657,7 +676,7 @@ function Loader( editor ) {
 
 	}
 
-	function handleZIP( contents ) {
+	async function handleZIP( contents ) {
 
 		var zip = new JSZip( contents );
 
@@ -665,6 +684,9 @@ function Loader( editor ) {
 
 		if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {
 
+			var { MTLLoader } = await import( '../../examples/jsm/loaders/MTLLoader.js' );
+			var { OBJLoader } = await import( '../../examples/jsm/loaders/OBJLoader.js' );
+
 			var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
 			var object = new OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
 			editor.execute( new AddObjectCommand( editor, object ) );
@@ -673,7 +695,7 @@ function Loader( editor ) {
 
 		//
 
-		zip.filter( function ( path, file ) {
+		zip.filter( async function ( path, file ) {
 
 			var manager = new THREE.LoadingManager();
 			manager.setURLModifier( function ( url ) {
@@ -699,6 +721,8 @@ function Loader( editor ) {
 
 				case 'fbx':
 
+					var { FBXLoader } = await import( '../../examples/jsm/loaders/FBXLoader.js' );
+
 					var loader = new FBXLoader( manager );
 					var object = loader.parse( file.asArrayBuffer() );
 
@@ -708,6 +732,9 @@ function Loader( editor ) {
 
 				case 'glb':
 
+					var { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
+					var { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+
 					var dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
 
@@ -727,6 +754,9 @@ function Loader( editor ) {
 
 				case 'gltf':
 
+					var { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
+					var { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
+
 					var dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );