Raycast mouse X and Y co-ordinates problem in mobile landscape mode

Questions
,
1

Hi,

I am facing raycast issue when the web application runs on landscape mode. Ray direction is incorrect.

mouse.x = ( e.touches[0].pageX  / window.innerWidth ) * 2 - 1;
mouse.y = - ( e.touches[0].pageY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera);

Also tried the below methods,

  1. mouse.x= ((e.touches[0].clientX - canvas.offsetLeft)/canvas.clientWidth) * 2 - 1;
    mouse.y=-((e.touches[0].clientY - canvas.offsetTop)/canvas.clientHeight) * 2 + 1;

  2. var rect = renderer.domElement.getBoundingClientRect();
    mouse.x = ( ( e.touches[0].clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
    mouse.y = - ( ( e.touches[0].clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

But in portrait mode the raycast works fine. Any suggestions/help is much appreciated.

2
  1. The formula at the top of the Raycaster docs is the right one.
  2. Do resize the canvas / update the renderer after you change view modes? This has to be done manually - otherwise landscape mode will use viewport of the portrait mode.
1 Like
3

Hi, thanks for the suggestion. Made changes in the formula and added resize the canvas/update the renderer. In portrait mode the raycast is working fine but still not in landscape mode