OrbitControls key controls doesn't work

[TiagoCavalcante]

• three version: 137.5 & 138.3
• @react-three/fiber version: 7.0.26
• @react-three/drei version: 8.12.1
• node version: 14.19.0 & v16.14.0
• npm (or yarn) version: 7.19.1 & 8.3.1

Problem description:

ObitControls with the keyboard is not working. This is the same issue as drei#186, but now it isn't on three.js side, it is on react-three side.

Relevant code:

<Canvas>
  <OrbitControls listenToKeyEvents={window} />
</Canvas>

Suggested solution:

I haven't found any PR to three-stdlib doing the same three.js#21054, so maybe the bug is there, but I'm not sure.

I was going to add this issue to the drei repository, but then I find that it is importing the OrbitControls from here, and investigating it, everything seems right from drei/fiber side. https://github.com/pmndrs/drei/blob/master/src/core/OrbitControls.tsx#L5

[servinlp]

The method listenToKeyEvents is already added to three-stdlib here.

In a seperate issue I also discussed this (here) but as discussed it is a method and thus should probably be enabled in a useEffect.

[CodyJasonBennett]

This is intentional behavior.

I just added a helper prop keyEvents to Drei in https://github.com/pmndrs/drei/pull/1472 which will give you the desired behavior, as would calling the method in an effect like above.

<OrbitControls keyEvents ={boolean | HTMLElement} />