OBJ + MTL + texture loading with useLoader

[delia-m]

Hi guys, I am trying to get obj file with mtl which has texture as well.

This works for me to load mtl and obj but not texture. (didn't load texture even if exist on correct path)

const materials = useLoader(MTLLoader, mtlUrl)
const object = useLoader(OBJLoader, objUrl, loader => {
  materials.preload()
  loader.setMaterials(materials)
});

return <primitive object={object} />

And I wanted to load texture manually like this for texture file

    materials = useLoader(MTLLoader, mtlSrc, (loader) => {
      const loadingManager = new THREE.LoadingManager();
      loadingManager.setURLModifier(url => {
        if (_.endsWith(url, '.jpg') && textureSrc) {
          return textureSrc;
        }
        return url;
      });
      loader.manager = loadingManager;
    });
 
   const object = useLoader(OBJLoader, objUrl, loader => {
      materials.preload()
      loader.setMaterials(materials)
    });

    return <primitive object={object} />

I tried second version in pure three.js (I mean without useLoader, used scene) and it loaded texture correctly.
But didn't load texture in fiber.
I tried useMemo but didn't help

const copiedScene = React.useMemo(() => object.clone(), [object]);
return <primitive object={copiedScene} />

I will appreciate if someone advise me how get texture work.

Thanks.

[drcmda]

useLoader is just a thin integration that calls the loader inside a suspense boundary. There's nothing to it otherwise, if your plain JS thing works then it most likely does something which you forgot. If you want post a small csb

[delia-m]

Thanks for reply.
My problem was the light I did't add that's why it was all black.
So actually texture loaded but couldn't see because it's dark.. haha
I attached my working code for others

import React, { Suspense } from 'react';
import _ from 'lodash';

import * as THREE from 'three';
import { Canvas } from '@react-three/fiber';
import { useLoader } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';

function Model(props) {
  const ref = React.useRef()

  const { objSrc, mtlSrc, textureSrc } = props;

  const materials = useLoader(MTLLoader, mtlSrc, (loader) => {
    const loadingManager = new THREE.LoadingManager();
    loadingManager.setURLModifier(url => {
      if (_.endsWith(url, '.jpg') && textureSrc) {
        return textureSrc;
      }
      return url;
    });
    loader.manager = loadingManager;
  });

  let object = useLoader(OBJLoader, objSrc, (loader) => {
    materials.preload();
    loader.setMaterials(materials);
  });

  return (
    <primitive ref={ref} object={object}>
      <ambientLight />
      <pointLight position={[0, 10, 0]} />
    </primitive>
  )
}

export default function OBJViewer(props: Props) {
  const { objSrc, mtlSrc, textureSrc } = props;

  if (objSrc && mtlSrc && textureSrc) {
    return (
      <Canvas>
        <Suspense fallback={null}>
          <Model
            objSrc={objSrc}
            mtlSrc={mtlSrc}
            textureSrc={textureSrc}
            />
          <OrbitControls />
        </Suspense>
      </Canvas>
    );
  }
  return null;
}