Unsupported glTF-Binary header: Expected “%s” to be “%s”

Questions
, , , ,
1

image
I receive this error when trying to import any .glb file. I have tried searching for a solution, but there is only one other forum post mentioning this and I can’t say it helps me.

(The .obj file in the code loads just fine)

Some general forum posts I have come across trying to find a solution have mentioned the file being loaded as the wrong type. Here is my network tab:

image
image793×169 8.64 KB

Here are 2 files I tried:
IIqYD6NmbMBg_MHphQqssaKlpeaN9rpF.glb (1.2 MB)
bluesword.glb (14.7 KB)

Here is my code:

	<head>
	</head>
	<body style="">
    <canvas id="avatarCanvas"></canvas>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
		<script src="/include/three.min.js"></script>
		<script src="/include/OBJLoader.js"></script>
        <script src="https://unpkg.com/three@0.85.0/examples/js/loaders/GLTFLoader.js"></script>
<script>

var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('avatarCanvas'), preserveDrawingBuffer: true, alpha: true, antialias: true});
renderer.setSize( 500, 500 );
renderer.setClearColor( 0x000000, 0 );

var scene = new THREE.Scene();
//scene.background = new THREE.Color( 0x121212 );

var camera = new THREE.PerspectiveCamera( 60, 500/500, 0.1, 1000 );

const alight = new THREE.AmbientLight( 0x919191 ); // soft white light
scene.add( alight );
const plight = new THREE.PointLight( 0xf2f2f2, 1, 200 );
plight.position.set( 50, 50, 50 );
scene.add( plight );


var objLoader = new THREE.OBJLoader();
objLoader.setPath('');

// ADD HEAD
objLoader.load( 
    "/assets/head.obj",
    function (geometry) {
      geometry.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          child.material.color.setHex(0xeaeaea);
        }
      });
      geometry.position.y = 1.5;
      geometry.rotation.y = 3.14159;
      scene.add(geometry);
});

function loadGLB(modelPath) {
            const glbLoader = new THREE.GLTFLoader();

            glbLoader.load(modelPath, (gltf) => {
                const model = gltf.scene;

                model.position.set(0, 0, 0);
                model.scale.set(1, 1, 1);
                model.rotation.set(0, 0, 0);

                scene.add(model);
            });
        }

loadGLB('/my/test.glb');

var dun = 0;
THREE.DefaultLoadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
    render();
    dun += 1;
};

camera.position.x = -2.5; camera.position.y = 2; camera.position.z = 6;
camera.lookAt(new THREE.Vector3(0,-0.3,0));
camera.zoom = 1.1;
camera.updateProjectionMatrix();

function render() {
	renderer.render(scene, camera);
};
2

What version of Three are you using?

you are importing version 0.85.0 of the GLTFLoader.

It should be the same version as the Three that you are importing.

Anyway, 0.85.0 is quite old. Maybe it doesn’t support something in your models

3

three.js r85 predates the release of the glTF 2.0 file format. I don’t recall how far along in implementation we were at the time, but in any case I would recommend updating to a more recent version of three.js as @seanwasere suggests.

4

Thanks @donmccurdy @seanwasere

I’ve changed my script to use r155. Now there are no errors thrown, but GLTFs still won’t load. Guess I’ll still have to work on figuring it out! But it’s good progress now that I know r85 would not have even supported gLTF 2.0

5

But in r155 the error remains the same?