I’m trying to create a react-native apps with three js using expo-gl, expo-three frameworks.
Following is the list of imports…
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl';
import ExpoTHREE, { Renderer, TextureLoader } from 'expo-three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import * as React from 'react';
import {
AmbientLight,
HemisphereLight,
BoxBufferGeometry,
Fog,
GridHelper,
Mesh,
MeshStandardMaterial,
PerspectiveCamera,
PointLight,
Scene,
SpotLight,
Camera,
InstancedMesh,
} from 'three';
import OrbitControlsView from 'expo-three-orbit-controls';
Apart from the basic scene, camera and light setup I’m trying to load a glb model using the ExpoTHREE.loadAsync method as below…
const loadGlb = async ()=>{
const obj = await ExpoTHREE.loadAsync(
[require('./assets/suzanne.glb')],
null,
null}).
then((e)=>{
scene.add(e.scene);
e.scene.traverse((f)=>{if(f.isMesh){f.material = new THREE.MeshNormalMaterial();}});
})
.catch((err)=>{console.log(err)});
}
loadGlb();
Using the ref: expo-three - npm
The model loads when I run the code on the desktop browser but not on my android phone using expo app. Please let me know what am I doing wrong.
You can access the app here Expo