I made a .glb file of human boy mesh by VRoid Studio and saved at a local path, then loaded on a React Native macOS project via BabylonReactNative and it worked.
So I tried same thing on React Native windows project and boy wouldn’t load - complaining about Invalid response for blob.
This is App.tsx that I tried:
import React from 'react';
import { View } from 'react-native';
import { Camera, HemisphericLight, Scene, SceneLoader, Vector3 } from '@babylonjs/core';
import { EngineView, useEngine } from '@babylonjs/react-native';
import '@babylonjs/loaders/glTF';
export default function App() {
const engine = useEngine();
const [camera, setCamera] = React.useState<Camera>();
React.useEffect(() => {
if (engine) {
const scene = new Scene(engine);
scene.createDefaultCamera(true);
scene.activeCamera!.position = new Vector3(5, 0, -1);
setCamera(scene.activeCamera!);
const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
SceneLoader.ImportMeshAsync('', 'file:///C:/Users/user/Desktop/', 'boy.glb', scene)
.then().catch(console.error);
}
}, [engine]);
return (
<View style={{ flex: 1 }}>
<EngineView style={{ flex: 1 }} camera={ camera } />
</View>
);
}
And this is log from Metro:
LOG Running "foo" with {"initialProps":null,"rootTag":11,"fabric":false}
LOG BJS - [12:30:15]: Babylon Native (v5.42.2) launched
WARN Possible Unhandled Promise Rejection (id: 0):
TypeError: Object expected
TypeError: Object expected
at Anonymous function (Unknown script code:124335:15)
at tryCallOne (Unknown script code:33596:7)
at Anonymous function (Unknown script code:33677:7)
at Anonymous function (Unknown script code:35060:9)
at _callTimer (Unknown script code:34939:9)
at _callReactNativeMicrotasksPass (Unknown script code:34984:7)
at callReactNativeMicrotasks (Unknown script code:35190:14)
at __callReactNativeMicrotasks (Unknown script code:3320:11)
at Anonymous function (Unknown script code:3094:11)
at __guard (Unknown script code:3293:13)
Error: ENOENT: no such file or directory, open 'C:\Users\user\Desktop\foo\code'
at Object.openSync (node:fs:603:3)
at Object.readFileSync (node:fs:471:35)
at getCodeFrame (C:\Users\user\Desktop\foo\node_modules\metro\src\Server.js:879:18)
at Server._symbolicate (C:\Users\user\Desktop\foo\node_modules\metro\src\Server.js:962:22)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Server._processRequest (C:\Users\user\Desktop\foo\node_modules\metro\src\Server.js:418:7) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\\Users\\user\\Desktop\\foo\\code'
}
ERROR [Error: Invalid response for blob: (something binary)]
I don’t get it why it tries to find file named code on the project folder, even it surely does not exist…
However, I googled it and found that UWP(which is the base of React Native for Windows) doesn’t support Blob.
but I also found that RNW team had already made a fix for it,
so I think the problem maybe caused by haven’t updating BabylonReactNative for Windows to match that fix, which Instantiates Blob and FileReader modules by default they said.
Which source file is responsible for that?
ping @Cedric - who made latest change on BRN for Windows.
