Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nene opened this issue Jul 16, 2024 · 1 comment
Open
Labels
bug Something isn't working

Comments

@nene
Copy link

nene commented Jul 16, 2024

  • 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:

Screenshot 2024-07-16 at 13 46 23

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

Screenshot 2024-07-16 at 13 47 23

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
Copy link

TK009 commented Aug 26, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants