Three.js touch intersects on 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

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!