Examples: Create OrbitControls with renderer.domElement

docs/examples/controls/OrbitControls.html

@@ -32,7 +32,7 @@ var scene = new THREE.Scene();
 
 var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
-var controls = new THREE.OrbitControls( camera );
+var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 //controls.update() must be called after any manual changes to the camera's transform
 camera.position.set( 0, 20, 100 );

examples/css2d_label.html

@@ -64,8 +64,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 10, 5, 20 );
 
-				var controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 
 				var dirLight = new THREE.DirectionalLight( 0xffffff );
@@ -128,6 +126,8 @@
 				labelRenderer.domElement.style.top = 0;
 				document.body.appendChild( labelRenderer.domElement );
 
+				var controls = new THREE.OrbitControls( camera, labelRenderer.domElement );
+
 			}
 
 			function animate() {

examples/css3d_orthographic.html

@@ -53,8 +53,6 @@
 
 				camera.position.set( - 200, 200, 200 );
 
-				var controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
@@ -104,6 +102,8 @@
 				renderer2.domElement.style.top = 0;
 				document.body.appendChild( renderer2.domElement );
 
+				var controls = new THREE.OrbitControls( camera, renderer2.domElement );
+
 				function createPlane( width, height, cssColor, pos, rot ) {
 
 					var element = document.createElement( 'div' );

examples/webgl2_materials_texture2darray.html

@@ -145,8 +145,6 @@
 
 					} );
 
-				// var controls = new THREE.OrbitControls( camera );
-
 				// 2D Texture array is available on WebGL 2.0
 
 				var canvas = document.createElement( 'canvas' );

examples/webgl_geometry_text_shapes.html

@@ -39,10 +39,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, - 400, 600 );
 
-				var controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
@@ -131,6 +127,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			} // end init

examples/webgl_geometry_text_stroke.html

@@ -40,10 +40,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, - 400, 600 );
 
-				var controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
@@ -135,6 +131,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			} // end init

examples/webgl_lightshafts.html

@@ -114,12 +114,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( 3.2, 3, 3.7 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0.5, 1.5, 0 );
-				controls.minDistance = 2;
-				controls.maxDistance = 20;
-				controls.update();
-
 				clock = new THREE.Clock();
 
 				scene = new THREE.Scene();
@@ -220,6 +214,12 @@
 				renderer.gammaFactor = 2.2;
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0.5, 1.5, 0 );
+				controls.minDistance = 2;
+				controls.maxDistance = 20;
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}

examples/webgl_loader_awd.html

@@ -87,8 +87,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 70, 50, - 100 );
 
-				var controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 
 				// Add the AWD SCENE
@@ -112,6 +110,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_loader_bvh.html

@@ -68,10 +68,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 200, 400 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.minDistance = 300;
-				controls.maxDistance = 700;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xeeeeee );
 
@@ -81,9 +77,12 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				document.body.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 300;
+				controls.maxDistance = 700;
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}

examples/webgl_loader_ctm_materials.html

@@ -81,11 +81,6 @@
 				camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.set( 185, 40, 170 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.maxPolarAngle = Math.PI / 2;
-				controls.minDistance = 150;
-				controls.maxDistance = 500;
-
 				// SCENE
 
 				var r = "textures/cube/pisa/";
@@ -119,14 +114,15 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
 				renderer.domElement.style.position = "relative";
-
 				container.appendChild( renderer.domElement );
 
-				//
-
-				renderer.gammaInput = true;
-				renderer.gammaOutput = true;
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.maxPolarAngle = Math.PI / 2;
+				controls.minDistance = 150;
+				controls.maxDistance = 500;
 
 				// STATS
 

examples/webgl_loader_fbx.html

@@ -70,10 +70,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 100, 200, 300 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 100, 0 );
-				controls.update();
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
@@ -134,6 +130,10 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 100, 0 );
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				// stats

examples/webgl_loader_fbx_nurbs.html

@@ -66,10 +66,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 2, 18, 28 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 12, 0 );
-				controls.update();
-
 				scene = new THREE.Scene();
 
 				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
@@ -101,6 +97,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 12, 0 );
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}

examples/webgl_loader_gcode.html

@@ -50,8 +50,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000 );
 				camera.position.set( 0, 0, 50 );
 
-				var controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 
 				var loader = new THREE.GCodeLoader();
@@ -67,6 +65,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
 				window.addEventListener( 'resize', resize, false );
 
 			}

