Get Coordinates Where Touched on Mobile

Questions
1

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

I’m using the code:

function onMobileTouchStart(event){
    event.preventDefault();
    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.

2

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.

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

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

4

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

5

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

6

Solved.

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

1 Like