Error loading GLB file but GLTF file can be loaded correctly

Hello,
I call Babylon through Vue and import the required resources.

import * as BABYLON from ‘babylonjs’;
import ‘babylonjs-loaders’;

The GLTF model was successfully loaded and displayed on the web page, but an error was reported when the GLB format was loaded.
Here’s the error:

babylon.js?633b:1

   BJS - [16:01:08]: Unable to load from static/gltftest/Tile_+001_+001.glb: RangeError: Offset is outside the bounds of the DataView

This GLB model loads correctly on the sandbox, would be appreciated if anyone could figure out how to fix it.

Hello and welcome to the Babylon community! Can you share with us your project and the model? We can’t say much on what is going on otherwise.

I really appreciate your help.Here is the model.
https://drive.google.com/file/d/1iIWZjm6CfUGxXbeMk_yA_lANhFsmv8hy/view?usp=sharing

My project:

<template>
  <div class="SanxiaModel">
    <!-- <div id="sanxiaModel"></div> -->
    <canvas id="sanxiaModel" style="width: 100%;height: 100%;"></canvas>

  </div>
</template>

<script>
  import * as BABYLON from 'babylonjs';
  import 'babylonjs-loaders';
  import * as GUI from 'babylonjs-gui';
  export default {
    name: 'SanxiaModel',

    data() {
      return {

      }
    },
    mounted() {
      this.init();
    },
    methods: {

      init() {
        // Get the canvas DOM element
        var canvas = document.getElementById('sanxiaModel');
        // Load the 3D engine
        var engine = new BABYLON.Engine(canvas, true, {
          preserveDrawingBuffer: true,
          stencil: true
        });
        // CreateScene function that creates and return the scene
        var createScene = function() {
          const scene = new BABYLON.Scene(engine);
          const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON
            .Vector3(0, 0, 2000));
          camera.setTarget(BABYLON.Vector3.Zero());
          camera.attachControl(canvas, true);
          const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
          var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
          BABYLON.SceneLoader.ImportMesh("","static/gltftest/","Tile_+001_+001.glb",scene,function(mesh){
            console.log(mesh);
          })
          return scene;
        }
        // call the createScene function
        var scene = createScene();
        // run the render loop
        engine.runRenderLoop(function() {
          if (scene) {
            scene.render();
          }
        });
        // the canvas/window resize event handler
        window.addEventListener('resize', function() {
          engine.resize();
        });
      },
    }
  }
</script>

The model link doesn’t have access permissions :frowning:

Try this one
https://drive.google.com/file/d/1ElRXRFlKYAjDuUQF_9RbJfmvNwZWqXw2/view?usp=sharing

Your glb is working fine in the sandbox (sandbox.babylonjs.com) so you should try to update to the latest babylon version ?

But I’m using the latest version

I recreated a Vue project with only the BabylonJS dependency package in it, and it was able to load my GLB model successfully. I think the previous error was due to the dependency package conflict.

Possibly, if you had @bablyon/* and babylon packages installed together this will cause conflicts.

But maybe not. I can’t find any conflicting packages from the original project :dizzy_face: :smiling_face_with_tear:


That seems to be no problem
And I found that files with a.glb suffix would get an RangeError regardless of whether the file existed.

That’s pretty strange… :thinking: Can you share your complete project? A github repository would be great.

1 Like

This is my complete project:https://github.com/xwmrzz/sanxia.git.
The path to the model folder is public/static/gltftest and the path to the component is src/components/Model/ModelTest.vue

Sorry, but I’m not able to run your project, it seems most packages are very behind in version:

But I’m able to load your model normally on the Playground: Babylon.js Playground (babylonjs.com), so it really looks like there’s something on how your project is set up.

1 Like

Anyway, thank you very much. I’ll try to find out what went wrong.

1 Like

This is very strange, the problem seems to be in the mocking.js file in the src folder. Normally this file has nothing to do with model loading, but when I delete this file my glb model loads successfully.

1 Like