[pull] dev from mrdoob:dev

editor/js/GLTFImportDialog.js

@@ -0,0 +1,112 @@
+import { UIRow, UIText, UICheckbox, UIButton } from './libs/ui.js';
+
+class GLTFImportDialog {
+
+	constructor( strings ) {
+
+		this.strings = strings;
+
+		const dom = document.createElement( 'div' );
+		dom.className = 'Dialog';
+		this.dom = dom;
+
+		const background = document.createElement( 'div' );
+		background.className = 'Dialog-background';
+		background.addEventListener( 'click', () => this.cancel() );
+		dom.appendChild( background );
+
+		const content = document.createElement( 'div' );
+		content.className = 'Dialog-content';
+		dom.appendChild( content );
+
+		// Title
+
+		const titleBar = document.createElement( 'div' );
+		titleBar.className = 'Dialog-title';
+		titleBar.textContent = strings.getKey( 'dialog/gltf/title' );
+		content.appendChild( titleBar );
+
+		// Body
+
+		const body = document.createElement( 'div' );
+		body.className = 'Dialog-body';
+		content.appendChild( body );
+
+		// As Scene Checkbox
+
+		const asSceneRow = new UIRow();
+		body.appendChild( asSceneRow.dom );
+
+		this.asSceneCheckbox = new UICheckbox( false );
+		asSceneRow.add( this.asSceneCheckbox );
+
+		asSceneRow.add( new UIText( strings.getKey( 'dialog/gltf/asScene' ) ).setMarginLeft( '6px' ) );
+
+		// Buttons
+
+		const buttonsRow = document.createElement( 'div' );
+		buttonsRow.className = 'Dialog-buttons';
+		body.appendChild( buttonsRow );
+
+		const okButton = new UIButton( strings.getKey( 'dialog/ok' ) );
+		okButton.setWidth( '80px' );
+		okButton.onClick( () => this.confirm() );
+		buttonsRow.appendChild( okButton.dom );
+
+		const cancelButton = new UIButton( strings.getKey( 'dialog/cancel' ) );
+		cancelButton.setWidth( '80px' );
+		cancelButton.setMarginLeft( '8px' );
+		cancelButton.onClick( () => this.cancel() );
+		buttonsRow.appendChild( cancelButton.dom );
+
+		// Promise handlers
+
+		this.resolve = null;
+		this.reject = null;
+
+	}
+
+	show() {
+
+		document.body.appendChild( this.dom );
+
+		return new Promise( ( resolve, reject ) => {
+
+			this.resolve = resolve;
+			this.reject = reject;
+
+		} );
+
+	}
+
+	confirm() {
+
+		const result = {
+			asScene: this.asSceneCheckbox.getValue()
+		};
+
+		this.dom.remove();
+
+		if ( this.resolve ) {
+
+			this.resolve( result );
+
+		}
+
+	}
+
+	cancel() {
+
+		this.dom.remove();
+
+		if ( this.reject ) {
+
+			this.reject( new Error( 'Import cancelled' ) );
+
+		}
+
+	}
+
+}
+
+export { GLTFImportDialog };

editor/js/Loader.js

@@ -3,9 +3,12 @@ import * as THREE from 'three';
 import { TGALoader } from 'three/addons/loaders/TGALoader.js';
 
 import { AddObjectCommand } from './commands/AddObjectCommand.js';
+import { SetSceneCommand } from './commands/SetSceneCommand.js';
 
 import { LoaderUtils } from './LoaderUtils.js';
 
