I’m super stoked to share a project that I’ve been working on with three.js.
I’ve put together a 3D portfolio that’s a bit out of the box - quite literally. I used react-three-fiber to craft an impossible box, and each of its faces is a different project I’ve worked on.
And the cherry on top - this project bagged an Honorable Mention on Awwwards!
I’m really scratching my head over this issue as it seems to crop up only on certain devices. Could you please let me know the type of device and browser you used? This info would be super helpful in troubleshooting
Thanks so much for going the extra mile and running these tests, I really appreciate your help.
I tried your fix, but I can’t tell if it worked because I’m not able to reproduce the bug on my end
The issue is strange because the maze is just one plane, so it’s weird that it would have z-fighting with itself. I think it might be a shader issue, but I’m not sure why this would happen on some devices and not others
Sorry for the delay. I’ve put together a CodeSandbox with everything needed to reproduce the bug. Here’s the link: CodeSandbox Link
Thank you for taking the time to help me try to solve this issue, I really appreciate
However, the color looks wrong. So, when I look how wallHeight is used, I see direct compare of floating point values. This is dangerous. When I replace a==b with abs(a-b)<0.001, the color looks OK with wallHeight = 10:
It turned out to be an easy fix after all!
No more comparing floating-point values for me – I’ve learned my lesson haha
I’ve made the correction on the site, but this time I’m the one with a Z-fighting issue
To resolve it, I removed the polygon offset and adopted this code organization and it seems to work:
Thank you! No, I don’t even know what that is. I created a 3-dimensional js array where I fill in information like ‘wall’ or ‘staircase’ with algorithms, and then I use that array to generate the three.js geometries