expose control over the three.js side property to render the back side of elements

[bbohlender]

[Deamoner]

Any update on this?

[fakalit]

We need this capability as well and would like to know it's priority among other needs is if possible

[wrangelvid]

In our workaround we simply add another container to the root and use the transformRotation property to flip it by 180 degrees :) (just putting it out there to unblock folks)

[AB498]

I'm using @wrangelvid's idea to duplicate the root like this:

function DoubleSided({ children }) {
    return <>
        {children}
        <children.type {...children.props} transformRotateY={180} transformScaleX={"-100%"} />
    </>
}

then in Canvas:

<DoubleSided>
    <Root><Text>Hello</Text></Root>
</DoubleSided>

[cyango]

Would be interested on this too

[igpdev-428]

+1 to this

[igpdev-428]

I'm using @wrangelvid's idea to duplicate the root like this:

function DoubleSided({ children }) { return <> {children} <children.type {...children.props} transformRotateY={180} transformScaleX={"-100%"} /> </> } then in Canvas:

Hello

I had some issues (typescript and such) also my ui has some buttons and they were not detecting raycast from the back side so I did this

type FooProps = {
  name: string
}

const DoubleSided: React.FC<PropsWithChildren<FooProps>> = (props: PropsWithChildren<FooProps>) => {
  if (!React.isValidElement(props.children)) return <></> 

  return (
    <>
      {props.children}
      <props.children.type
        {...props.children.props}
        transformRotation={[0, 180, 0]}
        transformScaleX={'-100%'}
        transformScaleZ={'-100%'}
      />
    </>
  )
}

EDIT: also I forgot to mention, so that the duplicate doesn't order itself according to the original copy, I added a <Container positionType={'absolute'}> under the <DoubleSided> tag, wrapping all items to duplicate.

So in the end because wrapping the root didn't work in my case I did:

      <Root
        positionLeft={0}
        positionTop={0}
        positionType="absolute"
        anchorX="left"
        anchorY="top"
        flexDirection="column">
        <DoubleSided name={'foo'}>
          <Container positionType={'absolute'}>
                {elements}
          </Container>
       </DoubleSided>
    </Root>