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:

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".

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