Feature request: ignore invisible about react-three-flex HOT 4 CLOSED

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

from react-three-flex.

@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.

from react-three-flex.

@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>

from react-three-flex.

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!

from react-three-flex.