OrbitControls/TrackballControls: Replace event.keyCode with event.code. (#21409)

* OrbitControls: replace event.keyCode with event.code

issue: -

**Description**

The deprecated **`KeyboardEvent.keyCode`** read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key. 

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode



so...

```diff
// The four arrow keys
- this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+ this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };


function handleKeyDown( event ) {

-		switch ( event.keyCode )
-		switch ( event.code )
		
}
```

* Update OrbitControls.js

* Update TrackballControls.js

* Update TrackballControls.js

* Update webgl_shading_physical.html

* Update misc_controls_trackball.html

* Update OrbitControls.html

* Update TrackballControls.html

* Update TrackballControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update TrackballControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Update OrbitControls.html

* Docs: Modify the default keys value

* Docs: Modify the default keys value

* Docs: Modify the default keys value

docs/examples/en/controls/OrbitControls.html

@@ -143,13 +143,12 @@
 			This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.
 			<code>
 controls.keys = {
-	LEFT: 37, //left arrow
-	UP: 38, // up arrow
-	RIGHT: 39, // right arrow
-	BOTTOM: 40 // down arrow
+	LEFT: 'ArrowLeft', //left arrow
+	UP: 'ArrowUp', // up arrow
+	RIGHT: 'ArrowRight', // right arrow
+	BOTTOM: 'ArrowDown' // down arrow
 }
-			 </code> See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page] for a full
-			list of keycodes.
+			 </code> See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code KeyboardEvent.code] for a full list of keycodes.
 		</p>
 
 		<h3>[property:Float maxAzimuthAngle]</h3>

docs/examples/en/controls/TrackballControls.html

@@ -80,7 +80,7 @@
 				<li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
 				<li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
 			</ul>
-			Default is *65, 83, 68* which represents A, S, D.
+			Default is *KeyA, KeyS, KeyD* which represents A, S, D.
 		</p>
 
 		<h3>[property:Number maxDistance]</h3>

docs/examples/ko/controls/OrbitControls.html

@@ -138,13 +138,13 @@
 			해당 객체는 카메라 패닝을 제어하기위한 키 코드에 대한 참조를 포함합니다. 기본값은 4 개의 화살표 키입니다.
 			<code>
 controls.keys = {
-	LEFT: 37, // 왼쪽 화살표
-	UP: 38, // 위쪽 화살표
-	RIGHT: 39, // 오른쪽 화살표
-	BOTTOM: 40 // 아래쪽 화살표
+	LEFT: 'ArrowLeft', // 왼쪽 화살표
+	UP: 'ArrowUp', // 위쪽 화살표
+	RIGHT: 'ArrowRight', // 오른쪽 화살표
+	BOTTOM: 'ArrowDown' // 아래쪽 화살표
 }
 			 </code>
-			 전체 키코드 목록은 [link:https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/keyCode this page] 를 참조하세요.
+			 전체 키코드 목록은 [link:https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/code KeyboardEvent.code] 를 참조하세요.
 		</p>
 
 		<h3>[property:Float maxAzimuthAngle]</h3>

docs/examples/ko/controls/TrackballControls.html

@@ -79,7 +79,7 @@
 				<li>두 번째로 정의 된 키를 누르면 모든 마우스 상호 작용 (왼쪽, 가운데, 오른쪽)이 확대 / 축소를 수행합니다.</li>
 				<li>세 번째로 정의 된 키를 누르면 모든 마우스 상호 작용 (왼쪽, 가운데, 오른쪽)이 패닝을 수행합니다.</li>
 			</ul>
-			기본값은 A, S, D를 나타내는 * 65, 83, 68 *입니다.
+			기본값은 A, S, D를 나타내는 *KeyA, KeyS, KeyD* 입니다.
 		</p>
 
 		<h3>[property:Number maxDistance]</h3>

docs/examples/zh/controls/OrbitControls.html

@@ -141,12 +141,12 @@
 			这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。
 			<code>
 controls.keys = {
-	LEFT: 37, //left arrow
-	UP: 38, // up arrow
-	RIGHT: 39, // right arrow
-	BOTTOM: 40 // down arrow
+	LEFT: 'ArrowLeft', //left arrow
+	UP: 'ArrowUp', // up arrow
+	RIGHT: 'ArrowRight', // right arrow
+	BOTTOM: 'ArrowDown' // down arrow
 }
