Cant import the GLTFLoader

Questions
1

Hello,
I’m trying to import the GLTFLoader.
Unfortunately I can’t find an addon folder at all as stated in the documentation.
even though it is suggested in the path.
I was able to find the file in /node_modules/three/examples/jsm/loaders/GLTFLoader.js but even then I get an error.

Fehler1
Fehler11846×737 209 KB

Fehler2
Fehler21110×601 111 KB

Fehler3
Fehler31137×616 74.4 KB

Fehler4
Fehler41843×755 217 KB

2

You have to use a CDN in order to get the package from the net, in your case you can do this:

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js'
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm//three@0.165.0/examples/jsm/loaders/GLTFLoader.js'
3

Ok, I wrote the cdn in the head area of ​​my html document and now it seems to work. but why do I have to do that if I used npm?

4

Hmm, if you are using npm then the problem is not with the code but how you are importing it. If you are using npm then its:

import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/libs/loaders/GLTFLoader.js
5

I don’t understand, the documentation says this path:

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

I find the file in this path:

import { GLTFLoader } from '/node_modules/three/examples/jsm/loaders/GLTFLoader.js';

now you say this path:

import { GLTFLoader } from 'three/examples/jsm/libs/loaders/GLTFLoader.js

but I don’t have a folder in libs with the name loaders

fehler6
fehler6416×553 69.2 KB

6

The previous update of three.js contains their path in the addons folder, however the in the newer update thats been changes to examples/jsm. Another thing is that when you are importing a package you don’t need to mention node_modules folder in the path, thats because package.json already declares that path for you so when importing directly mention the folder through which you want the import from.

7

The addons path is an alias that points imports from three/addons/* to three/examples/jsm/*. Most build systems support aliases, and that’s what the three.js examples mostly use, but if your project does not allow aliases for whatever reason, it’s fine to use three/examples/jsm instead.

I would recommend never putting node_modules in an import path though. Use the package name (three/*) and let your build system locate the file on disk.

2 Likes