Merge pull request #19118 from looeee/add_loadAsync

Added Loader.loadAsync

docs/api/en/loaders/Loader.html

@@ -57,6 +57,18 @@
 			This method needs to be implement by all concrete loaders. It holds the logic for loading the asset from the backend.
 		</p>
 
+		<h3>[method:Promise loadAsync]( [param:String url], [param:Function onProgress] )</h3>
+		<p>
+		[page:String url] — A string containing the path/URL of the <em>.gltf</em> or <em>.glb</em> file.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
+		</p>
+		<p>
+		This method is equivalent to [page:.load], but returns a [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise].
+		</p>
+		<p>
+		[page:Function onLoad] is handled by [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve Promise.resolve] and [page:Function onError] is handled by [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject Promise.reject].
+		</p>
+
 		<h3>[method:void parse]()</h3>
 		<p>
 			This method needs to be implement by all concrete loaders. It holds the logic for parsing the asset into three.js entities.

docs/api/zh/loaders/Loader.html

@@ -57,6 +57,18 @@
 			This method needs to be implement by all concrete loaders. It holds the logic for loading the asset from the backend.
 		</p>
 
+		<h3>[method:Promise loadAsync]( [param:String url], [param:Function onProgress] )</h3>
+		<p>
+		[page:String url] — A string containing the path/URL of the <em>.gltf</em> or <em>.glb</em> file.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
+		</p>
+		<p>
+		This method is equivalent to [page:.load], but returns a [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise].
+		</p>
+		<p>
+		[page:Function onLoad] is handled by [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve Promise.resolve] and [page:Function onError] is handled by [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject Promise.reject].
+		</p>
+
 		<h3>[method:void parse]()</h3>
 		<p>
 			This method needs to be implement by all concrete loaders. It holds the logic for parsing the asset into three.js entities.

docs/examples/en/loaders/GLTFLoader.html

@@ -190,6 +190,7 @@
 		Refer to this [link:https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco#readme readme] for the details of Draco and its decoder.
 		</p>
 
+
 		<h3>[method:null setDDSLoader]( [param:DDSLoader ddsLoader] )</h3>
 		<p>
 		[page:DDSLoader ddsLoader] — Instance of THREE.DDSLoader, to be used for loading compressed textures with the MSFT_TEXTURE_DDS extension.

examples/webgl_tonemapping.html

@@ -44,10 +44,13 @@
 				ACESFilmic: THREE.ACESFilmicToneMapping
 			};
 
-			init();
-			render();
+			init().catch( function ( err ) {
 
-			function init() {
+				console.error( err );
+
+			} );
+
+			async function init() {
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -75,42 +78,41 @@
 				var pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
-				new RGBELoader()
+				var rgbeLoader = new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
-					.setPath( 'textures/equirectangular/' )
-					.load( 'venice_sunset_1k.hdr', function ( texture ) {
+					.setPath( 'textures/equirectangular/' );
 
-						var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
+				var gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 
-						scene.background = envMap;
-						scene.environment = envMap;
+				var [ texture, gltf ] = await Promise.all( [
+					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
+					gltfLoader.loadAsync( 'DamagedHelmet.gltf' ),
+				] );
 
-						texture.dispose();
-						pmremGenerator.dispose();
-
-						render();
+				// environment
 
-						// model
+				var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 
-						var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
-						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
+				scene.background = envMap;
+				scene.environment = envMap;
 
-							gltf.scene.traverse( function ( child ) {
+				texture.dispose();
+				pmremGenerator.dispose();
 
-								if ( child.isMesh ) {
+				// model
 
-									mesh = child;
-									scene.add( mesh );
+				gltf.scene.traverse( function ( child ) {
 
-								}
+					if ( child.isMesh ) {
 
-							} );
+						mesh = child;
+						scene.add( mesh );
 
-							render();
+					}
 
-						} );
+				} );
 
-					} );
+				render();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

src/loaders/Loader.d.ts

@@ -17,6 +17,8 @@ export class Loader {
 	parse(): void;
 	*/
 
+	loadAsync( url: string, onProgress?: ( event: ProgressEvent ) => void ): Promise<any>;
+
 	setCrossOrigin( crossOrigin: string ): this;
 	setPath( path: string ): this;
 	setResourcePath( resourcePath: string ): this;

src/loaders/Loader.js

@@ -18,6 +18,16 @@ Object.assign( Loader.prototype, {
 
 	load: function ( /* url, onLoad, onProgress, onError */ ) {},
 
+	loadAsync: function ( url, onProgress ) {
+
+		return new Promise( ( resolve, reject ) => {
+
+			this.load( url, resolve, onProgress, reject );
+
+		} );
+
+	},
+
 	parse: function ( /* data */ ) {},
 
 	setCrossOrigin: function ( crossOrigin ) {