+import { GLTFImportDialog } from './GLTFImportDialog.js';
+
 import { unzipSync, strFromU8 } from 'three/addons/libs/fflate.module.js';
 
 function Loader( editor ) {
@@ -268,20 +271,40 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const loader = await createGLTFLoader();
+					try {
+
+						const dialog = new GLTFImportDialog( editor.strings );
+						const options = await dialog.show();
 
-					loader.parse( contents, '', function ( result ) {
+						const loader = await createGLTFLoader();
 
-						const scene = result.scene;
-						scene.name = filename;
+						loader.parse( contents, '', function ( result ) {
 
-						scene.animations.push( ...result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+							const scene = result.scene;
+							scene.name = filename;
 
-						loader.dracoLoader.dispose();
-						loader.ktx2Loader.dispose();
+							scene.animations.push( ...result.animations );
 
-					} );
+							if ( options.asScene ) {
+
+								editor.execute( new SetSceneCommand( editor, scene ) );
+
+							} else {
+
+								editor.execute( new AddObjectCommand( editor, scene ) );
+
+							}
+
+							loader.dracoLoader.dispose();
+							loader.ktx2Loader.dispose();
+
+						} );
+
+					} catch ( e ) {
+
+						// Import cancelled
+
+					}
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -298,20 +321,40 @@ function Loader( editor ) {
 
 					const contents = event.target.result;
 
-					const loader = await createGLTFLoader( manager );
+					try {
 
-					loader.parse( contents, '', function ( result ) {
+						const dialog = new GLTFImportDialog( editor.strings );
+						const options = await dialog.show();
 
-						const scene = result.scene;
-						scene.name = filename;
+						const loader = await createGLTFLoader( manager );
 
-						scene.animations.push( ...result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+						loader.parse( contents, '', function ( result ) {
 
-						loader.dracoLoader.dispose();
-						loader.ktx2Loader.dispose();
+							const scene = result.scene;
+							scene.name = filename;
 
-					} );
+							scene.animations.push( ...result.animations );
+
+							if ( options.asScene ) {
+
+								editor.execute( new SetSceneCommand( editor, scene ) );
+
+							} else {
+
+								editor.execute( new AddObjectCommand( editor, scene ) );
+
+							}
+
+							loader.dracoLoader.dispose();
+							loader.ktx2Loader.dispose();
+
+						} );
+
+					} catch ( e ) {
+
+						// Import cancelled
+
+					}
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -635,7 +678,8 @@ function Loader( editor ) {
 
 					const { USDLoader } = await import( 'three/addons/loaders/USDLoader.js' );
 
-					const group = new USDLoader().parse( contents );
+					const loader = new USDLoader( manager );
+					const group = loader.parse( contents );
 					group.name = filename;
 
 					editor.execute( new AddObjectCommand( editor, group ) );
@@ -759,6 +803,15 @@ function Loader( editor ) {
 
 			}
 
+			case 'bmp':
+			case 'gif':
+			case 'jpg':
+			case 'jpeg':
+			case 'png':
+			case 'tga':
+
+				break; // Image files are handled as textures by other loaders
+
 			default:
 
 				console.error( 'Unsupported file format (' + extension + ').' );
@@ -905,19 +958,39 @@ function Loader( editor ) {
 
 				{
 
-					const loader = await createGLTFLoader();
+					try {
+
+						const dialog = new GLTFImportDialog( editor.strings );
+						const options = await dialog.show();
 
-					loader.parse( file.buffer, '', function ( result ) {
+						const loader = await createGLTFLoader();
 
-						const scene = result.scene;
+						loader.parse( file.buffer, '', function ( result ) {
 
-						scene.animations.push( ...result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+							const scene = result.scene;
 
-						loader.dracoLoader.dispose();
-						loader.ktx2Loader.dispose();
+							scene.animations.push( ...result.animations );
 
-					} );
+							if ( options.asScene ) {
+
+								editor.execute( new SetSceneCommand( editor, scene ) );
+
+							} else {
+
+								editor.execute( new AddObjectCommand( editor, scene ) );
+
+							}
+
+							loader.dracoLoader.dispose();
+							loader.ktx2Loader.dispose();
+
+						} );
+
+					} catch ( e ) {
+
+						// Import cancelled
+
+					}
 
 					break;
 
@@ -927,19 +1000,39 @@ function Loader( editor ) {
 
 				{
 
-					const loader = await createGLTFLoader( manager );
+					try {
 
-					loader.parse( strFromU8( file ), '', function ( result ) {
+						const dialog = new GLTFImportDialog( editor.strings );
+						const options = await dialog.show();
 
-						const scene = result.scene;
+						const loader = await createGLTFLoader( manager );
 
-						scene.animations.push( ...result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+						loader.parse( strFromU8( file ), '', function ( result ) {
 
-						loader.dracoLoader.dispose();
-						loader.ktx2Loader.dispose();
+							const scene = result.scene;
 
-					} );
+							scene.animations.push( ...result.animations );
+
+							if ( options.asScene ) {
+
+								editor.execute( new SetSceneCommand( editor, scene ) );
+
+							} else {
+
+								editor.execute( new AddObjectCommand( editor, scene ) );
+
+							}
+
+							loader.dracoLoader.dispose();
+							loader.ktx2Loader.dispose();
+
+						} );
+
+					} catch ( e ) {
+
+						// Import cancelled
+
+					}
 
 					break;