-			 </code>请参阅[link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page]来查看所有按键的代码列表。
+			 </code> 请参阅[link:https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/code KeyboardEvent.code]来查看所有按键的代码列表。
 		</p>
 
 		<h3>[property:Float maxAzimuthAngle]</h3>

docs/examples/zh/controls/TrackballControls.html

@@ -77,9 +77,9 @@
 			<ul>
 				<li>当定义的第一个按键按下后，所有的鼠标交互（左/中/右键）表现为环绕。</li>
 				<li>当定义的第二个按键按下后，所有的鼠标交互（左/中/右键）表现为缩放。</li>
-				<li>当定义的第一个按键按下后，所有的鼠标交互（左/中/右键）表现为平移。</li>
+				<li>当定义的第三个按键按下后，所有的鼠标交互（左/中/右键）表现为平移。</li>
 			</ul>
-			默认为*65, 83, 68*，分别表示A, S, D。
+			默认为*KeyA, KeyS, KeyD*，分别表示A, S, D。
 		</p>
 
 		<h3>[property:Number maxDistance]</h3>

examples/js/controls/OrbitControls.js

@@ -63,7 +63,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 	this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
 
 	// The four arrow keys
-	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+	this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
 
 	// Mouse buttons
 	this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };
@@ -586,7 +586,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 		var needsUpdate = false;
 
-		switch ( event.keyCode ) {
+		switch ( event.code ) {
 
 			case scope.keys.UP:
 				pan( 0, scope.keyPanSpeed );

examples/js/controls/TrackballControls.js

@@ -29,7 +29,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 	this.minDistance = 0;
 	this.maxDistance = Infinity;
 
-	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
+	this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ];
 
 	this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };
 
@@ -454,15 +454,15 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 			return;
 
-		} else if ( event.keyCode === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
+		} else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
 
 			_keyState = STATE.ROTATE;
 
-		} else if ( event.keyCode === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
+		} else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
 
 			_keyState = STATE.ZOOM;
 
-		} else if ( event.keyCode === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
+		} else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
 
 			_keyState = STATE.PAN;
 

examples/jsm/controls/OrbitControls.js

@@ -73,7 +73,7 @@ var OrbitControls = function ( object, domElement ) {
 	this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
 
 	// The four arrow keys
-	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+	this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
 
 	// Mouse buttons
 	this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
@@ -596,7 +596,7 @@ var OrbitControls = function ( object, domElement ) {
 
 		var needsUpdate = false;
 
-		switch ( event.keyCode ) {
+		switch ( event.code ) {
 
 			case scope.keys.UP:
 				pan( 0, scope.keyPanSpeed );

examples/jsm/controls/TrackballControls.js

@@ -37,7 +37,7 @@ var TrackballControls = function ( object, domElement ) {
 	this.minDistance = 0;
 	this.maxDistance = Infinity;
 
-	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
+	this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ];
 
 	this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
 
@@ -462,15 +462,15 @@ var TrackballControls = function ( object, domElement ) {
 
 			return;
 
-		} else if ( event.keyCode === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
+		} else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
 
 			_keyState = STATE.ROTATE;
 
-		} else if ( event.keyCode === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
+		} else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
 
 			_keyState = STATE.ZOOM;
 
-		} else if ( event.keyCode === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
+		} else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
 
 			_keyState = STATE.PAN;
 

examples/misc_controls_trackball.html

@@ -123,7 +123,7 @@
 				controls.zoomSpeed = 1.2;
 				controls.panSpeed = 0.8;
 
-				controls.keys = [ 65, 83, 68 ];
+				controls.keys = [ 'KeyA', 'KeyS', 'KeyD' ];
 
 			}
 

examples/webgl_shading_physical.html

@@ -254,7 +254,7 @@
 
 				controls.staticMoving = true;
 
-				controls.keys = [ 65, 83, 68 ];
+				controls.keys = [ 'KeyA', 'KeyS', 'KeyD' ];
 
 
 				// STATS