- It requires a trackpad or “trackpad-like” surface that has two-axis motion, like Apple trackpads or the Magic Mouse. Fortunately, the Magic Mouse can be bought as an accessory and runs on Windows too.
- It requires a browser that supports two-dimensional mouse-scroll events (Chrome, Safari, Firefox. IE has “onmousewheel”, but it’s only vertical), and supports WebGL, which currently just leaves Chrome and Firefox.
Anyway, the trick is that you can cancel mouse-scroll events, resulting in no motion of the cursor or the page, all the while getting (technology permitting) two-dimensional motions. For the demo, I built on the absolutely fantastic CopperLicht WebGL engine. The gist is that CL lets you give the cameras a custom mouse tracker, so you can essentially implement “virtual coordinates” based on, in this case, scroll offsets. That code ends up looking like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
The actual code is up on GitHub.
The fact that this all requires specific tech is unfortunate, but not unheard of in gaming (racing wheels, joysticks), and every MacBook has it built-in. But here’s hoping the browser vendors hurry up and get Mouse Lock implemented and make all of this irrelevant.