Cannot add keyboard event listener on the same domElement as CameraControls

[yomotsu]

Cannot add keyboard event listener on the same domElement as CameraControls

[yomotsu]

Long story short:

1. canvas.setAttribute( 'tabindex', '0' );
2. canvas.focus();

then KeyboardEvent works.

[eviltik]

On my side, i'm using threejs InteractiveGroup with CameraControls.

Note that the InteractiveGroup is instanciated after CameraControls.

To make it work i found 2 tricks ( tests ) :

• in InteractiveGroup.js, comment the line event.stopPropagation() https://github.com/mrdoob/three.js/blob/01e4eaf0c17c5906a73628576fbe27609ac82618/examples/jsm/interactive/InteractiveGroup.js#L28

OR

• replace this._domElement.ownerDocument with this._domElement in theses 4 lines

  camera-controls/src/CameraControls.ts

  Line 550 in d63e9b8

  this._domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove, { passive: false } as AddEventListenerOptions );

[yomotsu]

Actually, that is not a bug at all.

Please read MDN first, or you can just use my keyboard event lib which is used in the example.

[dguayrobotiq]

@yomotsu Why do you say it is not a bug? When using OrbitControls instead of CameraControls, the code above works when binding keyboard event on canvas.