Three.js - Raycaster doesn't work properly on Ipad - ipad

Question

i had some issues with Raycaster when i tested my code on mobile device. I realised the same problem appears on the official examples on threejs.org when you activate tactile touch( ex: https://threejs.org/examples/?q=inter#webgl_interactive_cubes ).
Is there an alternative to Raycaster to interact with objects in threejs ?
I am using Firefox 58.0.2 (64 bits) to test my three.js project and to simulate tactile touch.
Thanks in advance

Answer 1

Thanks for the response,
In my example, i had to drag a panorama and interact with objects inside the panorama.
Here is the event listeners that works perfectly for me, if it can help others
function onDocumentTouchStart( event ) {
console.log("TouchStart")
event.preventDefault();
event.clientX = event.touches[0].pageX;
event.clientY = event.touches[0].pageY;
onDocumentMouseDown( event );
}
function onDocumentTouchMove( event ) {
console.log("TouchMove")
if ( event.touches.length == 1 ) {
event.preventDefault();
lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting === true ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 && intersects[0].object.name.includes("sphere")) {
INTERSECTED = intersects[0].object;
//some code
isUserInteracting = true
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}

Answer 2

Is there an alternative to Raycaster to interact with objects in threejs ?
Raycaster does not add event listeners, that's application level code.
Many three.js examples only support mouse interaction. If you want to support touch devices, implement event listeners like touchstart and use the event information in order to perform a raycast.