Pointer Lock Controls and iPad

Questions
1

I have implemented PointerLockControls in my program by using the method described in the example “misc_controls_pointerlock”. This requires you to start the program by using the mouse to click in the center of the screen.

This works great on a PC, but almost everyone in my family uses an iPad. So they are unable to enjoy my programs.

I would like to make my program accessible to iPad users who do not need to use PointerLock. I have added touchscreen event listeners to my program for them. However, they cannot start the program because they do not have a mouse to click in the center of the screen. Is there a way to change the input required to allow them to get past the initial screen?

(I assume that having PointerLock active would not create problems for iPad users and that the PointerLock mouse event listeners would be simply ignored.)

Or perhaps I could create a front-end to the front-end, that would allow touchscreen users to push one button and mouse users would select another. Selecting the touchscreen option would populate the screen with touchscreen input buttons, etc.

Thanks!

2

That depends. If the API is supported and the mouse lock can’t be obtained, an error will be logged in the browser console:

THREE.PointerLockControls: Unable to use Pointer Lock API

If the API is not supported and you still try to lock the pointer, a runtime error will occur since requestPointerLock() is undefined.

I suggest you only use PointerLockControls on devices with mouse and keyboard. For touch devices, use an alternative controls implementation.

1 Like
3

Thanks.

Not having done this before, it there a best way to allow users to select which version they would like to use - touchscreen or PC?

For example, would it be best/feasible to create a normal html webpage that contains a couple of boxes where the user can select the version they want to run?

If so, would it also be possible to use that webpage to do other things like select file locations and to pass those values on to the selected program?

I have searched, but haven’t found a discussion of this online.

EDIT:
It looks like I can use local.storage to pass text variables between webpages. If so, that should be enough to get me started.

4

@phil_crowther

Can you not use…

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 Use controls1 for mobile/ipad
}

Else{ controls = pointer lock controls}

?

Safe

1 Like
5

Yes, that might work, with one small modification.

After giving the matter some thought, I realized that pointerlock was not the only thing I would want to change. For example, if someone wanted to use touchscreen and not the keyboard, I would need to add on-screen buttons to perform various keyboard functions. And since there are some computers that can be used either way, there are cases where I would want to give the user the option to choose which version they would like to use.

However, where there is no such option, your solution could be used to direct users to the correct version of the program.

Thanks!.

1 Like
6

That makes sense!

Could you display a little dom element that shows and hides some sort of div joystick setup for cases where if touchscreen && mouse input is true? then you could simply add touch event listeners to the joystick element and or switch the control type if joystick is displayed or not