Get Coordinates Where Touched on Mobile

Hello, I have a question about getting mouse coordinates on mobile.

I’m using the code:

function onMobileTouchStart(event){
    mouse.x = ( event.targetTouches[0].pageX / window.innerWidth) * 2 - 1;
    mouse.y = -( event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;


document.addEventListener('touchstart', onMobileTouchStart, false);

The problem is, mouse.x seems fine, but mouse.y I need to click more below from the object.

         O    // the object

         x   // The actual position where I must touch to click the object.

How can I get the actual coordinates of touching on mobile?

Thank you for your help.

I recommend you use the following approach from THREE.DragControls:

The usage of getBoundingClientRect() will ensure the mouse coordinates are correct even when using no fullscreen canvas.

event = event.changedTouches[0];
var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = - ( ( event.clientY - / rect.height) * 2 + 1;

Same result… Nothing changed… Is it relationed with meta viewport tag?

Um, I can’t image that. Can you demonstrate the issue with a live example?

I tried to create a live example, but it is really difficult to do.

so I attatch the mp4 link, will it help to explain?

the problem.mp4


meta tag should not include ‘;’. I removed it and it working fine.

1 Like