Three.js touch intersects on mobile - mobile

Question

I'e seen this problem mentioned here, however this solution (e.touches[0].pageX and e.touches[0].pageY (instead of e.clientX and e.clientY) isn't working for me.
The hotspots are being selected if you touch them about 10 times, and luckily hit the magic spot, or sometimes if you hit somewhere randomly nearby they're hit, otherwise nothing.
My code:
mouse.x = ( event.touches[0].pageX / window.innerWidth ) ;
mouse.y = - ( event.touches[0].pageX / window.innerHeight );
// This is the mouse clicks that do work
//mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
//mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = ray.intersectObjects( targetList, true );
if ( intersects.length > 0)
hotspotClick(intersects[ 0 ].object);
EDIT
I'm making a bit of progress with this
mouse.x = ( event.touches[0].pageX / window.innerWidth ) * 0.1;
mouse.y = ( event.touches[0].pageY / window.innerHeight ) * 0.1;
However it seems to either be clicking anywhere near the mesh activates it, or you have to press in a certain spot somewhere in the middle of it. So I assume that multiplier is out.
X seems to be OK, Y seems to be the problem.
Can anyone help?

Answer 1

I have tested it on an iPad with both Chrome and Safari and on Android with Chrome.
document.body.appendChild(renderer.domElement);
document.addEventListener('touchend', onDocumentTouchEnd, false);
function onDocumentTouchEnd(event) {
event.preventDefault();
mouse.x = (event.changedTouches[0].clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.changedTouches[0].clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(yourObject3D);
}
It started to work well after appending renderer.domElement.
Before I was using event.Touches with mixed results.

Answer 2

This worked
mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 +
1;
window.innerwidth has to be window.innerWidth!

Answer 3

Use below code to get correct intersects
event.preventDefault();
var rect = Canvas_Instance.getBoundingClientRect();
mouse.x = + ( (event.targetTouches[ 0 ].pageX - rect.left) / rect.width ) * 2 - 1;
mouse.y = - ( (event.targetTouches[ 0 ].pageY - rect.top) / rect.height ) * 2 + 1;