Loading mesh(OBJ+MTL+JPG) with react-three-fiber, Texture is not working

Question

In my react app, I am trying to make a view page which shows 3d-mesh exported from pix4d. This mesh consists of three types of files, (.obj, .mtl, .jpg) pix4d.com.

I am new, with react-three-fiber, which I suppose is best way to achieve my solution to my problem.

Below is whole code of react component used to load and render 3D-Model.

code

Thanks in Advance!

I want to understand how to attach texture & material to my obj rendered model.

I've never used React-Three-fiber before, but it looks like you're creating a mesh with an image attribute. Are you sure it shouldn't be .map instead? — Marquizzo
Yeah tried all Mesh Materials: No changes in results I see. meshStandardMaterial has alphaMap, map, normalMap, displacementMap, tried all :( — Ajit T Stephen
<mesh materials={...} --> never seen that before, to my knowledge that property does not exist in threejs threejs.org/docs/index.html#api/en/objects/Mesh <meshBasicMaterial map={texture} /> ---> this will do nothing because it's missing attach="material" — hpalu
@hpalu can you give full example? Did somebody have a solution? — otto
@wwwwwwwwwwww I have to yet convert this to RTF solution, this task got moved to my backlog at the moment. Last I worked, I was able to load my OBJ in here. So all you need to worry is to use .obj & .mtl files, loaded from RTF, but JPG file should be at that place as it is referenced from .mtl. use this: threejsfundamentals.org/threejs/lessons/threejs-load-obj.html — Ajit T Stephen

Cosmitar Cosmitar · Accepted Answer · 2021-01-07T02:35:26

I was looking for this answer for a couple of weeks, finally I've found a way to make it work.

Material loader is not resolving by itself the import of remote files (it does on web, not in mobile, maybe in the future it will). So, I'm creating material and assigning it images by hand.

Something like this:

import { TextureLoader } from 'expo-three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
// useThree is used to get scene reference
import { useThree } from 'react-three-fiber';

const textureLoader = new TextureLoader();
const mapImage = textureLoader.load(require('path/to/image1.png'))
const normalMapImage = textureLoader.load(require('path/to/image2.png'))

Note that TextureLoader from expo-three can handle the file resource returned from require()

const loaderObj = new OBJLoader();
const loaderMtl = new MTLLoader();

export default props => {
  const { scene } = useThree();

  loaderMtl.load(
    'https://url_to/material.mtl',
    mtl => {
      mtl.preload();

      loaderObj.setMaterials(mtl);
      loaderObj.load(
        'https://url_to/model.obj',
        obj => {
          // simple logic for an obj with single child
          obj.children[0].material.map = mapImage;
          obj.children[0].material.normalMap = normalMapImage;

          scene.add(obj)
        }
      )
    }
  )

  return null;
}

This is my first successful attempt to render an obj with mtl including a map and a normal map, so since it works, we can keep updating the code for improvements.

Loading mesh(OBJ+MTL+JPG) with react-three-fiber, Texture is not working

1 Answers