Hello, I have a question about getting mouse coordinates on mobile.
I’m using the code:
mouse.x = ( event.targetTouches.pageX / window.innerWidth) * 2 - 1;
mouse.y = -( event.targetTouches.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
The usage of
getBoundingClientRect() will ensure the mouse coordinates are correct even when using no fullscreen canvas.
event = event.changedTouches;
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?
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?
meta tag should not include ‘;’. I removed it and it working fine.