search

CodyJasonBennett / r3f-native-starter

PR here: https://github.com/pmndrs/react-three-fiber/pull/1699
https://gn4s0.csb.app/
46 stars 9 forks source link

Opening GLTF Crash the app #3

Closed 0xGoenka closed 2 years ago

0xGoenka commented 2 years ago

Hi.

I've cloned this repo, and just added gltf file to assets then only modified the glb file with a gltf file found here =>

Then this error pop => 

The above error occurred in the <Model> component:

Model@http://192.168.0.144:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:115357:19
Suspense
Suspense
ErrorBoundary@http://192.168.0.144:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:185676:22
Provider@http://192.168.0.144:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:186129:22

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
at node_modules/react-reconciler/cjs/react-reconciler.development.js:9790:6 in logCapturedError
at node_modules/react-reconciler/cjs/react-reconciler.development.js:9858:22 in callback
at node_modules/react-reconciler/cjs/react-reconciler.development.js:4395:2 in callCallback
at node_modules/react-reconciler/cjs/react-reconciler.development.js:4416:20 in commitUpdateQueue
at node_modules/react-reconciler/cjs/react-reconciler.development.js:14830:29 in commitLayoutEffectOnFiber
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16239:33 in commitLayoutMountEffects_complete
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16225:39 in commitLayoutEffects_begin
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16163:27 in commitLayoutEffects
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18817:23 in commitRootImpl
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18683:18 in commitRoot
at node_modules/react-reconciler/cjs/react-reconciler.development.js:17877:18 in finishConcurrentRender
at node_modules/react-reconciler/cjs/react-reconciler.development.js:17812:26 in performConcurrentWorkOnRoot

Could not load 1: THREE.GLTFLoader: Failed to load buffer "scene.bin".

This error is located at:
    in Unknown (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.js:167:4 in ErrorBoundary#componentDidCatch
at node_modules/react-reconciler/cjs/react-reconciler.development.js:9871:6 in callback
at node_modules/react-reconciler/cjs/react-reconciler.development.js:4395:2 in callCallback
at node_modules/react-reconciler/cjs/react-reconciler.development.js:4416:20 in commitUpdateQueue
at node_modules/react-reconciler/cjs/react-reconciler.development.js:14830:29 in commitLayoutEffectOnFiber
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16239:33 in commitLayoutMountEffects_complete
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16225:39 in commitLayoutEffects_begin
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16163:27 in commitLayoutEffects
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18817:23 in commitRootImpl
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18683:18 in commitRoot
at node_modules/react-reconciler/cjs/react-reconciler.development.js:17877:18 in finishConcurrentRender
at node_modules/react-reconciler/cjs/react-reconciler.development.js:17812:26 in performConcurrentWorkOnRoot

The above error occurred in the <ErrorBoundary> component:

ErrorBoundary@http://192.168.0.144:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:185676:22
Provider@http://192.168.0.144:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:186129:22

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at node_modules/react-reconciler/cjs/react-reconciler.development.js:9790:6 in logCapturedError
at node_modules/react-reconciler/cjs/react-reconciler.development.js:9823:20 in update.callback
at node_modules/react-reconciler/cjs/react-reconciler.development.js:4395:2 in callCallback
at node_modules/react-reconciler/cjs/react-reconciler.development.js:4416:20 in commitUpdateQueue
at node_modules/react-reconciler/cjs/react-reconciler.development.js:14857:29 in commitLayoutEffectOnFiber
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16239:33 in commitLayoutMountEffects_complete
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16225:39 in commitLayoutEffects_begin
at node_modules/react-reconciler/cjs/react-reconciler.development.js:16163:27 in commitLayoutEffects
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18817:23 in commitRootImpl
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18683:18 in commitRoot
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18098:12 in performSyncWorkOnRoot
at node_modules/react-reconciler/cjs/react-reconciler.development.js:2746:29 in flushSyncCallbacks
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18931:20 in commitRootImpl
at node_modules/react-reconciler/cjs/react-reconciler.development.js:18683:18 in commitRoot
at node_modules/react-reconciler/cjs/react-reconciler.development.js:17877:18 in finishConcurrentRender
at node_modules/react-reconciler/cjs/react-reconciler.development.js:17812:26 in performConcurrentWorkOnRoot

Could not load 1: THREE.GLTFLoader: Failed to load buffer "scene.bin".
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

THREE.GLTFLoader: Couldn't load texture, textures/World_ap_baseColor.jpeg
at node_modules/three-stdlib/index.cjs.js:1:992624 in Promise.resolve.then.then._catch$argument_0

`

CodyJasonBennett commented 2 years ago

I need to document this, but GLTFLoader will spawn workers if you use DRACO and try to use unsupported browser APIs if you load unpacked GLTFs.

You'll have to pack your model since we can't change GLTFLoader's behavior.

thomas-coldwell commented 2 years ago

Just for other people who find their way here and are trying to use a GLTF file you can do the following to convert your GLTF model into a GLB (the --transform option will produce the .glb model) https://github.com/pmndrs/gltfjsx#%EF%B8%8F-auto-transform-compression-resize:

npx gltfjsx model.gltf --types --transform

Don't forget to add the /native onto the end of the imports in the generated Model.tsx file :)

CodyJasonBennett commented 2 years ago

The latest beta should support any GLTF workflow but we're sorting out some issues with arraybuffers (for packed/inlined textures) with react-native core.

Sorting this out with their team and investigating a workaround if there's no quick solution. I've included some light polyfills to implement some missing/broken behavior for the time being.