search

pmndrs / react-three-flex

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

Box size control #48

Closed bbohlender closed 3 years ago

bbohlender commented 3 years ago

I've tried to implement a UI with react-three-flex that is bound to the camera. After rotating the camera and in case of content change in the UI a BoundingBox had to be recalculated. Since the recalculation is based on setFromObject the global orientation is included in this calculation leading to a change in the flex's box size.

My solution would be to have an option for explicit sizing of Boxes. A FlexText component f.e. could then calculate its size on every content change and explicitly notify the box with the exact and correct size.

I already made a POC implementation, which worked very well and made the camera bound UI possible. If the solution is viable I could make my POC into a more generalizing feature and submit a PR.

Hope to hear your feedback about this :) I really like this library since I see it playing a crucial role (at least in my development) in building good dynamic user interfaces in R3F, where HTML can't do the job (e.g. WebXR).

giulioz commented 3 years ago

You can already explicitly set width and height of the boxes via props. You mean doing that by a callback?

bbohlender commented 3 years ago

You can already explicitly set width and height of the boxes via props. You mean doing that by a callback?

If I have a Text Mesh that lives inside a Box element. I think it would be awesome if the "onSync" property of the r3/drei Text Element can directly set the size of the Box element. Yes I can do that currently by writing a component that wraps around the Box and the text object and sets the size explicitly by changing the props "onSync" but that would require a rerender from react.

I think a option to disable the automatic calculation of the bounding box, through the Flex-Element, would do the trick, since that allows the developer to talk to the flex node directly and execute the reflow without any rerender from react and gives much more control over the flex node. Since the box node is already exposed in the box context, the automatic calculation is the only thing that hinders that use case.

I can provide a PR if that makes things clearer :)

giulioz commented 3 years ago

Seems useful to me, send a PR if you want :)