Can't load OBJ model with expo-three

I’m trying to load OBJ model with MTL and textures using expo-three. The issue is that model is loading without textures and it looks something like this:


Here’s my code for loading OBJ model:

import { ExpoWebGLRenderingContext, GLView } from 'expo-gl';
import { Renderer, TextureLoader } from 'expo-three';
import * as React from 'react';
import { LogBox } from 'react-native';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import {
  AmbientLight,
  Fog,
  GridHelper,
  PerspectiveCamera,
  PointLight,
  Scene,
  SpotLight,
} from 'three';
import { Asset } from 'expo-asset';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';

export default function App() {
  let timeout: any;

  React.useEffect(() => {
    return () => clearTimeout(timeout);
  }, []);

  return (
    <GLView
      style={{ flex: 1 }}
      onContextCreate={async (gl: ExpoWebGLRenderingContext) => {
        const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
        const sceneColor = 0x6ad6f0;

        const renderer = new Renderer({ gl });
        renderer.setSize(width, height);
        renderer.setClearColor(sceneColor);

        const camera = new PerspectiveCamera(70, width / height, 0.01, 1000);
        camera.position.set(2, 5, 5);

        const scene = new Scene();
        scene.fog = new Fog(sceneColor, 1, 10000);
        scene.add(new GridHelper(10, 10));

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

        const pointLight = new PointLight(0xffffff, 2, 1000, 1);
        pointLight.position.set(0, 200, 200);
        scene.add(pointLight);

        const spotLight = new SpotLight(0xffffff, 0.5);
        spotLight.position.set(0, 500, 100);
        spotLight.lookAt(scene.position);
        scene.add(spotLight);

        const asset = Asset.fromModule(model['r2-d2.obj']);
        await asset.downloadAsync();

        const materialAsset = Asset.fromModule(model['r2-d2.mtl']);
        await materialAsset.downloadAsync();

        await Asset.loadAsync([
          model['R2D2_Diffuse.jpg'],
          model['R2D2_Illumination.jpg'],
          model['R2D2_Normal.jpg'],
          model['R2D2_Reflection.jpg'],
          model['R2D2_Specular.jpg'],
        ]);

        const objectLoader = new OBJLoader();
        const materialLoader = new MTLLoader();

        materialLoader.setResourcePath('/assets/r2/');
        const material = await materialLoader.loadAsync(materialAsset.uri);
        material.preload();
        objectLoader.setMaterials(material);

        const object = await objectLoader.loadAsync(asset.uri);

        object.scale.set(0.025, 0.025, 0.025);
        scene.add(object);
        camera.lookAt(object.position);

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

const model = {
  'r2-d2.obj': require('./assets/r2/r2-d2.obj'),
  'r2-d2.mtl': require('./assets/r2/r2-d2.mtl'),
  'R2D2_Diffuse.jpg': require('./assets/r2/R2D2_Diffuse.jpg'),
  'R2D2_Illumination.jpg': require('./assets/r2/R2D2_Illumination.jpg'),
  'R2D2_Normal.jpg': require('./assets/r2/R2D2_Normal.jpg'),
  'R2D2_Reflection.jpg': require('./assets/r2/R2D2_Reflection.jpg'),
  'R2D2_Specular.jpg': require('./assets/r2/R2D2_Specular.jpg'),
};

And here’s my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~40.0.0",
    "expo-asset": "~8.2.1",
    "expo-gl": "^10.1.0",
    "expo-graphics": "^1.1.0",
    "expo-permissions": "~10.0.0",
    "expo-status-bar": "~1.0.3",
    "expo-three": "^5.6.2",
    "expo-three-orbit-controls": "^2.0.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.0.0",
    "three": "^0.125.2",
    "expo-file-system": "~9.3.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

And the path to my folder with obj, mtl and othjer files is root/assets/r2
I’ve also tried to load this using this:

const object = await ExpoTHREE.loadAsync(
  [model['r2-d2.obj'], model['r2-d2.mtl']],
  null,
  (name) => model[name],
);

That didn’t worked too.
I’m running this on Android and my Expo SDK is 40.0.0

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.