Implementing Mobile Controls into React Three Fiber

[timhc22]

I'm currently trying to create a desktop AND mobile experience using React Three Fiber, using this example as a boilerplate: https://codesandbox.io/s/vkgi6. For mobile I've managed to create some buttons which simulate pointerControls interactions for panning the camera.

The problem now, is simulating key presses (such as spacebar); I can't seem to add a ref to Keyboard Controls, and I've tried doing something like this: How to trigger keypress event in React.js and using ref.dispatchEvent connected to the container itself, but to no avail.

Any suggestions for how to simulate keypresses which get picked up by the Player component (such as Space for causing the player to jump)? Alternatively, anyone know of any great 'dual' joystick control examples for mobile, with one for moving and one for panning?

[danburonline]

Have you considered implementing custom buttons that can override key presses in your player component? For example, I have previously developed a mini-game using R3F, where I utilized a custom button named "jump" on mobile devices, invoking the respective function inside the player component. This approach can provide a more intuitive and user-friendly experience for mobile users while maintaining the desired functionality for desktop users. Let me know if you need any further clarification.

Ergo, make the function you pass to the player component generic rather than specific to keyboard events.

[timhc22]

Dude it works, can't believe I didn't think of that! (Now to refactor my whole app).

[danburonline]

I hope I could help 🤗

[paulocoutinhox]

Hi, do you have the example?