How to add touch on PointerLockControls?

Questions
,
1

Can someone please help me adding touch ability to pointerlockcontrols so that i can use them on mobile browser ?

2

Pointer lock can only be used in combination with a mouse. It’s not possible to use it in context of touch input.

Read the following for more information: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

3

Hey, I’ve worked on a touch based system for the JSM Pointerlock controls for a project of my own recently.

Hope it can help

2 Likes
4

Hi, thank you so much for sharing!! While this seems to be working for rotating the camera around, it doesn’t seem to be working to actually move the camera around. Do you know what’s going wrong, or could you share the rest of your code by some chance? :))

5

Hey! Sure thing - the project this was developed from using a wholly different movement system using touchdown to move forward as oppose to WASD, to move the camera left and right what are you wanting as input?

6

@Dev_Valladares here’s an index based on the example pointerlockcontrols from mr doob - using touchdown & end to move forward, rotation is camera movement -

7

@Jevon_Mahoney This is great!! My intention was to recreate controls like this here https://newdawn.digital/ which works seamlessly both on desktop and mobile. Looks like it was made on Babylon.js
 I might attempt to use your code to try and get a similiar effect, although I have a feeling it might be beyond me. I’ll let you know if I manage to make any breakthroughs! Much appreciated

1 Like
8

@Dev_Valladares Rock and roll! Let me know if I can help with the lib needs at all and all the best of luck :slight_smile:

9

@Jevon_Mahoney Hi, I’m not sure if you are still updating the library but anyways, that is just great. I tried to implement it and found that while I stopped touching(finger off from screen) and resume touching, the last touched(touchend) position seem not to be preserved. I wonder if I could continue the camera position from the last touched position.
I mean, I want the movement like orbit control when using via mobile devices.
Any advice would be appreciated!

1 Like
10

Hey @effor001 aye the retention of last position is something I am still working on unfortunately! - if you want to jump into the source feel free, within the lib I started working on a “ontouchend” function to try to save and recalibrate the next touchstart/move to that x & y. I had no luck down this route but still think this may be a good way to go! As I said still working on it but if you’re jumping please let me know how it goes! This was a functionality that kept me up at night :joy:

11

@ Jevon_MahoneyThanks for replying!
Yes, I made it work but mine is not at all sophisticated :sweat_smile:

The main idea is;

-Get list of touches and list of euler, and push them into arrays on touchmove.
-Set rotation from these arrays.
-Offset delta values of euler and touches for recalibration from the point where the last move stopped on touchend.

Touch events(from touch start to touchend) themselves are quite like a loop so I just tried to use their nature.
If you are interested, please check my case here.
DEMO: test1.key4x.com
CODE:GitHub - KEY4d-LAB/crypto-art-town: CryptoArtTownă‚źăƒŁăƒ©ăƒȘăƒŒăƒšăƒŒă‚ž

I’m bit concerned about performance.
But Anyways, thanks for your hard work! They inspired me a lot!!

12

First of all thank you guys for your effort and the code you shared. I found another solution which works perfectly fine for my needs on iOS and maybe this can help you.

I got inspired by the example of @Jevon_Mahoney and thought why not use the same logic from the onMouseMove event but calculate the movementX and movementY from the touches by saving the last touch position.

You can find the the whole PointerLockControls class here ThreeJS PointerLockControls with touch support · GitHub