react-three-fiber: Importing .glb file with useGLTF on ReactNative Expo fails

Having the same issue. Please let me know if there is any solution. Thank you so much!

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 updated it today from the cube example

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 https://github.com/pmndrs/react-three-fiber/discussions/3064

Any solution found?? I’m also trying to use useGLTF but its not working code:: import React, { Suspense } from ‘react’; import { useFrame, Canvas } from ‘@react-three/fiber/native’; import { useGLTF } from ‘@react-three/drei/native’; import Bedmodelpath from ‘…/…/…/assets/Airmax/bed1.glb’; function Model({ url, …rest }) { const { scene } = useGLTF(url) useFrame(() => (scene.rotation.y += 0.01)) return <primitive {…rest} object={scene} /> } export default function Suggestions() { return ( <Canvas gl={{ physicallyCorrectLights: true }} camera={{ position: [-6, 0, 16], fov: 36 }}> <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} /> <directionalLight intensity={0.8} position={[-6, 2, 2]} /> ) }

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.

import React, { useRef } from "react";
import { useGLTF, useFBX, useAnimations } from "@react-three/drei/native";
import xbot from "./assets/models/Xbot.glb"; // the model path in your directory

export default function CapmiAvatar(props) {
    const group = useRef();

    const { nodes, materials } = useGLTF(xbot);
    return (
        <group ref={group} {...props} dispose={null}>
            <group name='Scene'>
                <group name='Armature' scale={0.01}>
                    <primitive object={nodes.mixamorigHips} />
                    <skinnedMesh
                        name='Beta_Joints'
                        geometry={nodes.Beta_Joints.geometry}
                        material={materials.Beta_Joints_MAT}
                        skeleton={nodes.Beta_Joints.skeleton}
                    />
                    <skinnedMesh
                        name='Beta_Surface'
                        geometry={nodes.Beta_Surface.geometry}
                        material={materials["asdf1:Beta_HighLimbsGeoSG2"]}
                        skeleton={nodes.Beta_Surface.skeleton}
                    />
                </group>
            </group>
        </group>
    );

What versions are you using? I’m dealing with the same problem and this solution doesn’t work for me 😕

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.

import modelPath from './assets/model.glb'

function Model(props) {
  const { scene } = useGLTF(modelPath)
  return <primitive {...props} object={scene} />
}

I get the same error…

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), useGLTF fails with

Possible Unhandled Promise Rejection (id: 0):
Error: Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL"

Checklist:

• Importing from @react-three/fiber/native, @react-three/drei/native
• Configured metro according to docs
• Tried loading model locally using Expo’s Asset.fromModule
• Tried loading model from remote pmndrs’ market URL
• Explicitly passing a meshStandardMaterial to prevent the material bug in expo-gl

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!