Keyboard controls

[clochardM33]

Hi,
Today's question is about keyboard control.
Is there any chance you can extend the keyboard interaction to include panning when the shift/ctrl/meta key is pressed (so that you have both mouse and keyboard controls)? The models I'm involved with are very CAD-ish and lend themselves to having meaning in orthogonal views. So it would be a bonus to be able move with the keyboard in a single axis which is a nightmare with a mouse. I can see the keycodes lurking at the bottom of SmoothControls.ts , just waiting to be extended.

Also I've found that you have to click into the model-viewer element for the keyboard to respond (such as immediately after the model loads). Is this just a matter of having to give focus to the element?
And of course the next question is... is there are way to "give focus" programatically?
Apart from straight after loading I have an arrangement with a set of buttons that swicth to specific view (ie hotspots without the hotspots). To use the keyboard from this point I have to click into the model which, of course, shifts the camera position by some amount. Gotcha!

[samaneh-kazemi]

Hi @clochardM33, about your first question, PRs are welcomed.
Adding @elalish for the second question

[clochardM33]

Hi,
It's not the forward focus, that is fine, but I've found the explanation
Firstly I was asking for a daft thing. this[$userInputElement].focus(); is just fine and it isn't what I should have been asking about. The notion of giving focus to the element is meaningless in the way I was thinking about it because it can't cope with multiple instances of the element (and it isn't a WinForm app). So forget that.

I should have been asking why does the camera view move so much when you click on an empty part of the scene. Specifically that's what it does in my scenes and isn't what it does in your example scenes (spoiler alert: we are going to end up at enable-pan).
The question about .focus was a way to get around this change of view that I hadn't spotted was new behaviour.

The recent introduction of enable-pan adds one extra step over the example js that used to be in the example on panning page; it moves the camera target onClick. This is actually really nice when you click on something that doesn't return a null hit, in fact its one of those features that you don't even notice it's so seamless. However when you click on an empty part of the scene (you know whats coming next) there is the little tidy up routine at lines 644 to 648 in SmoothControls.ts that repositions the camera to somewhere other than where you just clicked and for good measure it changes the orbit and radius. And this means when I click off my model to give focus to the viewer so that I can use the keys to spin I get into a world of pain as the view has just changed on me.

By way of sanity checking this I've commented out the lines in the unminified version and loaded it locally (as building it is way beyond me) and it's the best of both worlds: Panning - check, centre on the bit of the model I've clicked on - check, clicking on empty part of scene does nothing at all and doesn't change a thing ever - check.

I don't know if this is a bug report, observation or PR? Happy to leave that to you for guidance.

[elalish]

Good sleuthing, I think you're on the right track. It's a little hard to help without having a link to your page. I'm not quite sure the distinction between the "model" and the "viewer" regarding focus. It sounds like you have some UI that you want to click on, but it's causing an errant tap event in MV? Maybe something has pointerevents: none that shouldn't? A screen recording would also help.

[clochardM33]

Yeah, that could have been a lot clearer.
In the message above viewer is the html model-viewer element and model is the glb file (specifically the meshes and not the back ground - the bits that you can click on).
You are exactly right that I have some UI element (buttons) inside model-viewer element. Clicking on these means that the keyboard controls are not active. The pointerevents: none route is way too sophisticated. It's much simpler than that.
I've tried to explain in the attached html (which is pretending to be a txt file) and 2 video clips.
The (txt) file is just the Astronaut, but zoom into something, press the button that is inside and then you can't use the keys again without changing the view. And that's all there is to it.

I worked out how to build model-viewer and so the videos are of one of our models with your distribution (which is kind of the same as the Astronaut) (Pt 1) and with our dev changes (Pt 2).

Issue_3484.txt

MV.Issue.3484.pt.1.mp4

MV.Issue.3484.pt.2.mp4

[elalish]

Thanks for the videos, it's very clear now. I would recommend calling mv.focus() in your button's click event handler. However, it looks like you found your own solution too - a change to MV itself? You're welcome to open a PR for discussion if you think it's a good general solution.

[clochardM33]

For reasons unexplained my attempt at mv.focus() got me no where.
You are right though (again) that a change to MV is a better solution for me. It also has the advantage over mv.focus that it protects against errant 'clicking about'.

I just hung this in the click event handler:
function giveFocus(){
const mv = document.querySelector("model-viewer");
console.log('In giveFocus')
mv.focus();
}