Raytracing hover when canvas moved is wrong

[rvdende]

I built a sandbox to show the bug: https://sxx8r.csb.app/

Hover over boxes works on first load, now click and drag the red/green/blue canvas divs around and try to hover the yellow cubes.. they do not turn pink.

I've tried digging through the code to see how I can detect parent object update or change.. is there some way to notify Canvas to recalculate its own position on the page so raytracing hover events will work?

[drcmda]

i dont think there is a real solution to this, we use resizeobserver and onscroll, the dom has no means of detecting move unfortunately. you shift the canvas by code, that's basically it - nothing will tell me that you did that - which is really sad, people have been asking for 20 years for that.

in v5 i have exposed a forceResize method, you can get it via useThree or as a global import. if you call this it will refresh the size data. for instance, after you drop a canvas. call it and raycasting should work as expected again.

[drcmda]

seems to work: https://codesandbox.io/s/exciting-mayer-cdyhw?file=/src/App.js

i have never seen react-grid before, dont know if onDragStop is the correct callback, but when it's called the grid item is still moving. you need to call forceResize when the canvas is at its proper place.

[rvdende]

Thank you so much! This worked in my project to fix the issue.

onDragStop={() => setTimeout(forceResize, 200)}>

I had to just make sure to install latest beta by running npm i react-three-fiber@beta and then it found the forceResize export. Excellent and I love R3F!