pmndrs / react-three-flex

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

Calculate size that doesn't consider parent rotation #54

Closed saitonakamura closed 3 years ago

saitonakamura commented 3 years ago

It's a draft of PR that fixes size calculation when flex root or object are rotated. Current problem is with meshes that render asynchonously (Text from drei), because copying a group with such mesh won't be properly size right after the copy (we need to wait for a sync event). For a synchronous meshes it works correctly

Fixes #53

saitonakamura commented 3 years ago

If we can somehow calculate the rotated bounding box (OBB essentially) without copying (so reuse already rendered text geometry values) that would solve it. However I can't figure out how to do this. I tried rotatiting the group itself (negating the root group rotation, but gives me wrong values, probably I need to call update to more stuff, but can't figure out what also)

saitonakamura commented 3 years ago

I adapted code from https://github.com/mrdoob/three.js/issues/11967. This doesn't require copying so it works for text also, but it's broken for items rotation. I believe it's good enough for now since current state of things is broken for both root rotation and items rotation, plus root rotation feels like much more common use case rather than items rotation (rotating a plane with UI to face the eyesight in VR)

saitonakamura commented 3 years ago

This is ready for review now

giulioz commented 3 years ago

Will review and release ASAP

saitonakamura commented 3 years ago

@giulioz gentle reminder

giulioz commented 3 years ago

LGTM, really sorry for being so late

saitonakamura commented 3 years ago

Ooh, great @giulioz , thanks! I've established a fork that's is published under my npm name scope, so take your time reviewing, I don't want another open source contributor to burn 🙂 But expect a lot of PRs from me, currectly I'm developing a POC VR interface for our app so I'm researching all kinds of cases