# Gtlf loader is undefined

**URL:** <https://discourse.threejs.org/t/gtlf-loader-is-undefined/28448>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [July 28, 2021, 5:36pm UTC](https://discourse.threejs.org/t/gtlf-loader-is-undefined/28448 "2021-07-28T17:36:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Reuben\_cf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/reuben_cf/32/19782_2.png) [@Reuben\_cf](https://discourse.threejs.org/u/Reuben_cf)\
**Post date:** [July 28, 2021, 5:36pm UTC](https://discourse.threejs.org/t/gtlf-loader-is-undefined/28448/1 "2021-07-28T17:36:23Z")

</div>

```javascript
<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/three@0.118.1/examples/jsm/loaders/GLTFLoader.js"></script>
    <script >
let scene, camera, renderer;
    function init() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);
        camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
        camera.rotation.y = 45/180*Math.PI;
        camera.position.x = 800;
        camera.position.y = 100;
        camera.position.z = 1000;

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        let hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);
       let directionalLight = new THREE.DirectionalLight(0xffffff,100);
        directionalLight.position.set(0,1,0);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        let light = new THREE.PointLight(0xc4c4c4,10);
        light.position.set(0,300,500);
        scene.add(light);
        let light2 = new THREE.PointLight(0xc4c4c4,10);
        light2.position.set(500,100,0);
        scene.add(light2);
        let light3 = new THREE.PointLight(0xc4c4c4,10);
        light3.position.set(0,100,-500);
        scene.add(light3);
        let light4 = new THREE.PointLight(0xc4c4c4,10);
        light4.position.set(-500,300,500);
        scene.add(light4);

        const loader = new GLTFLoader();
        loader.load('scene.gltf', function(gltf){
            let car = gltf.scene.children[0];
            car.scale.set(0.5,0.5,0.5);
            scene.add(gltf.scene);
            animate();
        });
    }
    function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
    }
    init();
    </script>
</body>
</html>

```

the error i get is

```javascript
Uncaught ReferenceError: GLTFLoader is not defined
    at init (index.html:46)
    at index.html:58

```

why do i get GLTF is not defined

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 28, 2021, 6:40pm UTC](https://discourse.threejs.org/t/gtlf-loader-is-undefined/28448/2 "2021-07-28T18:40:21Z")

</div>

Refer to the installation docs here:

[https://threejs.org/docs/#manual/en/introduction/Installation](https://threejs.org/docs/#manual/en/introduction/Installation)

Notably, (1) GLTFLoader and three.js should be loaded from the same CDN, and the same version number. (2) anything in the `examples/jsm` folder is a module and not a global variable. If you’re using global variables you must use the versions in `examples/js` instead.
