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?

score 2 · Accepted Answer · edited Feb 18 '19 at 09:34

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!

edited Feb 18 '19 at 09:34

Marius

19
1
9

answered Aug 25 '14 at 07:36

beek

3,522
8
33
86

score 2 · Answer 2 · edited Jul 24 '18 at 14:59

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.

score 0 · Answer 3 · answered Mar 24 '21 at 11:36

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;

Three.js touch intersects on mobile

3 Answers3