There is no gltfloader in three module

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.

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();

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

You have to import GLTFLoader like so:

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

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’

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

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

1 Like