<Text> displays on both sides of models (and shimmers through on the side)

[torn fog]

I'm building a Next.js app that lets users design their own hoodies. One of the features is the addition of text.

For this, I'm using drei's <Text> component inside a <RenderTexture> (full code below).

At first glance it works as it should, but the text is also shown in a mirrored way on the back of the model (and it shimmers through on the sides when turning the model).

My code:

<Decal
  position={[x, y, -0.1]}
  rotation={[0, 0, 0]}
  scale={[-1, 1, 1]}
>
  <meshBasicMaterial
    transparent
    polygonOffset
    polygonOffsetFactor={-100}
  >
    <RenderTexture attach='map' anisotropy={16}>
      <PerspectiveCamera
        makeDefault
        aspect={1 / 1}
        position={[0, 0, 1]}
      />
      <Text
        color={hex}
        fontSize={0.01 * size}
        font={`/fonts/${font}.ttf`}
      >
        {content}
      </Text>
    </RenderTexture>
  </meshBasicMaterial>
</Decal>

I tried various ways to fix this, including:

• setting the side property on the meshBasicMaterial
• tweaking the polygonOffsetFactor
• tweaking the position and rotation
• setting up a variable to check when the backside is viewed and hide it
• setting up a second decal on the back to otherwise cover the area
• adjusting UV settings on the model (in three, not in Blender)

[unkempt nymph]

it's probably the polygonOffsetFactor

[torn fog]

Thanks @unkempt nymph. I removed it and that removed the shimmer from the side. I was suspecting this to be the harder of the two problems, glad that there's such an elegant solution 🙂

Do you have suspicions what might be causing the mirrored rendering on the back?

[unkempt nymph]

my suspicion is that that's your models fault, probably flipped normals