giulioz
commented
3 years ago That's because the <Flex /> component is not centered. You have to do it manually, moving it by 1/2 of its size:
<Suspense fallback={<Html center>loading..</Html>}>
<group scale={scale}>
<Flex
plane={plane}
flexDirection={flexDirection}
flexWrap="wrap"
position={[-3/2,3/2,0]}
size={[3, 3, 1]}
>
{[...Array(number)].map((e, i) => (
<FlexBox centerAnchor>
<Box />
</FlexBox>
))}
</Flex>
</group>
</Suspense>
<Box key={"helloworld"} args={[3, 3, 1]} position={[0, 0, 0]}>
<meshBasicMaterial attach="material" color="red" wireframe />
</Box>
promontis
@drcmda I'm trying to get a boundingbox for the Flex container.
See sandbox here: https://codesandbox.io/s/hardcore-fog-0eqrh?file=/src/App.js
I've added a wireframe box with the same position and size as the Flex container. I would expect that the first flex item would start at the side of the container (because justify = start), however it starts at the center of the container. The container wraps correctly (hit 4... it wraps after 3 items), but I would expect all the items to be contained inside the wireframe.
Why is this not happening? Is my current method not correct? Is there any other way to retrieve the bounding box for a flex container?