Threejs / GLTFLoader included in the three package

Question

There is a note saying that starting with three.js r103, GLTFLoader is included in the three package itself and installing three-gltf-loader is no longer necessary.

Here is my html file script import :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

JS.file

If I use :

const loader = new THREE.GLTFLoader();

Uncaught TypeError: class constructors must be invoked with 'new'

Or if I use :

const loader = new GLTFLoader();

Uncaught ReferenceError: GLTFLoader is not defined

So I think I have missed a point about importing or declaring gltf

Answer 1

GLTFLoader (like other three.js loaders and controls) is part of the same NPM package, but not part of the core bundle. It can be exported from a subfolder, instead:

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

const scene = new Scene();

const loader = new GLTFLoader();

const gltf = await loader.loadAsync( 'path/to/model.glb' );

scene.add( gltf.scene );

Bundlers and build tools will resolve this automatically if you have 'three' installed, and that's what I'd recommend using. If you prefer to use a CDN, then you may need additional import maps to resolve the 'three' package to the right URLs. Both options are discussed in the three.js installation documentation.