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

kylewetton · March 4, 2021, 8:27am

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

github.com

kylewetton/ubiety-pro/blob/860a7a6de96176e4a40da3d9ec6f6c9067a4b831/src/components/CustomMaterial/CustomMaterial.tsx

import React from 'react';
import { CustomMaterialProps } from './types';
import {useTexture} from 'drei';
import { Vector2, RepeatWrapping } from 'three';
import _map from 'lodash/map';
import { useSelector } from 'react-redux';
import { getMaterialByTag } from '../../store/product/selectors';

/**
 * 
 * @param tag – the material tag
 */

const CustomMaterial: React.FC<CustomMaterialProps> = ({tag, color}) => {
    const material = useSelector(getMaterialByTag(tag));

    const maps = material && material.maps;
    // Convert to texture image paths
    const paths = maps.map(texture => `${material.src}/${texture}.jpg`);
    // Load all the textures (useTexture returns an array)

This file has been truncated. show original

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

react-three-fiber

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

drcmda · March 5, 2021, 10:57pm

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 …

drcmda · March 5, 2021, 11:01pm

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.

kylewetton · March 6, 2021, 7:24am

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

drcmda · March 6, 2021, 1:24pm

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

kylewetton · March 7, 2021, 7:01am

Thanks man, here it is

drcmda · March 7, 2021, 12:15pm

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

kylewetton · March 7, 2021, 8:20pm

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!

Topic		Replies	Views
React-three-fiber / Drei useTexture has a caching issue related to useMemo, can someone please sanity check this for me? Questions react-three-fiber	2	1579	March 24, 2021
Custom shader stops when using useState hook (r3f + drei) Questions react-three-fiber , drei , r3f	1	766	September 22, 2023
React Three Fiber cannot load multiple textures into same model Questions textures , loaders , fbx-loader , fbx	3	1813	January 20, 2023
How to load a map (texture) with react three fibre? Questions textures , react-three-fiber	4	5058	April 26, 2022
Best Way to Render Images (& Text) on Model? (Textures, Decals, etc.) Questions textures , react-three-fiber	7	3212	November 15, 2024

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

Related topics