I am working on a project where I would need to display 3d avatars in react native. When adding my .glb model using GLTFLoader imported from three/examples/jsm/loaders/GLTFLoader, I received a FileReader.readAsArrayBuffer is not implemented error.
The error also happens when I use ExpoTHREE.loadAsync to load my model. Is there any way I can load my .glb model into my app?
The following is my code
import { ExpoWebGLRenderingContext, GLView } from "expo-gl";
import ExpoTHREE, { Renderer, TextureLoader } from "expo-three";
import { Asset } from "expo-asset";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as React from "react";
import {
AmbientLight,
BoxBufferGeometry,
Fog,
GridHelper,
Mesh,
MeshStandardMaterial,
PerspectiveCamera,
PointLight,
Scene,
SpotLight,
} from "three";
export default function App() {
let timeout;
React.useEffect(() => {
// Clear the animation loop when the component unmounts
return () => clearTimeout(timeout);
}, []);
return (
<GLView
style={{ flex: 1 }}
onContextCreate={async (gl) => {
try {
const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
const sceneColor = 0x6ad6f0;
// Create a WebGLRenderer without a DOM element
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();
//! Doesn't work
// const asset = Asset.fromModule(require("./assets/avatar.glb"));
// await asset.downloadAsync();
// const loader = new GLTFLoader();
// loader.load(asset.localUri, (group) => {
// console.log(group);
// // scene.add(group.scene)
// });
function update() {}
// Setup an animation loop
const render = () => {
timeout = requestAnimationFrame(render);
update();
renderer.render(scene, camera);
gl.endFrameEXP();
};
render();
} catch (error) {
console.log(error);
}
}}
/>
);
}
Dependencies:
"dependencies": {
"@react-three/fiber": "^7.0.29",
"base64-arraybuffer": "^1.0.2",
"expo": "~45.0.0",
"expo-file-system": "~14.0.0",
"expo-gl": "~11.3.0",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-three": "^6.1.0",
"react": "^17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-dotenv": "^3.3.1",
"react-native-unimodules": "^0.14.10",
"react-native-web": "0.17.7",
"three": "^0.141.0"
},
