# How to add touch on PointerLockControls?

**URL:** https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846
**Category:** Questions
**Tags:** pointer-controls, touch-devices
**Created:** [May 16, 2018, 11:50am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846 "2018-05-16T11:50:26Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![AmjadKh94](https://avatars.discourse-cdn.com/v4/letter/a/c77e96/32.png) [@AmjadKh94](https://discourse.threejs.org/u/AmjadKh94)
#### Post date: [May 16, 2018, 11:50am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/1 "2018-05-16T11:50:26Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [May 16, 2018, 12:39pm UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/2 "2018-05-16T12:39:24Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)

---

<div class="post-metadata">

### Author: ![Jevon\_Mahoney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jevon_mahoney/32/11833_2.png) [@Jevon\_Mahoney](https://discourse.threejs.org/u/Jevon_Mahoney)
#### Post date: [June 23, 2020, 7:46am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/3 "2020-06-23T07:46:48Z")

</div>

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

> **[zerogramsjm/ThreeJS\_Pointerlockcontrols\_Mobile](https://github.com/zerogramsjm/ThreeJS_Pointerlockcontrols_Mobile)**
>
> Pointerlock controls JSM file ThreeJS config for mobile - zerogramsjm/ThreeJS\_Pointerlockcontrols\_Mobile

---

<div class="post-metadata">

### Author: ![Dev\_Valladares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dev_valladares/32/14988_2.png) [@Dev\_Valladares](https://discourse.threejs.org/u/Dev_Valladares)
#### Post date: [January 22, 2021, 6:34am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/4 "2021-01-22T06:34:30Z")

</div>

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? :))

---

<div class="post-metadata">

### Author: ![Jevon\_Mahoney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jevon_mahoney/32/11833_2.png) [@Jevon\_Mahoney](https://discourse.threejs.org/u/Jevon_Mahoney)
#### Post date: [January 22, 2021, 8:36am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/5 "2021-01-22T08:36:50Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Jevon\_Mahoney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jevon_mahoney/32/11833_2.png) [@Jevon\_Mahoney](https://discourse.threejs.org/u/Jevon_Mahoney)
#### Post date: [January 22, 2021, 9:13am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/6 "2021-01-22T09:13:57Z")

</div>

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

> **[zerogramsjm/ThreeJS\_Pointerlockcontrols\_Mobile](https://github.com/zerogramsjm/ThreeJS_Pointerlockcontrols_Mobile)**
>
> Pointerlock controls JSM file ThreeJS config for mobile

---

<div class="post-metadata">

### Author: ![Dev\_Valladares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dev_valladares/32/14988_2.png) [@Dev\_Valladares](https://discourse.threejs.org/u/Dev_Valladares)
#### Post date: [January 22, 2021, 5:08pm UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/7 "2021-01-22T17:08:41Z")

</div>

@Jevon_Mahoney This is great!! My intention was to recreate controls like this here [https://newdawn.digital/](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

---

<div class="post-metadata">

### Author: ![Jevon\_Mahoney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jevon_mahoney/32/11833_2.png) [@Jevon\_Mahoney](https://discourse.threejs.org/u/Jevon_Mahoney)
#### Post date: [January 23, 2021, 3:15pm UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/8 "2021-01-23T15:15:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![effor001](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/effor001/32/17169_2.png) [@effor001](https://discourse.threejs.org/u/effor001)
#### Post date: [March 19, 2021, 6:21am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/9 "2021-03-19T06:21:09Z")

</div>

@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!

---

<div class="post-metadata">

### Author: ![Jevon\_Mahoney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jevon_mahoney/32/11833_2.png) [@Jevon\_Mahoney](https://discourse.threejs.org/u/Jevon_Mahoney)
#### Post date: [March 19, 2021, 10:16am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/10 "2021-03-19T10:16:33Z")

</div>

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 😂

---

<div class="post-metadata">

### Author: ![effor001](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/effor001/32/17169_2.png) [@effor001](https://discourse.threejs.org/u/effor001)
#### Post date: [March 20, 2021, 7:59pm UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/11 "2021-03-20T19:59:44Z")

</div>

@ [Jevon\_Mahoney](https://discourse.threejs.org/u/Jevon_Mahoney)Thanks for replying!  
Yes, I made it work but mine is not at all sophisticated 😅

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](http://test1.key4x.com)  
CODE:[GitHub - KEY4d-LAB/crypto-art-town: CryptoArtTownギャラリーページ](https://github.com/KEY4d-LAB/crypto-art-town)

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

---

<div class="post-metadata">

### Author: ![exreplay](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exreplay/32/23028_2.png) [@exreplay](https://discourse.threejs.org/u/exreplay)
#### Post date: [December 23, 2021, 7:36am UTC](https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/12 "2021-12-23T07:36:48Z")

</div>

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](https://gist.github.com/exreplay/090323d2865dcf2df4b2d47c1daf20a3)
