How to add material to OBJ-loaded primitive?

[TeosVerdi]

Hello!

I'm a beginner at r3f, but i don't understand a simple thing. I load an .OBJ file and set it as a primitive, but material doesn't attach to it. How do i fix this?

This is where i create the mesh:

const Figures = () => {
  
  return (
    <mesh position={[0, 1, 0]}>
      <meshBasicMaterial color="magenta" />
      {ObjToPrimitive({ url: "/models/bishop.obj" })}
    </mesh>
  );
};

And this is the ObjToPrimitive function:

import React from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { useLoader } from "react-three-fiber";


export default function ObjToPrimitive({ url }) {
  const obj = useLoader(OBJLoader, url);
  return obj ? <primitive object={obj} /> : null;
}

I'm also using a latest Next.js with next-transpile-modules.

r3f: 5.3.14
three: r124

Thanks in advance!

[TeosVerdi]

Aaand as soon as i posted this, i've found a solution. Not the best one, but it works.

Now this is a mesh creator

const Figures = () => {
  const mat = new THREE.MeshNormalMaterial()
  return (
    <mesh position={[0, 0, 0]}>
      {ObjToPrimitive({ url: "/models/bishop.obj", mat })}
    </mesh>
  );
};

and this is a ObjToPrimitive function:

import React, { useMemo, useState } from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";

import { Mesh } from "three";

export default function ObjToPrimitive({ url, mat }) {
  const [obj, setObj] = useState();
  useMemo(() => new OBJLoader().load(url, setObj), [url]);
  if (obj) {
    obj.traverse((child) => {
      if (child instanceof Mesh) {
        child.material = mat;
      }
    });
    return <primitive object={obj} />;
  }
  return null;
}

I'd still prefer a more elegant solution, if you know one.
Will mark this reply as an answer in a span of two days.

Thanks again!