Couldn't load texture [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported]

Questions
, ,
1

I am trying to load gltf file on react native expo application.
I used expo-gl view to render the gltf model but this error happens.

ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}

This is the package.json that I used.

"dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "aws-sdk": "^2.1472.0",
    "base-64": "^1.0.0",
    "expo": "~49.0.13",
    "expo-asset": "~8.10.1",
    "expo-av": "~13.4.1",
    "expo-brightness": "~11.4.1",
    "expo-document-picker": "~11.5.4",
    "expo-file-system": "~15.4.5",
    "expo-gl": "~13.0.1",
    "expo-keep-awake": "~12.3.0",
    "expo-linear-gradient": "~12.3.0",
    "expo-screen-orientation": "~6.0.6",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-three": "^7.0.1",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-external-keyboard": "^0.2.8",
    "react-native-navigation-bar-color": "^2.0.2",
    "react-native-paper": "^5.12.3",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-webview": "^13.6.0",
    "three": "0.160.1"
  },

If anyone can help me on that, it would be great.
Thanks.

1 Like
2

better use three-fiber for three in react and react-native. there is little to no sense in imperative three in a reactive context. support for loaders and resources is poor in native because these constructs were never meant to run outside the web and rely on the dom. we have created polyfils for most resources and we have also been contributing with the react team to add missing dom surface api. in fiber you load gltf/glb like on the web and it will work.

import { Canvas } from '@react-three/fiber/native'
import { useGLTF } from '@react-three/drei/native'
import modelPath from './path/to/model.glb'

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

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <Model />

see:

3

If we choose the regular imperative THREE approach, is there a way to benefit from those polyfills? Or is it tangled into the declarative code?