Clean up

examples/webgl_materials_standard.html

@@ -44,7 +44,7 @@
 
 		<script src="../build/three.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/loaders/OBJLoader.js"></script>
 		<script src="js/loaders/RGBELoader.js"></script>
 		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
@@ -79,15 +79,6 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				//
-
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
-				camera.position.z = 2;
-
-				controls = new THREE.TrackballControls( camera );
-
-				//
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -98,57 +89,68 @@
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = 3;
 
-				var textureCube = new THREE.CubeTextureLoader()
-					.setPath( 'textures/cube/pisa/' )
-					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
+				//
 
 				scene = new THREE.Scene();
-				scene.background = textureCube;
 
-				// LIGHTS
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
+				camera.position.z = 2;
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+				//
 
 				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );
 
 				//
 
-				var path = 'models/obj/cerberus/';
+				new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/pisa/' )
+					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], function ( textureCube ) {
+
+						scene.background = textureCube;
+
+					} );
+
+				//
 
-				var loader = new THREE.OBJLoader();
 				var material = new THREE.MeshStandardMaterial();
-				loader.load( path + 'Cerberus.obj', function ( group ) {
 
-					// var material = new THREE.MeshBasicMaterial( { wireframe: true } );
+				new THREE.OBJLoader()
+					.setPath( 'models/obj/cerberus/' )
+					.load( 'Cerberus.obj', function ( group ) {
 
-					var loader = new THREE.TextureLoader();
+						var loader = new THREE.TextureLoader()
+							.setPath( 'models/obj/cerberus/' );
 
-					material.roughness = 1;
-					material.metalness = 1;
+						material.roughness = 1; // attenuates roughnessMap
+						material.metalness = 1; // attenuates metalnessMap
 
-					material.map = loader.load( path + 'Cerberus_A.jpg' );
-					// roughness is in G channel, metalness is in B channel
-					material.metalnessMap = material.roughnessMap = loader.load( path + 'Cerberus_RM.jpg' );
-					material.normalMap = loader.load( path + 'Cerberus_N.jpg' );
+						material.map = loader.load( 'Cerberus_A.jpg' );
+						// roughness is in G channel, metalness is in B channel
+						material.metalnessMap = material.roughnessMap = loader.load( 'Cerberus_RM.jpg' );
+						material.normalMap = loader.load( 'Cerberus_N.jpg' );
 
-					material.map.wrapS = THREE.RepeatWrapping;
-					material.roughnessMap.wrapS = THREE.RepeatWrapping;
-					material.metalnessMap.wrapS = THREE.RepeatWrapping;
-					material.normalMap.wrapS = THREE.RepeatWrapping;
+						material.map.wrapS = THREE.RepeatWrapping;
+						material.roughnessMap.wrapS = THREE.RepeatWrapping;
+						material.metalnessMap.wrapS = THREE.RepeatWrapping;
+						material.normalMap.wrapS = THREE.RepeatWrapping;
 
-					group.traverse( function ( child ) {
+						group.traverse( function ( child ) {
 
-						if ( child instanceof THREE.Mesh ) {
+							if ( child instanceof THREE.Mesh ) {
 
-							child.material = material;
+								child.material = material;
 
-						}
+							}
 
-					} );
+						} );
 
-					group.position.x = - 0.45;
-					group.rotation.y = - Math.PI / 2;
-					scene.add( group );
+						group.position.x = - 0.45;
+						group.rotation.y = - Math.PI / 2;
+						scene.add( group );
 
-				} );
+					} );
 
 				var genCubeUrls = function( prefix, postfix ) {
 					return [
@@ -170,7 +172,11 @@
 					var hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
 					material.envMap = hdrCubeRenderTarget.texture;
-					material.needsUpdate = true;
+					material.needsUpdate = true; // is this needed?
+
+					hdrCubeMap.dispose();
+					pmremGenerator.dispose();
+					pmremCubeUVPacker.dispose();
 
 				} );
 
@@ -204,8 +210,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				renderer.render( scene, camera );
 
 				if ( statsEnabled ) stats.update();