pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.65k stars 42 forks source link

Hook to get the position, similar to useFlexSize() #84

Open Prinzhorn opened 1 year ago

Prinzhorn commented 1 year ago

Essentially I need this:

const node = useFlexNode();
const { left, top } = node.getComputedLayout();

but

  1. This is in yoga-units (e.g, scaled by default x100)
  2. I don't think this is proper code for hooks, right? I'm not supposed to imperatively call getComputedLayout like this in a render function?

Why do I need this? My flex-items are buttons. Behind those buttons is the nested "page". The buttons use masks to show the page as you hover, since the page is actually "physically" behind the button. If you click the button you essentially fly through the button to the nested page. For buttons that are not perfectly in the center on the viewport I need to move the nested page. Right now it's only slightly offset by the flex style of the button, but since this is farther way I need to scale the position with the distance so you can properly look through the button and see the page (essentially a line from camera, through the center of the button to the center of the next page). Hence I need the position of each box item.

kwyntes commented 6 months ago

Yeah we really need this, makes little sense to write a positioning framework if you're not able to figure out where something will be positioned imho lol