Unable to load 'GLTFLoader.js'

Questions
#1

I was unable to load GLTFLoader.js. Wasn’t able to see the GLTFLoader.js on source in developer tools in Chrome browser.

Error: Uncaught TypeError: THREE.GLTFLoader is not a constructor in .html file in line var loader = new THREE.GLTFLoader();

<html>
<head>
    <title>threejs - basic3</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="js/three.min.js"></script>
    <script scr="js/three.js"></script>
    <script scr="js/GLTFLoader.js"></script>
    <script src="js/blender1.gltf"></script>
    <script>
        var renderer, scene, camera, myCanvas = document.getElementById('myCanvas'), geometry;

        //renderer
        var renderer = new THREE.WebGLRenderer({ canvas: myCanvas, antialias: true });
        renderer.setClearColor(0x000000);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 300, 10000);

        //SCENE
        var scene = new THREE.Scene();

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

        var light2 = new THREE.PointLight(0xffffff, 0.5);
        scene.add(light2);

        var obj;
        var loader = new THREE.GLTFLoader();
        loader.load('blender1.gltf', function (geometry, materials) {
            obj = new THREE.Mesh(geometry, materials);
            scene.add(obj);
            obj.position.z = -6;
            obj.rotation.z = 0.3;
        });


        //RENDER LOOP
        render();
        function render() {

            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
    </script>
</body>
</html>
#4 
<script src="js/three.min.js"></script>
<script scr="js/three.js"></script>

You include three.js two times. One time is sufficient.

<script src="js/blender1.gltf"></script>

No need for this line. You load the glTF file with the loader.

Try to include GLTFLoader from the following source in order to see if it’s a local hosting problem:

https://threejs.org/examples/js/loaders/GLTFLoader.js

#5

Like this?
<script scr="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

#6

Give it a try^^.

#7

It didn’t work… still give me the Uncaught TypeError: THREE.GLTFLoader is not a constructor error.
But if it is a local hosting problem, how come <script src="js/three.min.js"></script> works?

#8

What does the devtools show you about the GLTFLoader.js file? Does the console say anything?

#9

The console says: Uncaught TypeError: THREE.GLTFLoader is not a constructor

#10

What about the file in the network tab?

#11

GLTFLoader.js is not in the network tab.
three.min.js andindex.html are there.

#12

@June_Wang
Is there any chance to see a live example of what you try to achieve?

#14

blender1.gltf (2.3 KB)

#15

When I’ve tried to load the file into Don McCurdy’s GLTF viewer, I’ve got that error message there:

THREE.GLTFLoader: Failed to load buffer "blender1.bin".

#16

<script scr="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

It should be src not scr.

5 Likes
#17

There is a blender1.bin file tho, I was unable to upload the.bin file to this forum… But I did try with https://gltf-viewer.donmccurdy.com/ with both .gltf and .bin files, it loaded fine.
You can try this .glb file
blender1.glb (61.7 KB)

#19

Good catch :smile:

#20

var loader = new THREE.GLTFLoader();
loader.load( ‘models/mugi_new31_anim3_1.glb’, function ( gltf ) {

	scene.add(gltf.scene);
	camera.lookAt(model.position);
	
	engine();

}, undefined, function ( e ) {
	console.error( e );
} );

If the *.glb format is OK, everything is fine.
if the format is *.gltf, then next to the file should be *.bin.
*.bin is automatically loaded :slight_smile:

#21

The problem is that the *.glb format is OK, *.gltf format is not.
If I directly upload blender1.gltf to https://gltf-viewer.donmccurdy.com/ or babylon, it will show an error: THREE.GLTFLoader: Failed to load buffer "blender1.bin".

#22

At the time of loading blender1.gltf, the file blender1.bin is located in the same folder as blender1.gltf. This is true? Sorry for my English

#23

Hi there! Have you solved the issue? I’m running into the same error: unexpected token < in JSON at position 0. After loading the bin file i get this error. Anyone know what to do?

#24

This error usually appears if you load HTML content instead of the glTF asset. More details here:

1 Like