I’m pretty new to three.js and loving it so far. I’m currently working with an almost-spherical object and attempting to apply a texture to it. However, the result is coming out very weird. The texture seems to be applied in slices, back to front. It’s difficult to explain so here’s a screenshot:
Those weird shapes around big black circle are supposed to be smaller circles, but they’re back-to-front. I’ve built a working demo on Codepen, you can grab the texture and object file here as well (I can’t more post than two links as I’m a new user): https://codepen.io/levymetal/pen/xWwzqe
The texture works on a sphere: https://codepen.io/levymetal/pen/ZxbRyj (I know it’s getting stretched, which is fixable, but the texture is still being applied properly).
I’ve spent a few hours on this, but can’t find anything at all, so I’m not sure what I’m doing wrong.
Has anyone ever seen this before and have any ideas of how it can be fixed?