Property 'setMaterials' does not exist on type 'Loader' when using useLoader extensions

[charlesinwald]

I am trying to set the materials of an object, using react-three-fiber's useLoader. However on the callback function of OBJLoader, setMaterials is not defined

  const materials = useLoader(
    MTLLoader,
    process.env.PUBLIC_URL + "/texturedMesh.mtl"
  );
  const object = useLoader(
    OBJLoader,
    process.env.PUBLIC_URL + "/texturedMesh.obj",
    (loader) => {
      materials.preload();
      loader.setMaterials(materials);
    }
  );

TS2339: Property 'setMaterials' does not exist on type 'Loader'.
    23 |     (loader) => {
    24 |       materials.preload();
  > 25 |       loader.setMaterials(materials);
       |              ^^^^^^^^^^^^
    26 |     }
    27 |   );
    28 |   // );

The contents of loader are:

OBJLoader {manager: LoadingManager, crossOrigin: 'anonymous', withCredentials: false, path: '', resourcePath: '', …}
crossOrigin: "anonymous"
manager: LoadingManager
    addHandler: ƒ (regex, loader)
    getHandler: ƒ (file)
    itemEnd: ƒ (url)
    itemError: ƒ (url)
    itemStart: ƒ (url)
    onError: item => {…}
    onLoad: () => { set({ active: false }); }
    onProgress: (item, loaded, total) => {…}
    onStart: (item, loaded, total) => {…}
    removeHandler: ƒ (regex)
    resolveURL: ƒ (url)
    setURLModifier: ƒ (transform)
    [[Prototype]]: Object
materials: null
path: ""
requestHeader: {}
resourcePath: ""
withCredentials: false
[[Prototype]]: Loader

[CodyJasonBennett]

Is this merely a type error or does this also produce a runtime (JS) error?

[charlesinwald]

If I disable the type error as below, I don't seem to get any error at runtime, however I'm not seeing the materials applied.

const object = useLoader(
    OBJLoader,
    process.env.PUBLIC_URL + "/texturedMesh.obj",
    (loader) => {
      materials.preload();
      console.log("loader", loader);
      // ignore property does not exist on type 'OBJLoader'
      // @ts-ignore // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      loader.setMaterials(materials);
    }
  ); 

[charlesinwald]

By updating the code to the following:

  const object = useLoader(
    OBJLoader,
    process.env.PUBLIC_URL + "/texturedMesh.obj",
    (loader) => {
      materials.preload();
      console.log("loader", loader);
      if (loader instanceof OBJLoader) {
        console.log("instanceof OBJLoader");
        loader.setMaterials(materials);
        console.log("after setMaterials");
      }
    }
  );

I am able to setMaterials without error, however I don't actually see the materials applied. The materials property is no longer null, it is now:

materials: MaterialCreator
baseUrl: "/"
crossOrigin: "anonymous"
manager: LoadingManager {onStart: ƒ, onLoad: ƒ, onProgress: ƒ, onError: ƒ, itemStart: ƒ, …}
materials: {TextureAtlas_1001: MeshPhongMaterial, TextureAtlas_1002: MeshPhongMaterial, TextureAtlas_1003: MeshPhongMaterial, TextureAtlas_1004: MeshPhongMaterial, TextureAtlas_1005: MeshPhongMaterial}
materialsArray: []
materialsInfo: {TextureAtlas_1001: {…}, TextureAtlas_1002: {…}, TextureAtlas_1003: {…}, TextureAtlas_1004: {…}, TextureAtlas_1005: {…}}
nameLookup: {}
options: {}
side: 0
wrap: 1000
[[Prototype]]: Object

Should materialsArray be empty? This should be referencing the MTL file and the five texture pngs in the public folder of my project.