Edges don't work when negative scaling is used (works in Drei <=0.101.0)

[nene]

• three version: 0.166.1
• @react-three/fiber version: 8.16.8
• @react-three/drei version: 9.108.4
• node version: 20.8.0
• npm version: 10.1.0

Problem description:

When using the following code to render a simple box with Edges applied:

function Box() {
  return (
    // Note the negative scaling
    <mesh position={[2, 0, 0]} rotation={[0.5, 0, 0]} scale={[-2, 2, 2]}>
      <boxGeometry args={[1, 1, 1]} />
      <Edges color="black" />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

With Drei version 9.101.0, the edges are nicely rendered:

With Drei version 9.102.0 and above, the edges no more show up:

This only happens when negative scaling factor is used in the surrounding <mesh>.

Relevant code:

I created a repository that demonstrates this problem: https://github.com/nene/three-edges-react

Suggested solution:

Looks like there were major changes to Edges implementation in v9.102.0.

[TK009]

I had the same problem and made a workaround fix with side={THREE.DoubleSide} prop.

[github-actions]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!