I'd like a little bit of help with react-three-fiber / drei. I'm having different texture wrapping results to vanilla Three.js

I’m currently rebuilding a project in React and leveraging react-three-fiber.

I’m not sure if I’m setting the wrapping correctly, could someone have a look at this here? Essentially I’m using useTexture and then altering the return Texture objects that it gives me. Works fine for repeat.set, but I don’t know

Have a look at the sole of this shoe, you will need to open the image at 100% to see the detail

  • Please ignore the lighting, I haven’t gotten there yet
  • Ignore the artifact on the heel of the react-three-fiber shoe

One possibility off the top of my head is that useGLTF may be loading the model differently to GLTFLoader? I doubt that though. Any ideas?

Native Three.js


Lastly, feel free to clone the repo and test it out on your end, it’s very much a WIP. Ignore the tests and stories

useGLTF is a thin wrapper around new GLTFLoader().load(url, set), it integrates it into suspense. the difference must have another explanation.

if you are re-using the same texture in several places than that could be something to look at bc useLoaders all cache. given the same url in two places it will serve the same object. you shift uv’s here, and you shift uv’s there, the last one wins. when you need to re-use an asset you should clone it.

const asset = useLoader(...)
const clone = useMemo(() => asset.clone(true), [asset])

just an idea, maybe still something else …

more differences, r3f uses srgb colorspace and gamma correction, see: Color Management in three.js you can switch it off by doing

<Canvas colorManagement={false}

other than that nothing that comes to mind. i see something odd going on in the heel, looks like z-fighting.

Thanks for the direction, the first suggestion isn’t the case here oddly enough, I’ll figure it out though. The odd thing on the heel is definitely z-fighting, the shoe takes printed decals there and likely just needs to be shifted a bit

Rendered in eevee so the black should be transparent

could you upload to codesandbox? i can take a look, if the model is correct i probably find it quick.

Thanks man, here it is

uv problem it seems, i get similar mismatches in blender when i open the model.

made a smaller gltfjsx export to test textures: clever-williams-o685o - CodeSandbox

needs a uv re-map imo

Oh right, thanks man I never considered it’d have been that because the same file shows differently in my older project (screenshots in OP), thanks for that!