React Three Fiber cannot load multiple textures into same model

Questions
, , ,
1

Hello I am new to react-three-fiber and react-three-drei I have a component as follows:

function Character(props) {
    const obj = useFBX('/character.fbx');

    const bodyNormal = useTexture('/textures/body_normal.png')
    const bodyColor = useTexture('/textures/body_base_color.png')

    return <mesh>
        <primitive object={obj} />
        <meshBasicMaterial map={bodyNormal} attach="material-0" />
        <meshBasicMaterial map={bodyColor} attach="material-1" />
    </mesh>
}

I can see that the model is loaded correctly however the textures are not being loaded, how can I fix this?

2

with that code above you are dumping a group or whatever fbxloader returns into a mesh (primitive puts an existing object into the tree, that’s why you see the model). in threejs a mesh needs to have a geometry and a (or multiple) materials.

im guessing something like

<mesh geometry={obj.???.geometry}>
 ...

as for these two textures, don’t expect the first one to be interpreted as a normalmap if that’s your intention. i wonder why at all would you want two materials like that.

do you know how your problem is solved in just plain threejs?

3

As I have mentioned I am pretty new to react three fiber/drei and in general to threejs, do you know how I can solve this? really interested to learn more about this technology it seems awesome!

4

it’s impossible to help without knowing what you want to do. i would consult the docs:

mesh: three.js docs

meshstandardmaterial: three.js docs

and start slowly with simple stuff, otherwise everything will turn into a guessing game. all i can say is that the way you’re handling it is neither how meshes work in three, nor materials nor how normalmaps are applied. i would suggest you spend more time on threejs fundamentals first.