PointerLockControls for mobiles / touchscreens

Resources
,
1

Hi,

I’ve put together a version of PointerLockControls.js that works on mobile and touchscreen devices.

A few years ago, I came across an implementation that adapted PointerLockControls for touchscreens witch I was using. Since then, PointerLockControls has been completely rewritten (for the best) but that older touchscreen version is no longer compatible.

I wanted to keep the benefits of the updated pointerLockControls while making my projects available on mobile devices, so I adapted the new version for touchscreens

Because touchscreens don’t have a mouse pointer, this isn’t a true pointer lock implementation. Instead, it recreates the same experience and allows users to move around in first-person mode using touch input.

If you’d like to test it, replace pointerLockControls.js in jsm/controls/ with this version.

EDIT :
It tests for touchscreen and the pointerSpeed property affects the speed at which touch can rotate the camera.

It’s still a work in progress. For now it is FORCED to act as a mobile device, which means it behaves like a touchscreen device even when running on a desktop computer.
One thing I’m still trying to figure out is the most appropriate way to detect touch devices. Touchscreen devices aren’t limited to iOS and Android, so ideally the solution would work across any platform with touchscreen capabilities.
If you want to use standard Pointer Lock controls on desktop and touchscreen controls on mobile, you can set the bool on line 8 to false:
I’d also like to add support for the pointerSpeed property so it affects touchscreen controls as well.

Let me know what you think. :grin:

1 Like
2

Can you simply import the module directly from your GitHub using something like this?

import {"PointerLockControls" from 
https://github.com/ThFrAng/Three.js-PointerLockControls-mobile/PointerLockControls.js
3

Your browser probably won’t let you do this for security reasons. CDN links work but in most cases github won’t. Even for CDN links, the best practise is to put them in your import map.

For the PointerLockControls you can either put in the jsm/controls/ folder of your three project or some where else in your project and import it :
import {PointerLockControls} from './pathtothefile';

4

Actually, I have put all of my modules on GitHub. This allows me to run and test my programs locally before saving them to GitHub. The first time I load a program Chrome complains about various things, including CORs, but the program runs fine. The second time I load the program, the complaints are gone.

Like you, I have a modified version of PointgerLockControls. Mine gives raw X,Y mouse changes and is part of my controls module which is located in my jsm directory on my GitHub page. I use it in all of my flight demos.

You might give that a try. At the least, you could offer that as an alternative means of accessing your module without any guarantees as to whether than will work.

In any case, thanks for creating this module. Apple is starting to work better with three.js, especially with renderGPU. So this will be useful.

5

That’s great to experiment with custom controls ! Always a good opportunity to learn :grin:

1 Like