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