React Native, running on my Android phone. Extensions .obj with .mtl works but not .glb?

[margaritisarg]

So I am running react native on my andriod phone and I have a canvas with a car object that's an .obj extension and I am able to load this fine. However, I have another object that is a .glb extension and it is my chicken component but this does not render and gives me an error.

The code for my app is:

import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import Car from './components/Objects/Car';
import Chicken from './components/Objects/Chicken';

export default function App() {

  return (
    <Canvas camera={{position: [0,0,4], fov: 100, near:0.1, far:1000}}>
      <pointLight color="white" position={[20,30,5]} intensity={1}/>    
     
      <Suspense fallback={null}>
        <Car position={[0,0,0]}/>
        <Chicken position={[0,-1,0]}/>
      </Suspense> 
    </Canvas>
  )
}

The code for my car component that works fine is:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { useLoader } from '@react-three/fiber';
import { useRef } from 'react';

const Car = ({position}) => {
  const mesh = useRef();

  const objectMaterial = useLoader(MTLLoader, require('../../OBJAssests/car.mtl'));
  const objectStructure = useLoader(OBJLoader, require('../../OBJAssests/car.obj'), (loader) => {
    objectMaterial.preload();
      loader.setMaterials(objectMaterial)
    }
  )
    
    return(
        <mesh position={position} ref={mesh} rotation={[.1, .5, 0]} scale={[1, 1, 1]}>
          <primitive object={objectStructure.clone()}/>
        </mesh>
    )
}

export default Car

The code that does not work is my chicken component which is an .glb extension:

import { useLoader } from '@react-three/fiber';
import { useRef } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const Chicken = ({position}) => {
  const mesh = useRef();
  const gltf = useLoader(GLTFLoader, require('../../OBJAssests/ChickenGLB/Chicken.glb'))
  
  return (
    <mesh position={position} ref={mesh} scale={[0.001, 0.001, 0.001]}> 
      <primitive object={gltf.scene.clone()}/> 
    </mesh>
    )
}

export default Chicken

My package.json file has the dependencies:

  "dependencies": {
    "@react-three/fiber": "^8.12.2",
    "expo": "~48.0.15",
    "expo-file-system": "~15.2.2",
    "expo-gl": "~12.4.0",
    "expo-status-bar": "~1.4.4",
    "expo-three": "^7.0.0",
    "react": "18.2.0",
    "react-native": "0.71.7",
    "three": "^0.151.3"
  },

I am not 100% sure as to why this isn't working. I have seen online that it is something to do with andriod bundling?
When I run the app on my phone, I do get a render error which states coul not load 3: property TextDecoder does'nt exists

[beeboopx]

I'm getting this same error about TextDecoder on iOS too.

React Native (New Fabric Architecture), Expo GL, React Three Fiber, React Three Drei.

"@react-three/drei": "9.64.0",
"@react-three/fiber": "8.12.0",
"@types/three": "0.150.1",
"expo-gl": "12.4.0",
"three": "0.151.3",
"react": "18.2.0",
"react-native": "0.71.7",

Weird because i updated my package.json to a known good working state of the above library version combos, but this new error still pops up.

Does it have something to do with the Draco Loader CDN? Besides this, which is dynamically loaded from a URL, i don't understand how there could have been anything changed related to TextDecoder compared to when it was working a couple weeks ago with same deps.

[CodyJasonBennett]

This comes from three-stdlib that Drei uses, which I updated for compatibility here (try a clean install). Inlined textures still don't work because of missing APIs in react-native, although we're coming close to resolving that in #1972, my latest comments outline workarounds and previous patches for a proper fix.