fix: don't call a hook in onChange for KeyboardControls

[will-wow]

Why

Passing an onChange callback to KeyboardControls triggers a Rules of Hooks error when a key is pressed.

See screenshot:

What

In src/web/KeyboardControls.tsx, the onChange callback tries to get the state of the pressed keys by calling api[2], which is a reference to useControls. It looks like that should be api[1], which is a reference to useControls.getState and can safely be called at keypress time.

So this PR fixes that, and adds an example of an onChange handler to the Storybook story to test that by changing the color of the Player when the user clicks Space.

See screenshot

Checklist

• Storybook entry added
• Ready to be merged

Also just wanted to say thanks for this library! This and R3F have made making 3D AR applications so much more pleasant 😄

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
drei	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 9, 2023 at 7:39PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3d12ed0:

Sandbox	Source
still-frost-5ezzok	Configuration
Ground reflections and video textures	Configuration
arc-x-pmndrs-colors	Configuration

[github-actions]

🎉 This PR is included in version 9.56.21 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