Texture on spherical object renders back to front in slices

Hey Everyone,

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: 42-ball-issue

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?

Looks like there’s something wrong with the uv-coordinates of that almost spherical object.

1 Like

I can see the same weird result when I import your OBJ in Blender. A new UV unwrapping solves the problem.

1 Like

Ah, thanks very much guys. The obj was exported from C4D, for some reason it works there. I’ll try Blender and see how it goes.

Cheers!