How to get GLTFLoader to work in three js

Viewed 4190

i set up a new html file to use three.js and literally copy pasted the example code from the GLTFLoader documentation and nothing's working, can anyone help? I can run three js just fine when i load a cube but it seems not to be recognizing the GLTFLoader.js file.

If anyone knows why this is happening (or NOT happening) plz let me know. <3

<script src="js/three.js"></script>
<script src="js/GLTFLoader.js"></script>
<script>

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);

    var light2 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light2);

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

    var loader = new GLTFLoader();
    
    // Load a glTF resource
    loader.load(
        // resource URL
        'pentaprism.glb',
        // called when the resource is loaded
        function ( gltf ) {
    
            scene.add( gltf.scene );
    
            gltf.animations; // Array<THREE.AnimationClip>
            gltf.scene; // THREE.Group
            gltf.scenes; // Array<THREE.Group>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset; // Object
    
        },
        // called while loading is progressing
        function ( xhr ) {
    
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    
        },
        // called when loading has errors
        function ( error ) {
    
            console.log( 'An error happened' );
    
        }
    );


    function update() {
        
    }


    function animate() {
        requestAnimationFrame( animate );

        update();

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

</script>
1 Answers

I have also been trying to learn how to use the GLTFLoader.js.

Not sure if it's quite what you are looking for, but perhaps this video will help: https://www.youtube.com/watch?v=F4q2cqj_Tdc

Some things he does differently, if I remember correctly are: Uses <script type="module" src="GLTFLoader.js"> and var loader = new THREE.GLTFLoader(); and he uses jsm files instead of js files.

Hope it helps! Good luck :--)

Related