Feature request: ignore invisible

[oveddan]

I have some hidden elements I use for raycasting, but don't want them to affect the spacing of things. These are hidden with visible=false. It would be great if there was a flag: <Box ignoreInvisible />

that would ignore those invisible elements when computing the box size.

[saitonakamura]

@oveddan can you elaborate on what is actually invisible? Are you placing invisible on a Box itself or on the items inside it?

[oveddan]

@saitonakamura A mesh inside the box.

Here is a sample piece of code where this happens:

      <Flex flexDirection="row" alignItems="baseline">
        <Box>
          <mesh>
            <meshBasicMaterial color="blue" />
            <boxBufferGeometry />
          </mesh>
          <mesh scale-y={1.5} visible={false}>
            <meshBasicMaterial color="green" />
            <boxBufferGeometry />
          </mesh>
        </Box>

        <Box>
          <mesh>
            <meshBasicMaterial color="red" />
            <boxBufferGeometry />
          </mesh>
        </Box>
      </Flex>

This results in this:

You can see the full example in this codesandbox

Why would I want an invisible element inside the box? Because I have some reusable components that render those invisible elements, mostly for raycasting. I would like them to not affect the alignment of items.

[saitonakamura]

@oveddan , thanks for the clarification

I may be wrong but it seems it's pretty hard thing to do, ignore the invisibles I mean, because the invisibility of an item doesn't affect bounding box calculation in threejs (which is used under the hood of r3flex). visibility is more like opacity: 0.

BUT I do however have a workaround. See, if a Box have a Box children, it's them who's gonna affect the size and not top level meshes and groups. So you can do

<Flex flexDirection="row" alignItems="baseline">
  <Box>
    <Box>
      <mesh>
        <meshBasicMaterial color="blue" />
        <boxBufferGeometry />
      </mesh>
    </Box>
    <mesh scale-y={1.5} visible={false}>
      <meshBasicMaterial color="green" />
      <boxBufferGeometry />
    </mesh>
  </Box>

  <Box>
    <mesh>
      <meshBasicMaterial color="red" />
      <boxBufferGeometry />
    </mesh>
  </Box>
</Flex>

[oveddan]

Totally get why that is hard after looking at the code.

Your technique is a great suggestion, and it works for my solution. Thank you for that!