CODEWITHSUNDEEP
three.jsgltf
704
704

Reputation: 297

GLTFLoader is not defined - THREE.js

I'm trying to build a website with a scrollable animation using three.js and anime.js. Everything up until now is in working condition (this means i have a cube in a space that i can see through a camera, when i scroll - the cube and the camera move through various keyframes until at the end of their timeline. My next task was to bring in a blender object to replace the cube. The THREEjs docs advise me to use GLTFLoader, when trying to implement this:

I received the error:

GLTFLoader is not defined.

Here is the code it references:

var loader = new GLTFLoader();

    loader.load(
        '/assets/logotext.glb',
        function ( gltf ) {
            // called when the resource is loaded
            scene.add( gltf.scene );
        },
        function ( xhr ) {
            // called while loading is progressing
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% + loaded' );
        },
        function ( error ) {
            // called when loading has errors
            console.error( 'An error happened', error );
        },
    );

Here is how I include the scripts in my html:

<script src="\node_modules\animejs\lib\anime.min.js"></script>
       <script src="\node_modules\three\build\three.js"></script>
      <script src="\node_modules\three\examples\js\loaders\GLTFLoader.js"></script>
     <script src="index.js"></script>      
  </body>
</html>

The full files can be found here if I haven't included enough: index.html, index.js

If there is any other part of this you need to see just say and I can edit the question.

Thankyou!

Upvotes: 3

Views: 11657

Answers (1)

KayBee
KayBee

Reputation: 305

var loader = new THREE.GLTFLoader();

You should instantiate the GLTFLoader constructor using its parent class constructor that is the 'THREE' constructor, like I have shown above. This will resolve the issue.

Upvotes: 3

Related Questions