GLTFLoader was not found in 'three'

Questions
1

Hi everyone. I am trying to display the GLTF file on my website, using a script starting with:

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

I have a simple GLTF file from a 3D designer that is a folder containing 1 .gltf file and 3 .png files with textures.

I try to load the GLTF file:

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        
        renderer.setSize(300, 300);
        document.getElementById('welcome-canvas').appendChild(renderer.domElement);

        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(1, 1, 1).normalize();
        scene.add(light);

        const loader = new THREE.GLTFLoader();
        loader.load('/3dmodels/kt2-Mesh-997376/kt2-Mesh-997376.gltf', function(gltf) {
            scene.add(model);
            console.log('Success: ', model);  
            renderer.render(scene, camera);
        }, undefined, function(error) {
            console.log('Error', error);
        });

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

No matter what code I use it can’t be compiled and the terminal shows error
export ‘GLTFLoader’ (imported as ‘THREE’) was not found in ‘three’ (possible exports:…

I installed Three with NPM but I also tried to import through cdn and I was getting the same error.

Please advice what can be a reason. I don’t have a big experience with 3D rendering and Three JS library.

2

In your code you’re using THREE.GLTFLoader - since you’re importing loader from a separate module, it’s not part of the THREE scope. You can use it just as a plain GLTFLoader, without the THREE prefix.

3 Likes