Multi-Touch: How do I control OrbitControl and the movement of the camera at the same time?

Questions
, , ,
1

So I’m currently trying to have the user be able to rotate the camera (by swiping), and move around (with a joystick/wasd HTML buttons) at the same time.

Right now, I have something very similar to this: https://codepen.io/ogames/pen/rNmYpdo (stolen from espace3d on this thread

Basically, some kind of HTML controls overlaid on top of the threejs canvas.

The issue here is that you cannot control the movement of the camera AND drag to change the rotation of the camera at the same time, and the behavior when this happens is also visible in the codepen above on a hone.

When you try to swipe (rotate), then touch the joystick, the camera jumps, and it’s quite obvious that the multi-touch is not being supported here. Same when a finger is on the joystick and then you try to turn the camera.

Honestlty, I’m not even sure where to begin to solve this issue. Do I need to just re-implement the touch menu inside the three.js canvas? Could I ask your experiences with the extent of three.js multi-touch support?

2

The codepen you linked seems to handle both joystick and mouse… can you just copy it?

3

I’m super confused… it does not seem to handle both joystick and mouse at the same time? As in, I cannot operate the joystick and mouse at the same time.

4

I meant that i didn’t see the snapping behavior when I clicked on joystick, then click and drag on the scene itself. It behaved like I’d expect it to.