There is no gltfloader in three module

Questions
1

Hi,
I’m trying to load a gltf file by the three module, but I can’t import GLTFLoader from three.
I installed the three module by npm on my react app and here is the snippet:
this.gltfLoader = new THREE.GLTFLoader();
this.gltfLoader.load(
“…/…/assets/Bee.glb”,
(gltf) => {
scene.add(gltf.scene);
},
null,
(error) => {
console.log(error);
}
);
When I run my app, It says there is no GLTFLoader in THREE package

also I tried to load it by this command:
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
but there is no jsm folder in the module folder in node_modules

I’ll be grateful for your help.

2

I don’t think this is true. Keep in mind that when importing GLTFLoader via ES6 import, you have to remove the THREE namespace when creating the loader. So it should be:

this.gltfLoader = new GLTFLoader();
2 Likes
3

I’ve just tested it and here’s the snippet:
import { Scene, GLTFLoader } from “three”;

componentDidMount() {
this.scene = new Scene();
this.gltfLoader = new GLTFLoader();
this.gltfLoader.load(
“…/…/assets/Bee.glb”,
(gltf) => {
this.scene.add(gltf.scene);
},
null,
(error) => {
console.log(error);
}
);
}

Failed to compile.
./src/components/DemoScene/scene.js
58:28-38 ‘three’ does not contain an export named ‘GLTFLoader’.

4

You have to import GLTFLoader like so:

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
2 Likes
5

This path doesn’t exist.
there is no jsm folder in my examples folder in node_modules,
only fonts, and js folder

Failed to compile.
./src/components/DemoScene/scene.js
Module not found: Can’t resolve ‘three/examples/jsm/loaders/GLTFLoader.js’ in ‘F:\Temp\src\components\DemoScene’

6

Then there is something wrong with your npm setup because the jsm folder is part of the package:

7

Thanks a million, that was the problem.
I managed to fixed it by using yarn instead of npm.

1 Like
8

For future Googlers: I was also having this problem.

Why? The node_modules/three/examples folder was missing because the template repository I was using contained a .yarnclean. When this file is included, it automatically enables Yarn’s autoclean functionality, which reduces the size of the node_modules folder by deleting files/directories listed in .yarnclean. In my case, the .yarnclean file looked like this:

# examples
example
examples

...

So, if your repository contains a .yarnclean file, make sure that it doesn’t contain examples as one of the directories to delete.