OrbitControls/TrackballControls: Replace event.keyCode with event.code. by puxiao · Pull Request #21409 · mrdoob/three.js

puxiao · 2021-03-04T11:10:09Z

Related issue: Related #21056.

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...

// 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 )
		
}

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 ) } ```

Mugen87 · 2021-03-04T11:18:17Z

Please always modify the code in example/js and then generate the modules by executing node utils/modularize.js from the project's root directory.

Besides, it would be great if you change TrackballControls, too.

Sidenote: KeyboardEvent.code does not work in IE.

puxiao · 2021-03-04T11:35:01Z

@Mugen87 OK, KeyboardEvent.key work in IE.

Mugen87 · 2021-03-04T11:37:02Z

I don't think it's necessary to honor IE anymore. I've just noted it for clarification reasons.

puxiao · 2021-03-04T12:13:37Z

@Mugen87 How to modify OrbitControls.d.ts and TrackballControls.d.ts ?

OrbitControls.d.ts

-	keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
+	keys: { LEFT: string; UP: string; RIGHT: string; BOTTOM: string; };

TrackballControls.d.ts

-	keys: number[];
+	keys: string[];

Mugen87 · 2021-03-04T12:28:14Z

https://raw.githack.com/puxiao/three.js/patch-1/examples/index.html

Two examples configure controls.keys which do not work anymore with this change. You have to change webgl_shading_physical and misc_controls_trackball.

Mugen87 · 2021-03-04T12:29:48Z

It's also necessary to update the documentation pages:

https://threejs.org/docs/index.html#examples/en/controls/OrbitControls.keys
https://threejs.org/docs/index.html#examples/en/controls/TrackballControls.keys
https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls.keys
https://threejs.org/docs/index.html#examples/zh/controls/TrackballControls.keys

docs/examples/en/controls/OrbitControls.html

docs/examples/en/controls/TrackballControls.html

puxiao · 2021-03-04T14:32:30Z

@Mugen87
Sorry, I'm just a rookie, I forgot to write custom commit message.
my commits are all "Update xxxx..."

Mugen87

Looks good!

Mugen87 · 2021-03-04T14:33:39Z

Don't worry about the commits. @mrdoob can squash/merge so the commits are all combined into a single one.

mrdoob · 2021-03-04T15:30:00Z

examples/js/controls/TrackballControls.js

 	this.maxDistance = Infinity;

-	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
+	this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ];


How does this change affect french, ... keyboards?

see #21056 (comment)

mrdoob · 2021-03-30T19:37:46Z

Thanks!

Brings three-stdlib up to date with three: mrdoob/three.js#21409

Update OrbitControls.js

59fc302

puxiao added 2 commits March 4, 2021 20:16

Update TrackballControls.js

8c51bc8

Update TrackballControls.js

7af2fbb

puxiao added 8 commits March 4, 2021 20:40

Update webgl_shading_physical.html

b48126a

Update misc_controls_trackball.html

4a9910e

Update OrbitControls.html

5b905c9

Update TrackballControls.html

b88ffda

Update TrackballControls.html

2b237f8

Update OrbitControls.html

b775895

Update OrbitControls.html

72036c4

Update OrbitControls.html

e87c661

Mugen87 reviewed Mar 4, 2021

View reviewed changes

docs/examples/en/controls/OrbitControls.html Outdated Show resolved Hide resolved

puxiao added 9 commits March 4, 2021 21:41

Update OrbitControls.html

7235660

Update OrbitControls.html

ece3477

Update OrbitControls.html

1570696

Update OrbitControls.html

8311ba5

Update OrbitControls.html

1c465d1

Update TrackballControls.html

3abc833

Update OrbitControls.html

cc517ab

Update OrbitControls.html

c951659

Update OrbitControls.html

fd035b1

Mugen87 reviewed Mar 4, 2021

View reviewed changes

docs/examples/en/controls/TrackballControls.html Outdated Show resolved Hide resolved

Docs: Modify the default keys value

b394b6c

puxiao added 2 commits March 4, 2021 22:23

Docs: Modify the default keys value

0316eb1

Docs: Modify the default keys value

5457c45

Mugen87 approved these changes Mar 4, 2021

View reviewed changes

Mugen87 changed the title ~~OrbitControls: replace event.keyCode with event.code~~ OrbitControls/TrackballControls: Replace event.keyCode with event.code. Mar 4, 2021

mrdoob added this to the r127 milestone Mar 4, 2021

mrdoob reviewed Mar 4, 2021

View reviewed changes

mrdoob merged commit 6f11651 into mrdoob:dev Mar 30, 2021

puxiao deleted the patch-1 branch March 31, 2021 02:26

haywirez added a commit to haywirez/three-stdlib that referenced this pull request May 11, 2021

chore: remove deprecated keyCode in controls

796888a

Brings three-stdlib up to date with three: mrdoob/three.js#21409

haywirez mentioned this pull request May 11, 2021

chore: remove deprecated keyCode in controls pmndrs/three-stdlib#59

Merged

3 tasks

joshuaellis pushed a commit to pmndrs/three-stdlib that referenced this pull request May 11, 2021

fix: remove deprecated keyCode in controls (#59)

cf15c71

Brings three-stdlib up to date with three: mrdoob/three.js#21409

Mercury21th000 pushed a commit to Mercury21th000/three-stdlib that referenced this pull request Nov 17, 2024

fix: remove deprecated keyCode in controls (#59)

37303bf

Brings three-stdlib up to date with three: mrdoob/three.js#21409

Uh oh!

Conversation

puxiao commented Mar 4, 2021 • edited by Mugen87 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mugen87 commented Mar 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

puxiao commented Mar 4, 2021

Uh oh!

Mugen87 commented Mar 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

puxiao commented Mar 4, 2021

Uh oh!

Mugen87 commented Mar 4, 2021

Uh oh!

Mugen87 commented Mar 4, 2021

Uh oh!

Uh oh!

Uh oh!

puxiao commented Mar 4, 2021

Uh oh!

Mugen87 left a comment

Choose a reason for hiding this comment

Uh oh!

Mugen87 commented Mar 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrdoob Mar 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mugen87 Mar 4, 2021

Choose a reason for hiding this comment

Uh oh!

mrdoob commented Mar 30, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

puxiao commented Mar 4, 2021 •

edited by Mugen87

Loading

Mugen87 commented Mar 4, 2021 •

edited

Loading

Mugen87 commented Mar 4, 2021 •

edited

Loading

Mugen87 commented Mar 4, 2021 •

edited

Loading

mrdoob Mar 4, 2021 •

edited

Loading