Orbit controls + Custom Joystick

I’m creating a little game where one can walk around on a platform. I’ve built it using a camera with orbit controls + arrow keys to walk the player object. The orbit controls are fixed to the player object.

On mobile I added a virtual joystick to do the walking. Everything works fine, except that I cannot use the joystick and rotate the orbit controls at the same time. The event listener on the joystick is limited to the dom element only, so i am able to trigger both events separately. But when I am tap-holding the joystick, I can’t look around with the orbit controls. They seem to be blocked by the first tap-hold on another element. Can someone give me a hint on how to get some kind of multitouch functionality for the orbit controls? (panning, zooming, … is all deactivated).

Here’s an image of the screen:

(If it’s not enough, i can also upload a video or demo code)

Thank you!

If i orbit-control first and then use the joystick, both are working as expected.

1 Like

What does your code look like? It all depends which DOM elements you set your event listeners to, and also, which one of the TouchEvent.touches object you’re looking at. You might need to differentiate between event.touches[0] and event.touches[1] if the Joystick is being used… or it could be something else entirely. We’d need to see your code.

I’m interested also with a basic example that solve that. Could you post a jsfiddle ?

@marquizzo @espace3d
Here’s an example of my “physics”: https://codepen.io/Vin-ni/full/gOWxEqM
Actually, in this demo, the multitouch more or less works. So maybe it’s some other event listener in my code, that prevents the dual interaction: steering and looking.

I still have another bug that is happing with that code: Sometimes, the perspective is glitching. Maybe someone has an idea on how to fix that or what is causing it?
Here a sample video:

Thanks a lot it help me :wink:

I think to fix the glitch of perspective you must limit the orbit to only what is forward the cube…

then how would you look back and go backwards? What settings did you put?

Only with the directionnal movement.

I do the same with an fps project and it is not limited (right that it dind’t work until your snippet)

So you don’t have this glitch? Would you be able to share some code?

Try with this code…i’m not in front of my computer…

actually in the example they are already limited as well. Were you experiencing the same glitch?


I believe that if the orbitcontrols is limited horizontaly, you don’t have the glitch effect.
see =>

      controls.minAzimuthAngle = - Math.PI/2; // radians
      controls.maxAzimuthAngle = Math.PI/4 // radians

1 Like