Merge pull request #17612 from Mugen87/dev40

Examples: Make domElement to a mandatory parameter for all controls.

docs/examples/en/controls/FirstPersonControls.html

@@ -27,8 +27,7 @@
 				[page:Camera object]: The camera to be controlled.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -55,7 +54,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean enabled]</h3>

docs/examples/en/controls/FlyControls.html

@@ -28,8 +28,7 @@
 				[page:Camera object]: The camera to be controlled.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -46,7 +45,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean dragToLook]</h3>

docs/examples/en/controls/OrbitControls.html

@@ -56,8 +56,7 @@ function animate() {
 		<p>
 			[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.<br><br>
 
-			[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-			however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+			[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 		</p>
 
 
@@ -86,7 +85,7 @@ function animate() {
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean enabled]</h3>

docs/examples/en/controls/PointerLockControls.html

@@ -22,7 +22,7 @@
 		<p>[example:misc_controls_pointerlock misc / controls / pointerlock ]</p>
 
 		<code>
-var controls = new PointerLockControls( camera );
+var controls = new PointerLockControls( camera, document.body );
 
 // add event listener to show/hide a UI (e.g. the game's menu)
 
@@ -48,7 +48,7 @@ controls.addEventListener( 'unlock', function () {
 			[page:Camera camera]: The camera of the rendered scene.
 			</p>
 			<p>
-			[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the document's body.
+			[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -77,7 +77,7 @@ controls.addEventListener( 'unlock', function () {
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the document's body.
+			not set up new event listeners.
 		</p>
 
 

docs/examples/en/controls/TrackballControls.html

@@ -31,8 +31,7 @@
 				[page:Camera camera]: The camera of the rendered scene.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -61,7 +60,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Number dynamicDampingFactor]</h3>

docs/examples/en/controls/TransformControls.html

@@ -29,8 +29,7 @@
 				[page:Camera camera]: The camera of the rendered scene.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -77,7 +76,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean dragging]</h3>

docs/examples/zh/controls/FirstPersonControls.html

@@ -27,8 +27,7 @@
 				[page:Camera object]: The camera to be controlled.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -55,7 +54,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean enabled]</h3>

docs/examples/zh/controls/FlyControls.html

@@ -28,8 +28,7 @@
 				[page:Camera object]: The camera to be controlled.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -46,7 +45,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean dragToLook]</h3>

docs/examples/zh/controls/OrbitControls.html

@@ -56,8 +56,7 @@ function animate() {
 		<p>
 			[page:Camera object]: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。<br><br>
 
-			[page:HTMLDOMElement domElement]: （可选）用于事件监听的HTML元素，其默认值为整个文档，
-			但是如果你只希望在特定的元素上（例如Canvas上）进行控制，在这里进行指定即可。
+			[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 		</p>
 
 
@@ -85,7 +84,7 @@ function animate() {
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			用于监听鼠标事件或触摸事件的HTMLDOMElement（DOM元素）。该值必须在构造函数中进行传入；
-			在此更改它将不会设置新的事件监听器。默认值是整个文档。
+			在此更改它将不会设置新的事件监听器
 		</p>
 
 		<h3>[property:Boolean enabled]</h3>

docs/examples/zh/controls/PointerLockControls.html

@@ -22,7 +22,7 @@
 		<p>[example:misc_controls_pointerlock misc / controls / pointerlock ]</p>
 
 		<code>
-var controls = new PointerLockControls( camera );
+var controls = new PointerLockControls( camera, document.body );
 
 // add event listener to show/hide a UI (e.g. the game's menu)
 
@@ -48,7 +48,7 @@ controls.addEventListener( 'unlock', function () {
 			[page:Camera camera]: The camera of the rendered scene.
 			</p>
 			<p>
-			[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the document's body.
+			[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -77,7 +77,7 @@ controls.addEventListener( 'unlock', function () {
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the document's body.
+			not set up new event listeners.
 		</p>
 
 

docs/examples/zh/controls/TrackballControls.html

@@ -31,8 +31,7 @@
 				[page:Camera camera]: The camera of the rendered scene.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -61,7 +60,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Number dynamicDampingFactor]</h3>

docs/examples/zh/controls/TransformControls.html

@@ -29,8 +29,7 @@
 				[page:Camera camera]: The camera of the rendered scene.
 			</p>
 			<p>
-				[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
-				however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
+				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 			</p>
 			<p>
 				Creates a new instance of [name].
@@ -77,7 +76,7 @@
 		<h3>[property:HTMLDOMElement domElement]</h3>
 		<p>
 			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
-			not set up new event listeners. Default is the whole document.
+			not set up new event listeners.
 		</p>
 
 		<h3>[property:Boolean dragging]</h3>

editor/js/EditorControls.js

@@ -7,8 +7,6 @@
 
 THREE.EditorControls = function ( object, domElement ) {
 
-	domElement = ( domElement !== undefined ) ? domElement : document;
-
 	// API
 
 	this.enabled = true;

examples/js/controls/FirstPersonControls.js

@@ -6,9 +6,15 @@
 
 THREE.FirstPersonControls = function ( object, domElement ) {
 
-	this.object = object;
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.FirstPersonControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document;
 
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
+	}
+
+	this.object = object;
+	this.domElement = domElement;
 
 	// API
 

examples/js/controls/FlyControls.js

@@ -4,9 +4,16 @@
 
 THREE.FlyControls = function ( object, domElement ) {
 
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.FlyControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document;
+
+	}
+
 	this.object = object;
+	this.domElement = domElement;
 
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
 	if ( domElement ) this.domElement.setAttribute( 'tabindex', - 1 );
 
 	// API

examples/js/controls/OrbitControls.js

@@ -16,9 +16,11 @@
 
 THREE.OrbitControls = function ( object, domElement ) {
 
-	this.object = object;
+	if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
+	if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
 
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
+	this.object = object;
+	this.domElement = domElement;
 
 	// Set to false to disable this control
 	this.enabled = true;
@@ -378,7 +380,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 		return function pan( deltaX, deltaY ) {
 
-			var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+			var element = scope.domElement;
 
 			if ( scope.object.isPerspectiveCamera ) {
 
@@ -482,7 +484,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
 
-		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+		var element = scope.domElement;
 
 		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
 
@@ -670,7 +672,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
 
-		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+		var element = scope.domElement;
 
 		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
 

examples/js/controls/PointerLockControls.js

@@ -5,7 +5,14 @@
 
 THREE.PointerLockControls = function ( camera, domElement ) {
 
-	this.domElement = domElement || document.body;
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document.body;
+
+	}
+
+	this.domElement = domElement;
 	this.isLocked = false;
 
 	//

examples/js/controls/TrackballControls.js

@@ -7,11 +7,14 @@
 
 THREE.TrackballControls = function ( object, domElement ) {
 
+	if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
+	if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
+
 	var _this = this;
 	var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
 
 	this.object = object;
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
+	this.domElement = domElement;
 
 	// API
 
@@ -84,24 +87,13 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	this.handleResize = function () {
 
-		if ( this.domElement === document ) {
-
-			this.screen.left = 0;
-			this.screen.top = 0;
-			this.screen.width = window.innerWidth;
-			this.screen.height = window.innerHeight;
-
-		} else {
-
-			var box = this.domElement.getBoundingClientRect();
-			// adjustments come from similar code in the jquery offset() function
-			var d = this.domElement.ownerDocument.documentElement;
-			this.screen.left = box.left + window.pageXOffset - d.clientLeft;
-			this.screen.top = box.top + window.pageYOffset - d.clientTop;
-			this.screen.width = box.width;
-			this.screen.height = box.height;
-
-		}
+		var box = this.domElement.getBoundingClientRect();
+		// adjustments come from similar code in the jquery offset() function
+		var d = this.domElement.ownerDocument.documentElement;
+		this.screen.left = box.left + window.pageXOffset - d.clientLeft;
+		this.screen.top = box.top + window.pageYOffset - d.clientTop;
+		this.screen.width = box.width;
+		this.screen.height = box.height;
 
 	};
 

examples/js/controls/TransformControls.js

@@ -4,9 +4,14 @@
 
 THREE.TransformControls = function ( camera, domElement ) {
 
-	THREE.Object3D.call( this );
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document;
 
-	domElement = ( domElement !== undefined ) ? domElement : document;
+	}
+
+	THREE.Object3D.call( this );
 
 	this.visible = false;
 

examples/jsm/controls/FirstPersonControls.js

@@ -12,9 +12,15 @@ import {
 
 var FirstPersonControls = function ( object, domElement ) {
 
-	this.object = object;
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.FirstPersonControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document;
 
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
+	}
+
+	this.object = object;
+	this.domElement = domElement;
 
 	// API
 

examples/jsm/controls/FlyControls.js

@@ -9,9 +9,16 @@ import {
 
 var FlyControls = function ( object, domElement ) {
 
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.FlyControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document;
+
+	}
+
 	this.object = object;
+	this.domElement = domElement;
 
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
 	if ( domElement ) this.domElement.setAttribute( 'tabindex', - 1 );
 
 	// API

examples/jsm/controls/OrbitControls.js

@@ -26,9 +26,11 @@ import {
 
 var OrbitControls = function ( object, domElement ) {
 
-	this.object = object;
+	if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
+	if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
 
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
+	this.object = object;
+	this.domElement = domElement;
 
 	// Set to false to disable this control
 	this.enabled = true;
@@ -388,7 +390,7 @@ var OrbitControls = function ( object, domElement ) {
 
 		return function pan( deltaX, deltaY ) {
 
-			var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+			var element = scope.domElement;
 
 			if ( scope.object.isPerspectiveCamera ) {
 
@@ -492,7 +494,7 @@ var OrbitControls = function ( object, domElement ) {
 
 		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
 
-		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+		var element = scope.domElement;
 
 		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
 
@@ -680,7 +682,7 @@ var OrbitControls = function ( object, domElement ) {
 
 		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
 
-		var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
+		var element = scope.domElement;
 
 		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
 

examples/jsm/controls/PointerLockControls.js

@@ -11,7 +11,14 @@ import {
 
 var PointerLockControls = function ( camera, domElement ) {
 
-	this.domElement = domElement || document.body;
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document.body;
+
+	}
+
+	this.domElement = domElement;
 	this.isLocked = false;
 
 	//

examples/jsm/controls/TrackballControls.js

@@ -15,11 +15,14 @@ import {
 
 var TrackballControls = function ( object, domElement ) {
 
+	if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
+	if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
+
 	var _this = this;
 	var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
 
 	this.object = object;
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
+	this.domElement = domElement;
 
 	// API
 
@@ -92,24 +95,13 @@ var TrackballControls = function ( object, domElement ) {
 
 	this.handleResize = function () {
 
-		if ( this.domElement === document ) {
-
-			this.screen.left = 0;
-			this.screen.top = 0;
-			this.screen.width = window.innerWidth;
-			this.screen.height = window.innerHeight;
-
-		} else {
-
-			var box = this.domElement.getBoundingClientRect();
-			// adjustments come from similar code in the jquery offset() function
-			var d = this.domElement.ownerDocument.documentElement;
-			this.screen.left = box.left + window.pageXOffset - d.clientLeft;
-			this.screen.top = box.top + window.pageYOffset - d.clientTop;
-			this.screen.width = box.width;
-			this.screen.height = box.height;
-
-		}
+		var box = this.domElement.getBoundingClientRect();
+		// adjustments come from similar code in the jquery offset() function
+		var d = this.domElement.ownerDocument.documentElement;
+		this.screen.left = box.left + window.pageXOffset - d.clientLeft;
+		this.screen.top = box.top + window.pageYOffset - d.clientTop;
+		this.screen.width = box.width;
+		this.screen.height = box.height;
 
 	};
 

examples/jsm/controls/TransformControls.js

@@ -27,9 +27,14 @@ import {
 
 var TransformControls = function ( camera, domElement ) {
 
-	Object3D.call( this );
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document;
 
-	domElement = ( domElement !== undefined ) ? domElement : document;
+	}
+
+	Object3D.call( this );
 
 	this.visible = false;
 

examples/misc_controls_fly.html

@@ -190,7 +190,7 @@
 
 				//
 
-				controls = new FlyControls( camera );
+				controls = new FlyControls( camera, renderer.domElement );
 
 				controls.movementSpeed = 1000;
 				controls.domElement = renderer.domElement;

examples/misc_controls_pointerlock.html

@@ -96,7 +96,7 @@
 				light.position.set( 0.5, 1, 0.75 );
 				scene.add( light );
 
-				controls = new PointerLockControls( camera );
+				controls = new PointerLockControls( camera, document.body );
 
 				var blocker = document.getElementById( 'blocker' );
 				var instructions = document.getElementById( 'instructions' );

examples/webgl_geometry_dynamic.html

@@ -45,11 +45,6 @@
 
 				clock = new THREE.Clock();
 
-				controls = new FirstPersonControls( camera );
-
-				controls.movementSpeed = 500;
-				controls.lookSpeed = 0.1;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xaaccff );
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
@@ -81,6 +76,11 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+
+				controls.movementSpeed = 500;
+				controls.lookSpeed = 0.1;
+
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 

examples/webgl_geometry_minecraft.html

@@ -51,12 +51,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
-				controls = new FirstPersonControls( camera );
-
-				controls.movementSpeed = 1000;
-				controls.lookSpeed = 0.125;
-				controls.lookVertical = true;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
@@ -165,6 +159,12 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+
+				controls.movementSpeed = 1000;
+				controls.lookSpeed = 0.125;
+				controls.lookVertical = true;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_geometry_minecraft_ao.html

@@ -52,15 +52,6 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
-				controls = new FirstPersonControls( camera );
-
-				controls.movementSpeed = 1000;
-				controls.lookSpeed = 0.125;
-				controls.lookVertical = true;
-				controls.constrainVertical = true;
-				controls.verticalMin = 1.1;
-				controls.verticalMax = 2.2;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 );
@@ -267,6 +258,15 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+
+				controls.movementSpeed = 1000;
+				controls.lookSpeed = 0.125;
+				controls.lookVertical = true;
+				controls.constrainVertical = true;
+				controls.verticalMin = 1.1;
+				controls.verticalMax = 2.2;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_geometry_terrain.html

@@ -52,10 +52,6 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				controls = new FirstPersonControls( camera );
-				controls.movementSpeed = 1000;
-				controls.lookSpeed = 0.1;
-
 				var data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
@@ -83,6 +79,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+				controls.movementSpeed = 1000;
+				controls.lookSpeed = 0.1;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_geometry_terrain_fog.html

@@ -50,10 +50,6 @@
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				controls = new FirstPersonControls( camera );
-				controls.movementSpeed = 150;
-				controls.lookSpeed = 0.1;
-
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xefd1b5 );
 				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
@@ -85,6 +81,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+				controls.movementSpeed = 150;
+				controls.lookSpeed = 0.1;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_lensflares.html

@@ -43,14 +43,6 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 250;
 
-				controls = new FlyControls( camera );
-
-				controls.movementSpeed = 2500;
-				controls.domElement = container;
-				controls.rollSpeed = Math.PI / 6;
-				controls.autoForward = false;
-				controls.dragToLook = false;
-
 				// scene
 
 				scene = new THREE.Scene();
@@ -130,6 +122,16 @@
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
+				//
+
+				controls = new FlyControls( camera, renderer.domElement );
+
+				controls.movementSpeed = 2500;
+				controls.domElement = container;
+				controls.rollSpeed = Math.PI / 6;
+				controls.autoForward = false;
+				controls.dragToLook = false;
+
 				// stats
 
 				stats = new Stats();

examples/webgl_lod.html

@@ -35,10 +35,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 1000;
 
-				controls = new FlyControls( camera );
-				controls.movementSpeed = 1000;
-				controls.rollSpeed = Math.PI / 10;
-
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
@@ -95,6 +91,12 @@
 
 				//
 
+				controls = new FlyControls( camera, renderer.domElement );
+				controls.movementSpeed = 1000;
+				controls.rollSpeed = Math.PI / 10;
+
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}

examples/webgl_nearestneighbour.html

@@ -72,13 +72,6 @@
 
 				scene = new THREE.Scene();
 
-				controls = new FirstPersonControls( camera );
-				controls.movementSpeed = 100;
-				controls.lookSpeed = 0.1;
-
-				controls.lookAt( 500, 500, 500 );
-
-
 				// add a skybox background
 				var cubeTextureLoader = new THREE.CubeTextureLoader();
 
@@ -99,6 +92,12 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+				controls.movementSpeed = 100;
+				controls.lookSpeed = 0.1;
+
+				controls.lookAt( 500, 500, 500 );
+
 				// create the custom shader
 
 				var textureLoader = new THREE.TextureLoader();

examples/webgl_shadowmap.html

@@ -65,15 +65,6 @@
 				scene.background = new THREE.Color( 0x59472b );
 				scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
 
-				controls = new FirstPersonControls( camera );
-
-				controls.lookSpeed = 0.0125;
-				controls.movementSpeed = 500;
-				controls.noFly = false;
-				controls.lookVertical = true;
-
-				controls.lookAt( scene.position );
-
 				// LIGHTS
 
 				var ambient = new THREE.AmbientLight( 0x444444 );
@@ -112,6 +103,17 @@
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 
+				// CONTROLS
+
+				controls = new FirstPersonControls( camera, renderer.domElement );
+
+				controls.lookSpeed = 0.0125;
+				controls.movementSpeed = 500;
+				controls.noFly = false;
+				controls.lookVertical = true;
+
+				controls.lookAt( scene.position );
+
 				// STATS
 
 				stats = new Stats();

examples/webgl_shadowmap_performance.html

@@ -62,15 +62,6 @@
 				scene.background = new THREE.Color( 0x59472b );
 				scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
 
-				controls = new FirstPersonControls( camera );
-
-				controls.lookSpeed = 0.0125;
-				controls.movementSpeed = 500;
-				controls.noFly = false;
-				controls.lookVertical = true;
-
-				controls.lookAt( scene.position );
-
 				// LIGHTS
 
 				var ambient = new THREE.AmbientLight( 0x444444 );
@@ -108,6 +99,17 @@
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
+				// CONTROLS
+
+				controls = new FirstPersonControls( camera, renderer.domElement );
+
+				controls.lookSpeed = 0.0125;
+				controls.movementSpeed = 500;
+				controls.noFly = false;
+				controls.lookVertical = true;
+
+				controls.lookAt( scene.position );
+
 				// STATS
 
 				stats = new Stats();