search

pmndrs / react-three-flex

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

Debug view #50

Open saitonakamura opened 3 years ago

saitonakamura commented 3 years ago

What is the best way to debug why Boxes/children ended in places where they ended. I'm trying yo understand what gone wrong in my markup and having wireframe of flex container/highlight of the margins would be very helpful. But I don't understand how to do this properly (because of center anchor, for instance you can't set this on a flex). Is there any example I can look up?

For instance I can do this, but I can't really figure out whether it mesh inside flex positioned incorrectly or items themselves https://codesandbox.io/s/eager-elgamal-hbqz3?file=/src/index.tsx

saitonakamura commented 3 years ago

Ok, I think I got, I needed centerAnchor on a box (since it uses native three geometries). But it will still be nice to have this built-in

ChrisCrossCrash commented 2 years ago

I was going to make a new issue for exactly this! It would be very helpful if you could just put a debug prop in the root Flex element. Something like this:

<Flex debug>
   ...
</Flex>

Then it would put wireframes around all the elements and flex containers. It could also show the anchors.

I've been trying to learn this library all day today, but it has been very difficult because there isn't an easy way to visualize the flex layout.

proelf98 commented 1 year ago

Yes would love it. Would it be possible to set a material to the Container?