Trying to use GLTFLoader, but it keeps giving me reference errors, what am I doing wrong?

Questions
1

I’m new to three.js and I’ve been trying to import a train file, but when i try to use the GLTGLoeader it keeps giving me this error:
“Uncaught ReferenceError: GLTFLoader is not defined
at HTMLDocument. (main.js:18:20)”

–HTML–

Document 
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js "></script>
<script type= "module" src="main.js">

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

</script>

–main.js–

const scene = new THREE.Scene();

// Camera
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


//loading imported 3D files
const loader = new GLTFLoader();

loader.load('3D imports/Cool Bumbul.glb', function(gltf)
{
    scene.add(gltf.scene);
}, undefined, function(error){
    console.error(error);
});

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;

    renderer.render(scene, camera);
}
               
animate();
2

Take code from official example: three.js examples
Source: three.js/examples/webgl_loader_gltf.html at bc58fecba18150103b95fbde5aaa3cc7cddf95a7 · mrdoob/three.js · GitHub

1 Like
3

It looks like you may be mixing-and-matching CDN imports and three/* imports without using any import maps, and the CDN version is r128 which is old – if possible I would try to use a recent version of three.js (current is 176), follow one of the two paths in the installation guide, and ensure that all three.js dependencies are imported in a consistent way.

1 Like