Failure to load GLB file...

[kafeinberkcolakk]

👋 hi there, for issues that aren't that pressing, that could be related to threejs etc, please consider github discussions.

The scene I try to load as GLB in React-native does not open. The first method I tried also gives an error Cannot read properties of undefined (reading 'S') Evaluating @react-three/fiber.js. In the second code, there is no error, I press base64 in the console and nothing comes to the screen.

Example code 1:

`import { useGLTF } from '@react-three/drei'; import modelPath from './assets/model.glb'; // Metro'da require yerine doğrudan import kullan

const { scene } = useGLTF(modelPath);`

Example code 2: `import React from "react"; import { GLView } from "expo-gl"; // Doğru import import * as THREE from "three"; import { Asset } from "expo-asset"; import * as FileSystem from "expo-file-system"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const MyScene = () => { const onContextCreate = async (gl: any) => { const renderer = new THREE.WebGLRenderer({ context: gl, alpha: true, antialias: true, });

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  70,
  gl.drawingBufferWidth / gl.drawingBufferHeight,
  0.1,
  100
);
camera.position.z = 5;

try {
  const asset = await Asset.fromModule(require("./assets/classroom.glb")).downloadAsync() as any;
  const base64String = await FileSystem.readAsStringAsync(asset.localUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  const binaryString = atob(base64String);
  const buffer = new ArrayBuffer(binaryString.length);
  const view = new Uint8Array(buffer);
  for (let i = 0; i < binaryString.length; i++) {
    view[i] = binaryString.charCodeAt(i);
  }

  const loader = new GLTFLoader();
  loader.parse(
    buffer,
    "",
    (gltf) => {
      scene.add(gltf.scene);
      console.log("GLB dosyası başarıyla yüklendi!");
    },
    (error) => {
      console.error("GLB yükleme hatası:", error);
    }
  );
} catch (error) {
  console.error("Asset yükleme hatası:", error);
}

const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

const render = () => {
  requestAnimationFrame(render);
  renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
  renderer.render(scene, camera);
  gl.endFrameEXP(); // Expo GL için gerekli
};
render();

};

return <GLView style={{ flex: 1 }} onContextCreate={onContextCreate} />; };

export default MyScene;`

Glb file I tried: https://github.com/kafeinberkcolakk/t/blob/main/school_classroom.glb

[Thangouliou]

i have the same problem with me .glb file it cant be load is this a bug??

[mzavattaro]

Same issue here with NextJS 15.3.1 and React 19.1. Works on local dev but if I build a production version, the .glb file does not load and console errors: Uncaught TypeError: Cannot set properties of undefined (setting 'element') Uncaught TypeError: Cannot convert undefined or null to object

[frossi85]

I am experiencing the same issue after upgrading 8.16.8 to 9.1.2. The same code was working before.