mtl file not loading

I’m trying to load an obj with an mtl, but for some reason the mtl is never applied.

code ->

import Expo from 'expo';
import React from 'react';

import * as THREE from 'three'; 

import ExpoTHREE from 'expo-three';

console.disableYellowBox = true;

export default class App extends React.Component {
  render() {
    return (
      <Expo.GLView
        ref={(ref) => this._glView = ref}
        style={{ flex: 1 }}
        onContextCreate={this._onGLContextCreate}
      />
    );
  }

  _onGLContextCreate = async (gl) => {
    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;

    const arSession = await this._glView.startARSessionAsync();

    const scene = new THREE.Scene();
    const camera = ExpoTHREE.createARCamera(arSession, width, height, 0.01, 1000);
    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    scene.background = ExpoTHREE.createARBackgroundTexture(arSession, renderer);

    const ambientLight = new THREE.AmbientLight(0xaaaaaa);
    scene.add(ambientLight);

    // //model files
    const model = {
      'artest.obj': require('./models/artest.obj'),
      'artest.mtl': require('./models/artest.mtl'),
    };

    /// Load model
    const mesh = await ExpoTHREE.loadAsync(
      [model['artest.obj'], model['artest.mtl']],
      null,
      name => model[name],
    );

    /// Update size and position
    ExpoTHREE.utils.scaleLongestSideToSize(mesh, 5);
    ExpoTHREE.utils.alignMesh(mesh, { y: 1 });

    mesh.scale.set(0.00001, 0.00001, 0.00001);

    /// Add the mesh to the scene
    scene.add(mesh);

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      gl.endFrameEXP();
    }
    animate();
  }
}

If you would have any input as to what I might be doing wrong, would be great.

[EvanBacon]

ExpoTHREE.loadMtlAsync should fix this

[shuyaoyimei]

Did you add “mtl” to your app.json

how to add “mtl” to app.json, like this ?

"packagerOpts": {
      "assetExts": [
        "dae",
        "obj",
        "mtl",
        "amf",
        "3mf",
        "3ds",
        "jpg",
        "assimp",
        "fbx",
        "pmd",
        "vmd",
        "ply",
        "stl",
        "vtk",
        "vtp",
        "babylon",
        "drc",
        "pcd",
        "pack",
        "bvh",
        "x"
      ]
    },