Raycaster fails hit test

Questions
1

Any idea why raycaster fails the hit test for the example at https://jsfiddle.net/zdy1hc9z/ ? It has a cube and a thin cylinder inside it. If you click on the cylinder in the example, then raycaster fails the hit test. It works on the cube. If I increase radius of the cylinder, for example to 0.2, then the hit test works.

2

Hi!
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerWidth, 0.1, 1000 );

is window.innerWidth / window.innerWidth intentional?

3

That was not intentional. Fixed it in the code. But that does not change the result.

4

Change
window.addEventListener('mousedown', onMouseDown, false );
to
window.addEventListener('mousemove', onMouseDown, false );
run the fiddle and slowly move your mouse across the cylinder’s part, which is out of the cube. Notice the amount of hits, when the mouse slightly to the left from the cylinder.

Then, add this style for the canvas and see, where your renderer.domElement locates on the window:

canvas{
  border: 1px solid blue;
}

To solve this, add one more style for body:

body{
  overflow: hidden;
  margin: 0;
}

and remove previous style for canvas. That’s all :slight_smile:
https://jsfiddle.net/zdy1hc9z/3/

5

It’s better to raycast using the canvas dimensions, rather than the window - I’ve updated your method here:

https://jsfiddle.net/zdy1hc9z/2/

This way you can have a canvas of any size, anywhere in the screen (or fullscreen), and raycasting will still work.

2 Likes
6

Thanks @looeee, that solved the issue.

7

It makes things simplier, if to add the event listener to the canvas (renderer.domElement) and use offsetX and offsetY :beers: :
https://jsfiddle.net/zdy1hc9z/4/
https://jsfiddle.net/zdy1hc9z/5/

3 Likes
8

@prisoner849 even better! :tada:

1 Like