Merge pull request #161 from NASA-AMMOS/loader-fixes

Loaders: Pass request headers, working paths through

README.md

@@ -135,19 +135,11 @@ Adding support for DRACO decompression within the GLTF files that are transporte
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.123.0/examples/js/libs/draco/gltf/' );
 
-const tilesRenderer = new TilesRenderer( './path/to/tileset.json' );
-tilesRenderer.manager.addHandler( /\.gltf$/, {
-
-	parse( ...args ) {
-	
-		const loader = new GLTFLoader( tiles.manager );
-		loader.setDRACOLoader( dracoLoader );
-
-		return loader.parse( ...args );
+const loader = new GLTFLoader( tiles.manager );
+loader.setDRACOLoader( dracoLoader );
 
-	}
-
-} );
+const tilesRenderer = new TilesRenderer( './path/to/tileset.json' );
+tilesRenderer.manager.addHandler( /\.gltf$/, loader );
 ```
 
 ## Loading from Cesium Ion

babel.config.json

@@ -4,7 +4,16 @@
 
 		[
 
-			"@babel/preset-env"
+			"@babel/preset-env",
+			{
+
+		  		"targets": {
+
+					"node": "current"
+
+				}
+
+			}
 
 		]
 

example/index.js

@@ -91,19 +91,12 @@ function reinstantiateTiles() {
 	const dracoLoader = new DRACOLoader();
 	dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.123.0/examples/js/libs/draco/gltf/' );
 
+	const loader = new GLTFLoader( tiles.manager );
+	loader.setDRACOLoader( dracoLoader );
+
 	tiles = new TilesRenderer( url );
 	tiles.fetchOptions.mode = 'cors';
-	tiles.manager.addHandler( /\.gltf$/, {
-
-		parse( ...args ) {
-
-			const loader = new GLTFLoader( tiles.manager );
-			loader.setDRACOLoader( dracoLoader );
-			return loader.parse( ...args );
-
-		}
-
-	} );
+	tiles.manager.addHandler( /\.gltf$/, loader );
 	offsetParent.add( tiles.group );
 
 }

example/ionExample.js

@@ -111,15 +111,7 @@ function setupTiles() {
 	const loader = new GLTFLoader( tiles.manager );
 	loader.setDRACOLoader( dracoLoader );
 
-	tiles.manager.addHandler( /\.gltf$/, {
-
-		parse( ...args ) {
-
-			return loader.parse( ...args );
-
-		}
-
-	} );
+	tiles.manager.addHandler( /\.gltf$/, loader );
 	offsetParent.add( tiles.group );
 
 }
@@ -149,7 +141,6 @@ function reinstantiateTiles() {
 
 	if ( params.ionAssetId ) {
 
-
 		url = new URL( `https://api.cesium.com/v1/assets/${params.ionAssetId}/endpoint` );
 		url.searchParams.append( 'access_token', params.ionAccessToken );
 

src/base/B3DMLoaderBase.js

@@ -8,6 +8,7 @@ export class B3DMLoaderBase {
 	constructor() {
 
 		this.fetchOptions = {};
+		this.workingPath = '';
 
 	}
 
@@ -24,7 +25,19 @@ export class B3DMLoaderBase {
 				return res.arrayBuffer();
 
 			} )
-			.then( buffer => this.parse( buffer ) );
+			.then( buffer => {
+
+				if ( this.workingPath === '' ) {
+
+					const splits = url.split( /\\\//g );
+					splits.pop();
+					this.workingPath = splits.join( '/' );
+
+				}
+
+				this.parse( buffer );
+
+			} );
 
 	}
 

src/three/B3DMLoader.js

@@ -18,8 +18,36 @@ export class B3DMLoader extends B3DMLoaderBase {
 		return new Promise( ( resolve, reject ) => {
 
 			const manager = this.manager;
+			const fetchOptions = this.fetchOptions;
 			const loader = manager.getHandler( 'path.gltf' ) || new GLTFLoader( manager );
-			loader.parse( gltfBuffer, null, model => {
+
+			if ( fetchOptions.credentials === 'include' && fetchOptions.mode === 'cors' ) {
+
+				loader.setCrossOrigin( 'use-credentials' );
+
+			}
+
+			if ( 'credentials' in fetchOptions ) {
+
+				loader.setWithCredentials( fetchOptions.credentials === 'include' );
+
+			}
+
+			if ( fetchOptions.headers ) {
+
+				loader.setRequestHeader( fetchOptions.headers );
+
+			}
+
+			// GLTFLoader assumes the working path ends in a slash
+			let workingPath = this.workingPath;
+			if ( ! /[\\/]$/.test( workingPath ) ) {
+
+				workingPath += '/';
+
+			}
+
+			loader.parse( gltfBuffer, workingPath, model => {
 
 				const { batchTable, featureTable } = b3dm;
 				const { scene } = model;

src/three/CMPTLoader.js

@@ -27,7 +27,11 @@ export class CMPTLoader extends CMPTLoaderBase {
 				case 'b3dm': {
 
 					const slicedBuffer = buffer.slice();
-					const promise = new B3DMLoader( manager ).parse( slicedBuffer.buffer );
+					const loader = new B3DMLoader( manager );
+					loader.workingPath = this.workingPath;
+					loader.fetchOptions = this.fetchOptions;
+
+					const promise = loader.parse( slicedBuffer.buffer );
 					promises.push( promise );
 					break;
 

src/three/I3DMLoader.js

@@ -34,9 +34,37 @@ export class I3DMLoader extends I3DMLoaderBase {
 				const gltfBuffer = i3dm.glbBytes.slice().buffer;
 				return new Promise( ( resolve, reject ) => {
 
+					const fetchOptions = this.fetchOptions;
 					const manager = this.manager;
 					const loader = manager.getHandler( 'path.gltf' ) || new GLTFLoader( manager );
-					loader.parse( gltfBuffer, null, model => {
+
+					if ( fetchOptions.credentials === 'include' && fetchOptions.mode === 'cors' ) {
+
+						loader.setCrossOrigin( 'use-credentials' );
+
+					}
+
+					if ( 'credentials' in fetchOptions ) {
+
+						loader.setWithCredentials( fetchOptions.credentials === 'include' );
+
+					}
+
+					if ( fetchOptions.headers ) {
+
+						loader.setRequestHeader( fetchOptions.headers );
+
+					}
+
+					// GLTFLoader assumes the working path ends in a slash
+					let workingPath = this.workingPath;
+					if ( ! /[\\/]$/.test( workingPath ) ) {
+
+						workingPath += '/';
+
+					}
+
+					loader.parse( gltfBuffer, workingPath, model => {
 
 						const INSTANCES_LENGTH = featureTable.getData( 'INSTANCES_LENGTH' );
 						const POSITION = featureTable.getData( 'POSITION', INSTANCES_LENGTH, 'FLOAT', 'VEC3' );

src/three/TilesRenderer.js

@@ -522,7 +522,10 @@ export class TilesRenderer extends TilesRendererBase {
 		switch ( extension ) {
 
 			case 'b3dm':
-				promise = new B3DMLoader( manager )
+				const loader = new B3DMLoader( manager );
+				loader.workingPath = workingPath;
+				loader.fetchOptions = fetchOptions;
+				promise = loader
 					.parse( buffer )
 					.then( res => res.scene );
 				break;