OrbitControls: Introduce listenToKeyEvents().

docs/examples/en/controls/OrbitControls.html

@@ -115,11 +115,6 @@
 			Note that if this is enabled, you must call [page:.update] () in your animation loop.
 		</p>
 
-		<h3>[property:Boolean enableKeys]</h3>
-		<p>
-			Enable or disable the use of keyboard controls.
-		</p>
-
 		<h3>[property:Boolean enablePan]</h3>
 		<p>
 			Enable or disable camera panning. Default is true.
@@ -288,6 +283,11 @@ controls.touches = {
 			Get the current vertical rotation, in radians.
 		</p>
 
+		<h3>[method:void listenToKeyEvents] ( [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			Adds key event listeners to the given DOM element. *window* is a recommended argument for using this method.
+		</p>
+
 		<h3>[method:null reset] ()</h3>
 		<p>
 			Reset the controls to their state from either the last time the [page:.saveState] was called, or the initial state.

docs/examples/ko/controls/OrbitControls.html

@@ -80,7 +80,7 @@
 		<h3>[property:Boolean autoRotate]</h3>
 		<p>
 			대상 주위를 자동으로 회전하려면 true로 설정합니다.<br> autoRotate를 활성할 경우, 애니메이션 루프에서 [page:.update()]를 호출해야 합니다.
-			
+
 		</p>
 
 		<h3>[property:Float autoRotateSpeed]</h3>
@@ -110,11 +110,6 @@
 			만약 enableDamping을 활성화 할 경우, 애니메이션 루프에서 [page:.update]를 호출해야 합니다.
 		</p>
 
-		<h3>[property:Boolean enableKeys]</h3>
-		<p>
-			키보드 컨트롤의 활성화 또는 비활성화를 설정합니다. 기본값은 *true* 입니다.
-		</p>
-
 		<h3>[property:Boolean enablePan]</h3>
 		<p>
 			카매라 패닝의 활성화 또는 비활성화를 설정합니다. 기본값은 *true* 입니다.
@@ -123,9 +118,9 @@
 		<h3>[property:Boolean enableRotate]</h3>
 		<p>
 			카메라의 수직 및 수평 회전의 활성화 또는 비활성화를 설정합니다. 기본값은 *true* 입니다.<br>
-			[page:.minPolarAngle polar angle] 또는 page:.minAzimuthAngle azimuth angle]의 최소 및 최대를 동일한 값으로 설정하여 단일 축을 비활성화 할 수 있습니다. 
+			[page:.minPolarAngle polar angle] 또는 page:.minAzimuthAngle azimuth angle]의 최소 및 최대를 동일한 값으로 설정하여 단일 축을 비활성화 할 수 있습니다.
 			그러면 수직 또는 수평 회전이 해당 값으로 고정됩니다.
-			
+
 		</p>
 
 		<h3>[property:Boolean enableZoom]</h3>
@@ -148,7 +143,7 @@ controls.keys = {
 	RIGHT: 39, // 오른쪽 화살표
 	BOTTOM: 40 // 아래쪽 화살표
 }
-			 </code> 
+			 </code>
 			 전체 키코드 목록은 [link:https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/keyCode this page] 를 참조하세요.
 		</p>
 
@@ -283,6 +278,11 @@ controls.touches = {
 			라디안 단위로 현재 수직 회전값을 가져옵니다.
 		</p>
 
+		<h3>[method:void listenToKeyEvents] ( [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			Adds key event listeners to the given DOM element. *window* is a recommended argument for using this method.
+		</p>
+
 		<h3>[method:null reset] ()</h3>
 		<p>
 			컨트롤이 마지막으로 호출된 [page:.saveState] 시점으로 돌리거나, 초기상태로 재설정합니다.

docs/examples/zh/controls/OrbitControls.html

@@ -113,11 +113,6 @@
 			请注意，如果该值被启用，你将必须在你的动画循环里调用[page:.update]()。
 		</p>
 
-		<h3>[property:Boolean enableKeys]</h3>
-		<p>
-			启用或禁用键盘控制。
-		</p>
-
 		<h3>[property:Boolean enablePan]</h3>
 		<p>
 			启用或禁用摄像机平移，默认为true。
@@ -288,6 +283,11 @@ controls.touches = {
 			获得当前的垂直旋转，单位为弧度。
 		</p>
 
+		<h3>[method:void listenToKeyEvents] ( [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			Adds key event listeners to the given DOM element. *window* is a recommended argument for using this method.
+		</p>
+
 		<h3>[method:null reset] ()</h3>
 		<p>
 			将控制器重置为上次调用[page:.saveState]时的状态，或者初始状态。

examples/js/controls/OrbitControls.js

@@ -62,9 +62,6 @@ THREE.OrbitControls = function ( object, domElement ) {
 	this.autoRotate = false;
 	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
 
-	// Set to false to disable use of the keys
-	this.enableKeys = true;
-
 	// The four arrow keys
 	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
 
@@ -79,6 +76,9 @@ THREE.OrbitControls = function ( object, domElement ) {
 	this.position0 = this.object.position.clone();
 	this.zoom0 = this.object.zoom;
 
+	// the target DOM element for key events
+	this._domElementKeyEvents = null;
+
 	//
 	// public methods
 	//
@@ -95,6 +95,13 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 	};
 
+	this.listenToKeyEvents = function ( domElement ) {
+
+		domElement.addEventListener( 'keydown', onKeyDown, false );
+		this._domElementKeyEvents = domElement;
+
+	};
+
 	this.saveState = function () {
 
 		scope.target0.copy( scope.target );
@@ -274,7 +281,12 @@ THREE.OrbitControls = function ( object, domElement ) {
 		scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove, false );
 		scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp, false );
 
-		scope.domElement.removeEventListener( 'keydown', onKeyDown, false );
+
+		if ( scope._domElementKeyEvents !== null ) {
+
+			scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown, false );
+
+		}
 
 		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
 
@@ -989,7 +1001,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 	function onKeyDown( event ) {
 
-		if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
+		if ( scope.enabled === false || scope.enablePan === false ) return;
 
 		handleKeyDown( event );
 
@@ -1169,8 +1181,6 @@ THREE.OrbitControls = function ( object, domElement ) {
 	scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
 	scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
 
-	scope.domElement.addEventListener( 'keydown', onKeyDown, false );
-
 	// force an update at start
 
 	this.update();

examples/jsm/controls/OrbitControls.d.ts

@@ -50,6 +50,8 @@ export class OrbitControls {
 
 	update(): boolean;
 
+	listenToKeyEvents( domElement: HTMLElement ): void;
+
 	saveState(): void;
 
 	reset(): void;

examples/jsm/controls/OrbitControls.js

@@ -72,9 +72,6 @@ var OrbitControls = function ( object, domElement ) {
 	this.autoRotate = false;
 	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
 
-	// Set to false to disable use of the keys
-	this.enableKeys = true;
-
 	// The four arrow keys
 	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
 
@@ -89,6 +86,9 @@ var OrbitControls = function ( object, domElement ) {
 	this.position0 = this.object.position.clone();
 	this.zoom0 = this.object.zoom;
 
+	// the target DOM element for key events
+	this._domElementKeyEvents = null;
+
 	//
 	// public methods
 	//
@@ -105,6 +105,13 @@ var OrbitControls = function ( object, domElement ) {
 
 	};
 
+	this.listenToKeyEvents = function ( domElement ) {
+
+		domElement.addEventListener( 'keydown', onKeyDown, false );
+		this._domElementKeyEvents = domElement;
+
+	};
+
 	this.saveState = function () {
 
 		scope.target0.copy( scope.target );
@@ -284,7 +291,12 @@ var OrbitControls = function ( object, domElement ) {
 		scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove, false );
 		scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp, false );
 
-		scope.domElement.removeEventListener( 'keydown', onKeyDown, false );
+
+		if ( scope._domElementKeyEvents !== null ) {
+
+			scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown, false );
+
+		}
 
 		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
 
@@ -999,7 +1011,7 @@ var OrbitControls = function ( object, domElement ) {
 
 	function onKeyDown( event ) {
 
-		if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
+		if ( scope.enabled === false || scope.enablePan === false ) return;
 
 		handleKeyDown( event );
 
@@ -1179,8 +1191,6 @@ var OrbitControls = function ( object, domElement ) {
 	scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
 	scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
 
-	scope.domElement.addEventListener( 'keydown', onKeyDown, false );
-
 	// force an update at start
 
 	this.update();

examples/misc_controls_orbit.html

@@ -51,6 +51,7 @@
 				// controls
 
 				controls = new OrbitControls( camera, renderer.domElement );
+				controls.listenToKeyEvents( window ); // optional
 
 				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)