Examples: Create TrackballControls with renderer.domElement

examples/css3d_sandbox.html

@@ -52,8 +52,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 200, 200 );
 
-				controls = new THREE.TrackballControls( 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 );
 
+				controls = new THREE.TrackballControls( camera, renderer2.domElement );
+
 			}
 
 			function animate() {

examples/css3d_youtube.html

@@ -76,7 +76,7 @@
 				group.add( new Element( '9ubytEsCaS0', - 240, 0, 0, - Math.PI / 2 ) );
 				scene.add( group );
 
-				controls = new THREE.TrackballControls( camera );
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
 				controls.rotateSpeed = 4;
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/misc_controls_trackball.html

@@ -10,7 +10,7 @@
 				height: 100%;
 				overflow: hidden;
 			}
-			
+
 			body {
 				color: #000;
 				font-family:Monospace;
@@ -67,22 +67,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
-				controls = new THREE.TrackballControls( camera );
-
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-
-				controls.noZoom = false;
-				controls.noPan = false;
-
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.3;
-
-				controls.keys = [ 65, 83, 68 ];
-
-				controls.addEventListener( 'change', render );
-
 				// world
 
 				scene = new THREE.Scene();
@@ -126,6 +110,22 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.3;
+
+				controls.keys = [ 65, 83, 68 ];
+
+				controls.addEventListener( 'change', render );
+
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
@@ -154,9 +154,9 @@
 			function animate() {
 
 				requestAnimationFrame( animate );
-				
+
 				controls.update();
-				
+
 				stats.update();
 
 			}

examples/software_sandbox.html

@@ -57,8 +57,6 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 600;
 
-				controls = new THREE.TrackballControls( camera );
-
 				scene = new THREE.Scene();
 
 				// Torus
@@ -157,9 +155,10 @@
 
 				renderer = new THREE.SoftwareRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_buffergeometry_instancing2.html

@@ -116,8 +116,6 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 			camera.position.z = 4;
 
-			controls = new THREE.TrackballControls( camera );
-
 			scene = new THREE.Scene();
 
 			//
@@ -204,6 +202,8 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );
 
+			controls = new THREE.TrackballControls( camera, renderer.domElement );
+
 			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
 				document.getElementById( 'notSupported' ).style.display = '';

examples/webgl_effects_ascii.html

@@ -63,8 +63,6 @@
 				camera.position.y = 150;
 				camera.position.z = 500;
 
-				controls = new THREE.TrackballControls( camera );
-
 				scene = new THREE.Scene();
 
 				var light = new THREE.PointLight( 0xffffff );
@@ -75,7 +73,7 @@
 				light.position.set( - 500, - 500, - 500 );
 				scene.add( light );
 
-				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true }) );
+				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true } ) );
 				scene.add( sphere );
 
 				// Plane
@@ -98,6 +96,8 @@
 
 				document.body.appendChild( effect.domElement );
 
+				controls = new THREE.TrackballControls( camera, effect.domElement );
+
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_interactive_cubes_gpu.html

@@ -61,15 +61,6 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
-				controls = new THREE.TrackballControls( camera );
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-				controls.noZoom = false;
-				controls.noPan = false;
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.3;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
@@ -171,6 +162,15 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+				controls.noZoom = false;
+				controls.noPan = false;
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.3;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_interactive_draggablecubes.html

@@ -39,15 +39,6 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 
-				controls = new THREE.TrackballControls( camera );
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-				controls.noZoom = false;
-				controls.noPan = false;
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.3;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
@@ -101,6 +92,15 @@
 
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+				controls.noZoom = false;
+				controls.noPan = false;
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.3;
+
 				var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
 				dragControls.addEventListener( 'dragstart', function () {
 

examples/webgl_lights_pointlights2.html

@@ -79,22 +79,6 @@
 				scene.background = new THREE.Color( 0x040306 );
 				scene.fog = new THREE.Fog( 0x040306, 10, 300 );
 
-				// CONTROLS
-
-				controls = new THREE.TrackballControls( camera );
-
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-
-				controls.noZoom = false;
-				controls.noPan = false;
-
-				controls.staticMoving = false;
-				controls.dynamicDampingFactor = 0.15;
-
-				controls.keys = [ 65, 83, 68 ];
-
 				// TEXTURES
 
 				var textureLoader = new THREE.TextureLoader();
@@ -185,6 +169,22 @@
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
+				// CONTROLS
+
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = false;
+				controls.dynamicDampingFactor = 0.15;
+
+				controls.keys = [ 65, 83, 68 ];
+
 				// STATS
 
 				stats = new Stats();

examples/webgl_loader_3ds.html

@@ -50,8 +50,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 2;
 
-				controls = new THREE.TrackballControls( camera );
-
 				scene = new THREE.Scene();
 				scene.add( new THREE.HemisphereLight() );
 
@@ -86,6 +84,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
 				window.addEventListener( 'resize', resize, false );
 
 			}

examples/webgl_loader_babylon.html

@@ -45,8 +45,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 100;
 
-				controls = new THREE.TrackballControls( camera );
-
 				// scene
 
 				scene = new THREE.Scene();
@@ -103,6 +101,10 @@
 
 				//
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}

examples/webgl_loader_pcd.html

@@ -74,21 +74,6 @@
 				camera.position.z = - 2;
 				camera.up.set( 0, 0, 1 );
 
-				controls = new THREE.TrackballControls( camera );
-
-				controls.rotateSpeed = 2.0;
-				controls.zoomSpeed = 0.3;
-				controls.panSpeed = 0.2;
-
-				controls.noZoom = false;
-				controls.noPan = false;
-
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.3;
-
-				controls.minDistance = 0.3;
-				controls.maxDistance = 0.3 * 100;
-
 				scene.add( camera );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -110,6 +95,21 @@
 				document.body.appendChild( container );
 				container.appendChild( renderer.domElement );
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
+				controls.rotateSpeed = 2.0;
+				controls.zoomSpeed = 0.3;
+				controls.panSpeed = 0.2;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.3;
+
+				controls.minDistance = 0.3;
+				controls.maxDistance = 0.3 * 100;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_loader_vtk.html

@@ -62,18 +62,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
 				camera.position.z = 0.2;
 
-				controls = new THREE.TrackballControls( camera );
-
-				controls.rotateSpeed = 5.0;
-				controls.zoomSpeed = 5;
-				controls.panSpeed = 2;
-
-				controls.noZoom = false;
-				controls.noPan = false;
-
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.3;
-
 				scene = new THREE.Scene();
 
 				scene.add( camera );
@@ -162,6 +150,20 @@
 				document.body.appendChild( container );
 				container.appendChild( renderer.domElement );
 
+				// controls
+
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+
+				controls.rotateSpeed = 5.0;
+				controls.zoomSpeed = 5;
+				controls.panSpeed = 2;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.3;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_modifier_tessellation.html

@@ -114,8 +114,6 @@
 			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 			camera.position.set( - 100, 100, 200 );
 
-			controls = new THREE.TrackballControls( camera );
-
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x050505 );
 
@@ -214,6 +212,8 @@
 			var container = document.getElementById( 'container' );
 			container.appendChild( renderer.domElement );
 
+			controls = new THREE.TrackballControls( camera, renderer.domElement );
+
 			stats = new Stats();
 			container.appendChild( stats.dom );