Attach camera-controls pointermove event listeners to window instead of element

[lucadalli]

When rotating a model with camera-controls enabled, I often find myself getting frustrated at the model's unresponsiveness when my pointer falls out of the element's bounds.

When I'm interacting with the model, after the initial pointerdown event, I become far less conscious of where my pointer is and more focused on the actual orientation of the model. I'd be rotating the model, until suddenly, my inputs are no longer recognized, only for me to realize that my pointer is outside the element. This breaks my "immersion" as I have to reset my pointer position back onto the model and resume the interaction.

I strongly believe this is an inferior user experience to the one offered by THREE's OrbitControls, which attaches move listeners to window and hence allows an initiated camera interaction to continue anywhere on the page until the pointer is released.

https://threejs.org/examples/#misc_controls_orbit

[lucadalli]

The only downside I can recognize is that applying the cursor: grabbing style becomes less elegant as it no longer can be scoped to the element itself. I think toggling a class on body which changes the cursor for all its children is bearable given the improved UX offered by the change.

body.__model-viewer-is-interacting * {
 cursor: grabbing !important;
 }

[elalish]

I appreciate the feedback and I think I agree. It sounds like you have a pretty clear idea of the right way to do this; would you be interested in contributing a PR?

[lucadalli]

Yes, I can look into it further. I created issue #2682 from this discussion. Your input would be greatly appreciated.

[elalish]

Thank you!