-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Importing .glb file with useGLTF on ReactNative Expo fails #2700
Comments
GLTFLoader may not decode textures correctly as reported in #1972, but the stack trace I'm seeing here looks to be coming from a non-three element mounted in your app, or coming from the GLTF. |
Hey @CodyJasonBennett , I've got a minimal reproduction here: https://github.com/thiagobrez/expo-useGLTF Basic r3f scene works, but when trying to load a local model (either local or remote URL),
Checklist:
Do you have any insights on this? Thank you in advance! I'd be happy to contribute to the docs if there is any good practice that I'm missing. If you think this issue might be better suited for the drei repo, or even Expo, please let me know! |
I get the same error... |
I have only problems on android to load glbs. With exactly this code from the example (https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide#react-native-support) I receive the error:
I receive the same error if I use the local file path instead of the id. Is there a workaround. It would be very important to solve this. The glb is just a cube - no textures, no animation, ... |
Having the same issue. Please let me know if there is any solution. Thank you so much! |
Same issue here: |
I found this issue resolves if the GLTF path is specified at the file-level instead of the component-level. For example in the migration guide (https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide#react-native-support) it specifies the modelPath var which is consumed in the component.
|
Please provide demo repo of working example. |
Any solution found?? code:: import React, { Suspense } from 'react'; function Model({ url, ...rest }) { export default function Suggestions() { |
I solved this months ago, i am not sure if a remember right, but the reason should be something like the useGLTF(url) cannot locate the glb/glft file path correctly. What I do is that to import the model first, and then pass to the useGLTF() function directly instead of calling Model() to get th url.
|
What versions are you using? I'm dealing with the same problem and this solution doesn't work for me :/ |
#2700 (comment) is correct in that you need to let Metro transform the asset into a valid module reference. The only other valid URLs at runtime would be an absolute, remote path via https. import modelPath from './path/to/model.glb'
function Model() {
const gltf = useGLTF(modelPath)
} Note WRT #2700 (comment), you'll want to load and apply textures separately (via https://github.com/pmndrs/gltfjsx) until |
It's probably worth noting the react-three-fiber react-native quickstart still shows importing a model file directly https://docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native |
That is intentional. I updated it today from the cube example since that workflow is now supported as we implement missing APIs in react-native. |
I don't follow this, what do you mean? Do you mean we no longer need to use gltfjsx? Either way, I don't think react-three-fiber works with React Native at all right now, regardless of gltf #3064 |
Yes embedded textures load since R3F polyfills previously missing APIs needed to unpack textures from GLB, and I continued there WRT emulator not pushing frames. Unfortunately Apple has been breaking their OpenGL code path under XCode so the only option is to test on device until we move to Metal/WebGPU. |
I am facing this issue in 2024 |
It seems that I'm doing everything according to the documentation https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide for React Native Expo.
I have the latest dependencies, just installed everything freshly and overall
@react-three/fiber/native
works great and renders my 3D stuff. It just fails to load.glb
file. What am I doing wrong? Could it be something related to the way expo imports the.glb
file? I have also configured mymetro.config.js
according to the documentationmetro.config.js
My dependencies
Here's a code example that fails
I do have a .glb file in the
./models/fancyModel.glb
which works fine on the web app.The error I'm getting
Thanks
The text was updated successfully, but these errors were encountered: