GLTFLoader is not a constructor

Questions
1

I am trying to use the Threejs library inside an environment that does not allow the use of npm or modules. Unfortunately it seems to me that my only option is to download the main library statically along with the GLTFLoader and include them using script tags.
My issue is not with the main library itself but with the GLTFLoader, when i try to instantiate it i get this error: THREE.GLTFLoader is not a constructor.

Ive been trying to resolve this issue for a while now.

Any help is appreciated.

2

THREE.GLTFLoader is not a constructor… you have to import GLTFLoader through import maps or using the npm package like so…

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

have a look into both the installation process / usage of three as well as this example that simply demonstrates how to load a gltf file

3

Like i explained in the topic, im working with an environment that doesnt allow imports or npm, isnt there a way to treat the GLTF loader code like a normal static js library that can be included with a script tag ?

4

ah right, i’m personally not familiar with any environment that…

apologies, can you elaborate on the environmrnt you’re using?

GLTFLoader depends on THREE as you can see in the very first lines of the code…

image
image487×802 12.6 KB

the only workarounds for this would be as suggested by @PavelBoytchev below…

1 Like
5

Most likely you need non-module version of GLTF loader. As currently they are not generated, you have two options:

  • use an old GLTFLoader (from r147 or earlier, see the examples/js folder)
  • use a more recent module GLTFLoader, but demodulize it with demoduler (this is not guaranteed to produce working file, but you can give it a try).

It is highly recommended that the version of Three.js and the versions of all addons (like the loader) are the same.

1 Like
6

Yes i did try to go back to older versions, however the error was still the same.
Went all the way back to r100.

7

There should be some issue with the code. It is almost impossible to guess it by the description provided so far. Here is example of using GLTFLoader without npm and without modules. The Three.js version is r135:

E1415-Phoenix-4.html

PS. This is example from one of my courses, so ignore any comments in the code, that are in unknown language

1 Like
8

If you’re using an older version you likely just need to remove the THREE name space from before GLTFLoader

9

You really can’t use modules?

Try this in JavaScript (f.e. paste it in your browser console):

import('https://unpkg.com/three@0.154.0/examples/jsm/loaders/GLTFLoader.js').then(({GLTFLoader}) => {

  console.log(new GLTFLoader)

})

or in HTML

<script type=module>
  import {GLTFLoader} from 'https://unpkg.com/three@0.154.0/examples/jsm/loaders/GLTFLoader.js'

  console.log(new GLTFLoader)
</script>
1 Like