Add OrbitControls

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -44,6 +44,8 @@
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
+
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
 		<script src="js/postprocessing/ShaderPass.js"></script>
@@ -88,7 +90,7 @@
 
 		<script>
 
-			var scene, camera, geometry;
+			var scene, camera, geometry, controls;
 			var renderer;
 
 			var ENTIRE_SCENE = 0, BLOOM_SCENE = 1;
@@ -104,8 +106,6 @@
 				rows: 6,
 				columns: 6,
 				size: 2,
-				cameraAngle: 90,
-				cameraDistance: 30,
 				scene: "Scene with Glow"
 			};
 
@@ -125,6 +125,12 @@
 			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 			camera.position.set( 0, 0, 30 );
 			camera.lookAt( 0, 0, 0 );
+			
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.maxPolarAngle = Math.PI * 0.5;
+			controls.minDistance = 1;
+			controls.maxDistance = 100;
+			controls.addEventListener('change', render);
 
 			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
@@ -187,7 +193,6 @@
 
 			} );
 
-
 			var folder = gui.addFolder( 'Bloom Parameters' );
 
 			folder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
@@ -222,12 +227,6 @@
 
 			folder.add( params, 'size', 0.1, 3 ).onChange( setupBoxes );
 
-			folder = gui.addFolder( 'Camera Position' );
-
-			folder.add( params, 'cameraAngle', 0, 360 ).step( 1 ).onChange( updateCamera );
-
-			folder.add( params, 'cameraDistance', 30, 100 ).step( 1 ).onChange( updateCamera );
-
 			setupBoxes();
 
 			function onDocumentMouseClick( event ) {
@@ -248,17 +247,6 @@
 
 			}
 
-			function updateCamera() {
-
-				var distance = params.cameraDistance;
-				var angle = params.cameraAngle;
-				camera.position.x = Math.cos( angle * THREE.Math.DEG2RAD ) * distance;
-				camera.position.z = Math.sin( angle * THREE.Math.DEG2RAD ) * distance;
-				camera.lookAt( 0, 0, 0 );
-				render();
-
-			}
-
 			window.onresize = function () {
 
 				var width = window.innerWidth;