Expo-three render .glb in ReactNative , get Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported

[gillgong]

[rams12]

@EvanBacon can you please resolve this issue?

[alessandro-bottamedi]

I have the same problem: expo 36 (Bare) with three 0.112 when i try to load a TEXTURIZED GLB it gives me this error but if i try to load one without texture then everything is ok...

[acndur1a]

Any one resolve this?

[acndur1a]

I have the same problem: expo 36 (Bare) with three 0.112 when i try to load a TEXTURIZED GLB it gives me this error but if i try to load one without texture then everything is ok...

@alessandro-bottamedi did you find a solution for this?

[alessandro-bottamedi]

I have the same problem: expo 36 (Bare) with three 0.112 when i try to load a TEXTURIZED GLB it gives me this error but if i try to load one without texture then everything is ok...

@alessandro-bottamedi did you find a solution for this?

I solved it using a react-native-webview, I think expo-gl is not yet mature enough for viewing complex 3d models

[igaln]

Just to add more context, getting this error from.

const mesh = await ExpoTHREE.loadAsync(
  ['some url to a glb file'],
   null,
   imageName => {
       return model[imageName];
   },
  ); 

[igaln]

ok digging more into this, I could not find a working blob loader for Expo, I tried replacing the Three file loader with rn-fetch-blob but that requires for the app to be ejected.

Does anyone know blob loader that works with expo?

[timnlupo]

@alessandro-bottamedi How did you fix using react-native-webview? Is that easily integratable with three.js? Any performance issues?

[cuddeford]

I'm having this problem too. Using the GTLFLoader directly from Three hangs my device and using loadAsync from ExpoTHREE causes this error.

[arberkryeziu]

Facing the same problem while using GTLFLoader

[beauvaisbruno]

Same problem while using GTLFLoader to load .glb files with textures.

[anutting]

same problem using GLTFLoader to load .glb files served by a URL.

[jakubrpawlowski]

Same problem using GTLFLoader, so instead in Blender I exported scene in .glb format unchecking materials and it worked - geometries load correctly. As a temporary workaround assign textures inside your app.

[haydenlinder]

I was able to fix this on web by going into /node_modules/three/jsm/loders/GLTFLoader and just before

new Blob( [ bufferView ] , ... )

do this

var ar = new Uint8Array(bufferView)
new Blob( [ ar ] , ... )

I was able to load the model in RN web but still no luck on iOS.

[mrmattrains]

I am running into this too for Android. Looking t the call stack it looks like it is a react native problem?

@haydenlinder maybe we can try to fix it for the different platforms?

[polymorpher]

I am having the same issue. The work around I am using right now is to re-export the models with "placeholder" materials. In code, I then use GLTFLoader to load that model, and manually setup the materials / texture for all items.

[mrmattrains]

Doing the same thing here... I name the textures the same as the material and the code assigns based on that.

On Wed, Feb 10, 2021 at 11:24 PM Aaron Li [email protected] wrote:

I am having the same issue. The work around I am using right now is to re-export the models with "placeholder" materials. In code, I then use GLTFLoader to load that model, and manually setup the materials / texture for all items.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/expo/expo-three/issues/144#issuecomment-777249152, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABXUJBYN2S2YA3UCVLGR4HTS6OA3DANCNFSM4JHXR44A .

[450Oucema]

Same problem using local .glb with textures inside. But works without any texture..

[Hugyn]

Same issue trying to use GLTFLoader on react native

[hatem-mazid]

I find a way to prevent the issue, make your model without texture, and after you loaded the model add the texture manually:

    const asset= Asset.fromModule(require("../assets/model.gltf"));
    new GLTFLoader().load(
      asset.uri,
      (gltf) => {
        // This texture will be immediately ready but it'll load asynchronously
        const texture = new TextureLoader().load(require("../assets/image.png"));
        model = gltf.scene;
        model.position.z = -4;
        model.traverse((child) => {
          if (child instanceof Mesh)
            child.material = new THREE.MeshBasicMaterial({ map: texture });
        });
        scene.add(model);
      },
      null,
      (error) => {
        console.log("An error happened", error);
      }
    );

[benAkin]

@hatem-mazid I am running into this issue and have a few quick questions. Are you doing this loading outside or inside of the component? Where are you getting scene for the line scene.add(model)? And is model defined before this or did you just leave out the const when defining model?

[CarsoteCosmin]

So, is there a fix? I have the same problem.

[mrmattrains]

Yea, that's what I ended up doing... or something to that effect.

I also ended up having animation problems later too. But could tell if it was the export from the app or the import.

Matt

On Tue, Aug 10, 2021, 4:34 AM hatem mazid @.***> wrote:

I find a way to prevent the issue, make your model without texture, and after you loaded the model add the texture manually:

const asset= Asset.fromModule(require("../assets/model.gltf"));
new GLTFLoader().load(
  asset.uri,
  (gltf) => {
    // This texture will be immediately ready but it'll load asynchronously
    const texture = new TextureLoader().load(require("../assets/image.png"));
    model = gltf.scene;
    model.position.z = -4;
    model.traverse((child) => {
      if (child instanceof Mesh)
        child.material = new THREE.MeshBasicMaterial({ map: texture });
    });
    scene.add(model);
  },
  null,
  (error) => {
    console.log("An error happened", error);
  }
);

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/expo/expo-three/issues/144#issuecomment-895954877, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABXUJB4A3ZNPLJ4PKBT63YLT4EFGDANCNFSM4JHXR44A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

[EvanBacon]

Blob is part of React Native, React Native doesn't support ArrayBuffers cite. You could perhaps create a JSI module which injects ArrayBuffer support into the runtime, this might work since react-native is checking the global for the existence of the types.

Regardless, it's out of scope for the expo-three project at the moment since this is an issue that is pretty core to React Native.

[Zaki-Dz]

I am using blob to create a downloadable file like that:

import { saveAs } from "file-saver";

const file = new Blob([buffer], { type: EXCEL_TYPE });

saveAs(file, "example.xlsx");

it's working fine with react js, but in react native i got this error

Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported

[antoine1anthony]

I am using blob to create a downloadable file like that:

import { saveAs } from "file-saver";



const file = new Blob([buffer], { type: EXCEL_TYPE });



saveAs(file, "example.xlsx");

it's working fine with react js,

but in react native i got this error

Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported

Comment above yours from @EvanBacon answers your question. You'll need to make a JSI that adds ArrayBuffer to react native.

[bujoralexandru]

@antoine1anthony can you point us into some sort of a direction regarding this JSI? I tried looking around for something like this, but unfortunately nothing seems to suffice.

[hjopel]

If anyone needs an example of how to do this by using the exported textures from the model and loading it afterwards: https://github.com/hjopel/r3f-native-starter