Raycasting on moving objects

Question

I would like to create some mouse interactions on several moving planes and for that, I need to know which planes I'm hovering on. I've implemented the Raycasting method like in your example here but it seems like I'm hovering all my planes in the center of the canvas, just like if the raycasting method wasn't considering my position.set() modifications.

You can see here an example of what I did here, I logged the result of the hits array at the end of the canvasSlider.js file and all planes are logging when hovering in the center.

Is there a way around that? Or I'm I doing something wrong? Thanks a lot.

Answer 1

The main issue is that you are setting the z scale to 0.

plane.scale.set(1, size.height/size.width, 0);

Replace the 0 with a 1 to enable the hit tests to function.

Another issue I noticed was that your mouse values are relative to the screen and not the canvas. As the canvas is on a scrolling page it may not be taking up the full screen at all times.