Hello everyone!
I am trying to load an online 3D model to view in my react-native app. I tried to copy code from this sample repo but the model is not showed and I get this warning:
RuntimeError: Unable to load from https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF/BoxAnimated.gltf: LoadFileError: undefined is not a function
at construct (native)
at Wrapper (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:23483:64)
at construct (native)
at _createSuperInternal (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:359983:322)
at apply (native)
at BaseError (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:359994:26)
at construct (native)
at _createSuperInternal (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:359983:322)
at call (native)
at RuntimeError (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:360027:27)
at errorHandler (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:406658:111)
at errorCallback (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:406368:20)
at anonymous (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:359660:14)
at handleError (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:359735:18)
at onReadyStateChange (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=io.stackdefi.wallet&modulesOnly=false&runModule=true:359785:28)
package.json:
{
"name": "stackfiwallet",
"version": "1.0.0",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"react-devtools": "react-devtools"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.19.1",
"@babylonjs/core": "^5.20.0",
"@babylonjs/loaders": "^5.20.0",
"@babylonjs/react-native": "^1.3.2",
"@babylonjs/react-native-iosandroid-0-69": "^1.3.5",
"@msgpack/msgpack": "^2.8.0",
"@react-native-async-storage/async-storage": "^1.17.10",
"@react-native-clipboard/clipboard": "^1.11.1",
"@react-native-community/netinfo": "^9.3.2",
"@react-native-community/viewpager": "^5.0.11",
"@react-native-firebase/app": "^15.6.0",
"@react-native-firebase/messaging": "^15.6.0",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/material-top-tabs": "^6.2.4",
"@react-navigation/native": "^6.0.13",
"@react-navigation/stack": "^6.3.1",
"@reduxjs/toolkit": "^1.8.5",
"@storybook/react-native": "^5.3.25",
"@walletconnect/client": "^1.8.0",
"algosdk": "1.13.1",
"apisauce": "^2.1.6",
"bignumber.js": "^9.1.0",
"crypto-browserify": "^3.12.0",
"deprecated-react-native-prop-types": "^2.3.0",
"formik": "^2.2.9",
"i18n-js": "^4.1.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"ramda": "^0.28.0",
"random-words": "^1.2.0",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-camera": "^4.2.1",
"react-native-crypto": "^2.2.0",
"react-native-elements": "^3.4.2",
"react-native-fast-image": "^8.6.1",
"react-native-gesture-handler": "^2.6.2",
"react-native-get-random-values": "^1.8.0",
"react-native-keychain": "^8.1.1",
"react-native-linear-gradient": "^2.6.2",
"react-native-localization": "^2.3.1",
"react-native-modal": "^13.0.1",
"react-native-pager-view": "^6.0.0",
"react-native-paper": "^4.12.4",
"react-native-permissions": "^3.6.1",
"react-native-qrcode-scanner": "^1.5.5",
"react-native-root-toast": "^3.4.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-native-svg": "^12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-toast-message": "^2.1.5",
"react-native-vector-icons": "^9.2.0",
"react-navigation": "^4.4.4",
"react-redux": "^8.0.4",
"readable-stream": "^4.2.0",
"stream-browserify": "^3.0.0",
"string_decoder": "^1.3.0",
"text-encoding": "^0.7.0",
"twrnc": "^3.4.0",
"url": "^0.11.0",
"vm-browserify": "^1.1.2",
"yup": "^0.32.11"
},
"devDependencies": {
"@babel/core": "^7.19.1",
"@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@tradle/react-native-http": "^2.0.1",
"@tsconfig/react-native": "^2.0.2",
"@types/i18n-js": "^3.8.3",
"@types/jest": "^29.0.3",
"@types/react": "^18.0.21",
"@types/react-native": "^0.70.0",
"@types/react-redux": "^7.1.24",
"@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.38.1",
"@typescript-eslint/parser": "^5.38.1",
"autoprefixer": "^10.4.12",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-rewrite-require": "^1.14.5",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"dns.js": "^1.0.1",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.0.0",
"eslint-plugin-standard": "^5.0.0",
"events": "^3.3.0",
"https-browserify": "^1.0.0",
"jest": "^26.6.3",
"jetifier": "^2.0.0",
"metro-react-native-babel-preset": "^0.72.1",
"npm-run-all": "^4.1.5",
"patch-package": "^6.4.7",
"path-browserify": "^1.0.1",
"postcss": "^8.4.16",
"postinstall-prepare": "^2.0.0",
"prettier": "^2.7.1",
"react-devtools": "^4.26.0",
"react-devtools-core": "^4.26.0",
"react-native-level-fs": "^3.0.1",
"react-native-randombytes": "^3.6.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-udp": "^4.1.5",
"react-test-renderer": "18.1.0",
"rimraf": "^3.0.2",
"rn-nodeify": "^10.3.0",
"solidarity": "^3.0.4",
"tailwindcss": "^3.1.8",
"timers-browserify": "^2.0.12",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"react-native": {
"zlib": "browserify-zlib",
"console": "console-browserify",
"constants": "constants-browserify",
"crypto": "react-native-crypto",
"dns": "dns.js",
"domain": "domain-browser",
"http": "@tradle/react-native-http",
"https": "https-browserify",
"path": "path-browserify",
"querystring": "querystring-es3",
"fs": "react-native-level-fs",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"dgram": "react-native-udp",
"stream": "stream-browserify",
"timers": "timers-browserify",
"tty": "tty-browserify",
"vm": "vm-browserify",
"tls": false
},
"browser": {
"zlib": "browserify-zlib",
"console": "console-browserify",
"constants": "constants-browserify",
"crypto": "react-native-crypto",
"dns": "dns.js",
"domain": "domain-browser",
"http": "@tradle/react-native-http",
"https": "https-browserify",
"path": "path-browserify",
"querystring": "querystring-es3",
"fs": "react-native-level-fs",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough",
"dgram": "react-native-udp",
"stream": "stream-browserify",
"timers": "timers-browserify",
"tty": "tty-browserify",
"vm": "vm-browserify",
"tls": false
}
}
code:
const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
const engine = useEngine();
const [camera, setCamera] = useState<Camera>();
const [xrSession, setXrSession] = useState<WebXRSessionManager>();
const [trackingState, setTrackingState] = useState<WebXRTrackingState>();
const [scene, setScene] = useState<Scene>();
const onToggleXr = useCallback(() => {
(async () => {
if (xrSession) {
await xrSession.exitXRAsync();
} else {
if (scene !== undefined) {
const xr = await scene.createDefaultXRExperienceAsync({
disableDefaultUI: true,
disableTeleportation: true,
});
const session = await xr.baseExperience.enterXRAsync(
'immersive-ar',
'unbounded',
xr.renderTarget,
);
setXrSession(session);
session.onXRSessionEnded.add(() => {
setXrSession(undefined);
setTrackingState(undefined);
});
setTrackingState(xr.baseExperience.camera.trackingState);
xr.baseExperience.camera.onTrackingStateChanged.add(
newTrackingState => {
setTrackingState(newTrackingState);
},
);
}
}
})();
}, [scene, xrSession]);
useEffect(() => {
if (engine) {
const url =
'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF/BoxAnimated.gltf';
SceneLoader.LoadAsync(url, undefined, engine).then(loadScene => {
setScene(loadScene);
loadScene.createDefaultCameraOrLight(true, undefined, true);
(loadScene.activeCamera as ArcRotateCamera).alpha += Math.PI;
// (loadScene.activeCamera as ArcRotateCamera).radius = 10;
setCamera(loadScene.activeCamera!);
});
}
}, [engine]);
return (
<>
<View style={props.style}>
<Button
title={xrSession ? 'Stop XR' : 'Start XR'}
onPress={onToggleXr}
/>
<View style={{flex: 1}}>
<EngineView camera={camera} displayFrameRate={true} />
</View>
</View>
</>
);
};
Could someone point me what is wrong here please?
Thank you for any replies, I appreciate the time any of you took to help me!