Rotation on flex root causes overlapping elements

[saitonakamura]

Change rotationY prop of Panel https://codesandbox.io/s/hidden-shape-jyrbf?file=/src/index.tsx. It's fine when it's 0, but the more you set it, the more items overlap

[saitonakamura]

I tracked it down to that bounding box is oriented towards non rotated axis https://codesandbox.io/s/amazing-meitner-m1q3w?file=/src/index.tsx

It makes sense, but in flex case it makes it's width appear lower than it is when flex is rotated. We need to respect the rotation, but I don't understand how 😅

[saitonakamura]

Ok, I almost got it. You clone an object (a group in this case) and measure it's bounding box (cause parent rotation doesn't influces the clone). This would also provide correct size when items are rotated

const calculateRotatedBB = (object: Object3D, bb: Box3, size: Vector3) => {
  const clone = new Object3D()
  clone.copy(object)
  bb.setFromObject(clone)
  bb.getSize(size)
  return size
}

The issue i'm having right now is that if a have a box with Text from drei. it reports size correctly if not rotated and use old bouding box method, but with a clone it returns 0. I wonder if it's a separate problem with troika