examples/webgl_loader_gltf.html

@@ -72,10 +72,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 				camera.position.set( - 1.8, 0.9, 2.7 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, - 0.2, - 0.2 );
-				controls.update();
-
 				scene = new THREE.Scene();
 
 				var loader = new THREE.RGBELoader().setPath( 'textures/equirectangular/' );
@@ -129,6 +125,10 @@
 				renderer.gammaOutput = true;
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, - 0.2, - 0.2 );
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				// stats

examples/webgl_loader_lwo.html

@@ -62,10 +62,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
 				camera.position.set( 5, 4, 20 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.y = 4;
-				controls.update();
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 
@@ -95,14 +91,15 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				renderer.physicallyCorrectLights = true;
-
 				renderer.gammaFactor = 2.2;
 				renderer.gammaOutput = true;
-
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.y = 4;
+				controls.update();
+
 				renderer.setAnimationLoop( function () {
 
 					stats.begin();

examples/webgl_loader_playcanvas.html

@@ -92,7 +92,7 @@
 
 				//
 
-				var controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_loader_sea3d.html

@@ -116,13 +116,13 @@
 				camera.position.set( 1000, 1000, 1000 );
 				camera.lookAt( 0, 0, 0 );
 
-				controls = new THREE.OrbitControls( camera );
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_loader_sea3d_bvh.html

@@ -51,7 +51,7 @@
 
 		<script src="js/loaders/BVHLoader.js"></script>
 		<script src="js/utils/SkeletonUtils.js"></script>
-		
+
 		<script src="js/WebGL.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -98,7 +98,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera );
+				new THREE.OrbitControls( camera, renderer.domElement );
 
 				// get meshes
 				player = loader.getMesh( "Player" );

examples/webgl_loader_sea3d_bvh_retarget.html

@@ -51,7 +51,7 @@
 
 		<script src="js/loaders/BVHLoader.js"></script>
 		<script src="js/utils/SkeletonUtils.js"></script>
-		
+
 		<script src="js/WebGL.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -98,7 +98,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera );
+				new THREE.OrbitControls( camera, renderer.domElement );
 
 				// get meshes
 				player = loader.getMesh( "Player" );

examples/webgl_loader_sea3d_hierarchy.html

@@ -104,7 +104,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera );
+				new THREE.OrbitControls( camera, renderer.domElement );
 
 				animate();
 

examples/webgl_loader_sea3d_keyframe.html

@@ -92,7 +92,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera );
+				new THREE.OrbitControls( camera, renderer.domElement );
 
 				// events
 

examples/webgl_loader_sea3d_morph.html

@@ -93,7 +93,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera );
+				new THREE.OrbitControls( camera, renderer.domElement );
 
 				// get mesh
 

examples/webgl_loader_sea3d_physics.html

@@ -96,7 +96,7 @@
 
 				loader.onComplete = function () {
 
-					new THREE.OrbitControls( camera );
+					new THREE.OrbitControls( camera, renderer.domElement );
 
 					// events
 

examples/webgl_loader_sea3d_skinning.html

@@ -95,7 +95,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				var controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				// get meshes
 				player = loader.getMesh( "Player" );

examples/webgl_loader_texture_tga.html

@@ -98,10 +98,6 @@
 
 				//
 
-				var controls = new THREE.OrbitControls( camera );
-
-				//
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -109,6 +105,10 @@
 
 				//
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+				//
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_loader_vrm.html

@@ -67,10 +67,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 				camera.position.set( 0, 1.6, - 2.2 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0.9, 0 );
-				controls.update();
-
 				scene = new THREE.Scene();
 
 				light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
@@ -131,6 +127,10 @@
 				renderer.gammaOutput = true;
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 0.9, 0 );
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				// stats

examples/webgl_loader_vrml.html

@@ -54,9 +54,7 @@
 
 			}
 
-			var container, stats;
-
-			var camera, controls, scene, renderer;
+			var camera, scene, renderer, stats;
 
 			init();
 			animate();
@@ -66,8 +64,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
 				camera.position.z = 6;
 
-				controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 				scene.add( camera );
 
