Example: Improve 3MF demo.

examples/webgl_loader_3mf.html

@@ -25,8 +25,20 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ThreeMFLoader } from './jsm/loaders/3MFLoader.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, object, loader, controls;
+
+			var params = {
+				asset: 'cube_gears'
+			};
+
+			var assets = [
+				'cube_gears',
+				'facecolors',
+				'multipletextures',
+				'vertexcolors'
+			];
 
 			init();
 
@@ -47,29 +59,77 @@
 				// Z is up for objects intended to be 3D printed.
 
 				camera.up.set( 0, 0, 1 );
-				camera.position.set( - 80, - 90, 150 );
+				camera.position.set( - 100, - 250, 100 );
 				scene.add( camera );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 50;
-				controls.maxDistance = 300;
+				controls.maxDistance = 400;
 				controls.enablePan = false;
-				controls.target.set( 80, 65, 20 );
 				controls.update();
 
 				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
-				var loader = new ThreeMFLoader();
-				loader.load( './models/3mf/cube_gears.3mf', function ( object ) {
+
+				var manager = new THREE.LoadingManager();
+
+				manager.onLoad = function () {
+
+					var aabb = new THREE.Box3().setFromObject( object );
+					var center = aabb.getCenter( new THREE.Vector3() );
+
+					object.position.x += ( object.position.x - center.x );
+					object.position.y += ( object.position.y - center.y );
+					object.position.z += ( object.position.z - center.z );
+
+					controls.reset();
 
 					scene.add( object );
 					render();
 
-				} );
+				};
+
+				loader = new ThreeMFLoader( manager );
+				loadAsset( params.asset );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
+				//
+
+				var gui = new GUI( { width: 300 } );
+				gui.add( params, 'asset', assets ).onChange( function ( value ) {
+
+					loadAsset( value );
+
+				} );
+
+			}
+
+			function loadAsset( asset ) {
+
+				loader.load( 'models/3mf/' + asset + '.3mf', function ( group ) {
+
+					if ( object ) {
+
+						object.traverse( function ( child ) {
+
+							if ( child.material ) child.material.dispose();
+							if ( child.material && child.material.map ) child.material.map.dispose();
+							if ( child.geometry ) child.geometry.dispose();
+
+						} );
+
+						scene.remove( object );
+
+					}
+
+					//
+
+					object = group;
+
+				} );
+
 			}
 
 			function onWindowResize() {