Keyboard inputs for typed words or numbers

Questions
1

I have a scene that I’d like to be reactive to certain keyboard inputs. I attempted using Drei’s Keyboard controls, which works well when I need it to respond to a single key press. But when i want it to work for a real typed input, things get a little chunky to code for. For exmaple I assume I’d have to add a key listener to each key and then catch them and append to a string in my model, is that correct:

const map = useMemo<KeyboardControlsEntry<Controls>[]>(()=>[
    { name: Controls.a, keys: ['KeyA'] },
    { name: Controls.b, keys: ['KeyB'] },
    { name: Controls.c, keys: ['KeyC'] },
    ...
  ], [])

That cannot be right? Is there a way I could do this or am I overlooking something.

To make things more clear, what I want to do is type a word on my keyboard and have 3D shapes dinamically appear as I type. Or type numbers and change the number of objects in the scene accordingly.

Thank you in advance!!

2

Trying to bring this back to life in case anyone has insight.

3

You can simply use keyboard event such as keydown or keypress, get an event.key property and use it for further manipulations in your scene.
For adding shapes as you type, you can store meshes in the some object with a corresponding properties, i.e shapes.a, shapes.b… And when key pressed

const shape = shapes[event.key];
if (shape) parentObject.add(shape.clone());

//change the number of objects:
const number = +event.key; //if not a digit pressed will NaN
if (number) {
// set number of objects
}
1 Like
4

I can’t imagine what you need exactly, but if it’s anywhere close to a real input it exists GitHub - pmndrs/uikit: 🎨 user interfaces for react-three-fiber

1 Like
5

Thanks for the suggestion. This does seem a bit simpler than having to specify listeners for each of the 26 keys.Though I suppose I’d still have manually to append them to a string as my input. My case is typing full words, such as cat, house, elephant and have 3D shapes show up corresponding to those, not exactly to the letters. Either way, thanks for the help

6

Thanks for the suggestion!

7

I think it would make sense to use a standard input field for this. And on input event you can get the input.value and and add the corresponding object.