@@ -91,13 +87,16 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				// controls
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-				container.appendChild( renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+				//
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				//
 

examples/webgl_materials_cubemap.html

@@ -68,15 +68,8 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 2000;
 
-				//controls
-				var controls = new THREE.OrbitControls( camera );
-				controls.enableZoom = false;
-				controls.enablePan = false;
-				controls.minPolarAngle = Math.PI / 4;
-				controls.maxPolarAngle = Math.PI / 1.5;
-
 				//cubemap
-				var path = "textures/cube/SwedishRoyalCastle/";
+				var path = 'textures/cube/SwedishRoyalCastle/';
 				var format = '.jpg';
 				var urls = [
 					path + 'px' + format, path + 'nx' + format,
@@ -136,6 +129,13 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				//controls
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.enableZoom = false;
+				controls.enablePan = false;
+				controls.minPolarAngle = Math.PI / 4;
+				controls.maxPolarAngle = Math.PI / 1.5;
+
 				//stats
 				stats = new Stats();
 				container.appendChild( stats.dom );

examples/webgl_materials_curvature.html

@@ -151,14 +151,13 @@
 				camera.position.y = 2;
 				camera.position.z = 24;
 
-				var controls = new THREE.OrbitControls( camera );
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
-
 				document.body.appendChild( renderer.domElement );
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+
 				var loader = new THREE.OBJLoader();
 				//load the obj
 				loader.load( 'models/obj/ninja/ninjaHead_Low.obj', function ( object ) {

examples/webgl_materials_envmaps.html

@@ -55,10 +55,6 @@
 				camera.position.set( 0, 0, 1000 );
 				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.minDistance = 500;
-				controls.maxDistance = 2500;
-
 				// SCENE
 
 				scene = new THREE.Scene();
@@ -162,6 +158,12 @@
 
 				//
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 500;
+				controls.maxDistance = 2500;
+
+				//
+
 				var params = {
 					Cube: function () {
 

examples/webgl_materials_lightmap.html

@@ -83,12 +83,6 @@
 
 				scene = new THREE.Scene();
 
-				// CONTROLS
-
-				var controls = new THREE.OrbitControls( camera );
-				controls.maxPolarAngle = 0.9 * Math.PI / 2;
-				controls.enableZoom = false;
-
 				// LIGHTS
 
 				var light = new THREE.DirectionalLight( 0xaabbff, 0.3 );
@@ -130,6 +124,12 @@
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
+				// CONTROLS
+
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.maxPolarAngle = 0.9 * Math.PI / 2;
+				controls.enableZoom = false;
+
 				// STATS
 
 				stats = new Stats();

examples/webgl_materials_variations_basic.html

@@ -176,7 +176,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_lambert.html

@@ -176,7 +176,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_phong.html

@@ -183,7 +183,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_physical.html

@@ -212,7 +212,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_standard.html

@@ -217,7 +217,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_toon.html

@@ -187,7 +187,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_physics_cloth.html

@@ -87,6 +87,7 @@
 			function initGraphics() {
 
 				container = document.getElementById( 'container' );
+				container.innerHTML = '';
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
@@ -95,14 +96,15 @@
 
 				camera.position.set( - 12, 7, 4 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 2, 0 );
-				controls.update();
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
+				container.appendChild( renderer.domElement );
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 2, 0 );
+				controls.update();
 
 				textureLoader = new THREE.TextureLoader();
 
@@ -127,11 +129,6 @@
 				light.shadow.bias = - 0.003;
 				scene.add( light );
 
-
-				container.innerHTML = "";
-
-				container.appendChild( renderer.domElement );
-
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';

examples/webgl_physics_convex_break.html

@@ -123,22 +123,24 @@
 		function initGraphics() {
 
 			container = document.getElementById( 'container' );
+			container.innerHTML = '';
 
 			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfd1e5 );
 
-			camera.position.set( -14, 8, 16 );
-
-			controls = new THREE.OrbitControls( camera );
-			controls.target.set( 0, 2, 0 );
-			controls.update();
+			camera.position.set( - 14, 8, 16 );
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
+			container.appendChild( renderer.domElement );
+
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.target.set( 0, 2, 0 );
+			controls.update();
 
 			textureLoader = new THREE.TextureLoader();
 
@@ -146,13 +148,13 @@
 			scene.add( ambientLight );
 
 			var light = new THREE.DirectionalLight( 0xffffff, 1 );
-			light.position.set( -10, 18, 5 );
+			light.position.set( - 10, 18, 5 );
 			light.castShadow = true;
 			var d = 14;
-			light.shadow.camera.left = -d;
+			light.shadow.camera.left = - d;
 			light.shadow.camera.right = d;
 			light.shadow.camera.top = d;
-			light.shadow.camera.bottom = -d;
+			light.shadow.camera.bottom = - d;
 
 			light.shadow.camera.near = 2;
 			light.shadow.camera.far = 50;
@@ -162,11 +164,6 @@
 
 			scene.add( light );
 
-
-			container.innerHTML = "";
-
-			container.appendChild( renderer.domElement );
-
 			stats = new Stats();
 			stats.domElement.style.position = 'absolute';
 			stats.domElement.style.top = '0px';

examples/webgl_physics_rope.html

@@ -92,6 +92,7 @@
 		function initGraphics() {
 
 			container = document.getElementById( 'container' );
+			container.innerHTML = '';
 
 			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
@@ -100,14 +101,15 @@
 
 			camera.position.set( - 7, 5, 8 );
 
-			controls = new THREE.OrbitControls( camera );
-			controls.target.set( 0, 2, 0 );
-			controls.update();
-
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
+			container.appendChild( renderer.domElement );
+
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.target.set( 0, 2, 0 );
+			controls.update();
 
 			textureLoader = new THREE.TextureLoader();
 
@@ -131,10 +133,6 @@
 
 			scene.add( light );
 
-			container.innerHTML = "";
-
-			container.appendChild( renderer.domElement );
-
 			stats = new Stats();
 			stats.domElement.style.position = 'absolute';
 			stats.domElement.style.top = '0px';

examples/webgl_physics_terrain.html

@@ -100,14 +100,12 @@
 			function initGraphics() {
 
 				container = document.getElementById( 'container' );
+				container.innerHTML = '';
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-
-				container.innerHTML = "";
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -115,7 +113,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
 				scene = new THREE.Scene();
@@ -126,7 +123,7 @@
 				camera.position.z = terrainDepthExtents / 2;
 				camera.lookAt( 0, 0, 0 );
 
-				var controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				var geometry = new THREE.PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );

examples/webgl_physics_volume.html

@@ -89,6 +89,7 @@
 			function initGraphics() {
 
 				container = document.getElementById( 'container' );
+				container.innerHTML = '';
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
@@ -97,14 +98,15 @@
 
 				camera.position.set( - 7, 5, 8 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 2, 0 );
-				controls.update();
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
+				container.appendChild( renderer.domElement );
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 2, 0 );
+				controls.update();
 
 				textureLoader = new THREE.TextureLoader();
 
@@ -128,10 +130,6 @@
 
 				scene.add( light );
 
-				container.innerHTML = '';
-
-				container.appendChild( renderer.domElement );
-
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';

examples/webgl_postprocessing_sobel.html

@@ -122,7 +122,7 @@
 				effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight;
 				composer.addPass( effectSobel );
 
-				var controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_shaders_vector.html

@@ -89,10 +89,6 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 50, 100, 500 );
 
-				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 50, 100, 0 );
-				controls.update();
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
@@ -292,6 +288,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 50, 100, 0 );
+				controls.update();
+
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 

examples/webgl_simple_gi.html

@@ -177,30 +177,11 @@
 				// sphere
 
 				var geometry = new THREE.TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
-				// var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 10, 10, 10 )
 				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 				var mesh = new THREE.Mesh( geometry, material );
-				// mesh.position.y = 1;
 				scene.add( mesh );
 
-				/*
-				var geometry = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
-
-				for ( var i = 0; i < 10; i ++ ) {
-
-					var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } );
-
-					var mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 3 - 1.5;
-					mesh.position.y = Math.random() * 3 - 1.5;
-					mesh.position.z = Math.random() * 3 - 1.5;
-					mesh.updateMatrix();
-					scene.add( mesh );
-
-				}
-				*/
-
 				// room
 
 				var materials = [];
@@ -225,7 +206,7 @@
 
 				new SimpleGI( renderer, scene );
 
-				var controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_terrain_dynamic.html

@@ -256,14 +256,6 @@
 				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
 				camera.position.set( - 1200, 800, 1200 );
 
-				controls = new THREE.OrbitControls( camera );
-
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-
-				controls.keys = [ 65, 83, 68 ];
-
 				// SCENE (FINAL)
 
 				scene = new THREE.Scene();
@@ -408,6 +400,16 @@
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
 
+				// CONTROLS
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+
+				controls.keys = [ 65, 83, 68 ];
+
 				// STATS
 
 				stats = new Stats();