Cannot read property 'extractUrlBase' of undefined at THREE.ColladaLoader.load

Questions
1

I am new to THREE.js. I was trying to load an external model in my code by it keeps on showing the following error. I can’t find a way to solve it. Please help. I will attach my code below. Please help!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> Our WebGL Skeleton Framework</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.js"></script>   
    <script src="ColladaLoader.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
    
        }
    </style>
</head>
<body>
    <div id="webGL-container">
    </div>
</body>
<script>
    var scene, camera, renderer;
    var controls, guiControls, datGUI;
    var stats;
    var dae, spotLight;
    var SCREEN_WIDTH, SCREEN_HEIGHT;

    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load("./models/earth.dae", function(collada){
        dae = collada.scene;
        dae.scale.x = dae.scale.y = dae.scale.z = 3;
        dae.traverse(function(child){
            if(child.colladaId == "Clouds"){
                child.traverse(function(e){
                    e.castShadow = true;
                    e.receiveShadow = true;
                    if(e.material instanceof THREE.MeshPhongMaterial){
                        e.material.needsUpdate = true;
                        console.log(e.material);
                    }
                });
            }
            else if(child.colladaId == "Earth"){
                child.traverse(function(e) {
                    e.castShadow = true;
                    e.receiveShadow = true;
                });   
            }
        });
        dae.updateMatrix();
        init();
        animate();
    }); 

    function init(){
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500 );
        renderer = new THREE.WebGLRenderer({antialias: true});

        renderer.setClearColor(0x000000);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        renderer.shadowMapSoft = true;

        controls = new THREE.OrbitControls(camera, renderer, domElement);
        controls.addEventListener('change', render);

        scene.add('dae');

        camera.position.x = 5;
        camera.position.y = 5;
        camera.position.z = 10;

        camera.lookAt(scene.position);

        guiControls = new function(){
            this.lightX = -15;
            this.lightY = 21;
            this.lightZ = 10;
            this.intensity = 2.7;
            this.distance = 76;
            this.angle = 0.48;
            this.exponent = 50;
            this.shadowCameraNear = 12;
            this.shadowCameraFar = 163;
            this.shadowCameraFov = 50;
            this.shadowCameraVisible = false;
            this.shadowMapWidth = 2056;
            this.shadowMapHeight = 2056;
            this.shadowBias = .0;
            this.shadowDarkness = 0.15;
        }

        datGUI = new dat.GUI();
        datGUI.add(guiControls, 'lightX', -60, 180);
        datGUI.add(guiControls, 'lightY', 0, 180);
        datGUI.add(guiControls, 'lightZ', -60, 180);
        datGUI.add(guiControls, 'intensity', 0.01, 5).onChange(function(value){
            spotLight.intensity = value;
        });
        datGUI.add(guiControls, 'distance', 0, 1000).onChange(function (value) {
            spotLight.intensity = value;
        }); 
        datGUI.add(guiControls, 'angle', 0.001, 1.570).onChange(function (value) {
            spotLight.intensity = value;
        }); 
        datGUI.add(guiControls, 'exponent', 0, 50).onChange(function (value) {
            spotLight.intensity = value;
        });
        datGUI.add(guiControls, 'shadowCameraNear', 0, 100).onChange(function (value) {
            spotLight.shadowCamera.near = value;
            spotLight.shadowCamera.updateProjectionMatrix();
        });
        datGUI.add(guiControls, 'shadowCameraFov', 1, 100).onChange(function (value) {
            spotLight.shadowCamera.fov = value;
            spotLight.shadowCamera.updateProjectionMatrix();
        });
        datGUI.add(guiControls, 'shadowCameraVisible').onChange(function (value) {
            spotLight.shadowCameraVisible = value;
            spotLight.shadowCamera.updateProjectionMatrix();
        });
        datGUI.add(guiControls, 'shadowBias', 0, 1).onChange(function (value) {
            spotLight.shadowBias = value;
            spotLight.shadowCamera.updateProjectionMatrix();
        });
        datGUI.add(guiControls, 'shadowDarkness', 0, 1).onChange(function (value) {
            spotLight.shadowDarkness = value;
            spotLight.shadowCamera.updateProjectionMatrix();
        });
        datGUI.close();

        spotLight = new THREE.SpotLight(0xffffff);
        spotLight.castShadow = true;
        spotLight.position.set(0,20,0);
        spotLight.target = dae;
        spotLight.intensity = guiControls.intensity;
        spotLight.distance = guiControls.distance; 
        spotLight.angle = guiControls.angle; 
        spotLight.exponent = guiControls.exponent; 
        spotLight.shadowCameraNear = guiControls.shadowCameraNear;
        spotLight.shadowCameraFar = guiControls.shadowCameraFar; 
        spotLight.shadowCameraFov = guiControls.shadowCameraFov; 
        spotLight.shadowCameraVisible = guiControls.shadowCameraVisible; 
        spotLight.shadowBias = guiControls.shadowBias;  
        spotLight.shadowDarkness = guiControls.shadowDarkness;
        scene.add(spotLight);
        console.log(scene);
        $("#webGL-container").append(renderer.domElement);
        stats = new Stats();
        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top = "0px";
        $("#webGL-container").append(stats.domElement);
    }

    function render(){
        dae.traverse(function(child){
            if(child.colladaId == "Clouds"){
                child.rotation.y += 0.01;
            }
            else if (child.colladaId == "Earth") {
                child.rotation.y += 0.01;
            }
        });
        spotLight.position.x = guiControls.lightX;
        spotLight.position.y = guiControls.lightY;
        spotLight.position.z = guiControls.lightZ;
    }

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

    $(window).resize(function(){
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;

        camera.aspect = SCREEN_WIDTH/SCREEN_HEIGHT;
        camera.updateProjectionMatrix();

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    });
</script>
<!-- <script>
    $(function () {

        var scene, camera, renderer;
        var controls, guiControls, datGUI;
        var stats;
        var dae, spotLight;
        var SCREEN_WIDTH, SCREEN_HEIGHT;

        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load('https://cdn.rawgit.com/wpdildine/wpdildine.github.com/master/models/monkey.dae', function (collada) {
            dae = collada.scene;
            dae.scale.x = dae.scale.y = dae.scale.z = 3;
            dae.traverse(function (child) {
                if (child.colladaId == "Suzanne") {
                    child.traverse(function (e) {
                        e.castShadow = true;
                        e.receiveShadow = true;
                        if (e.material instanceof THREE.MeshPhongMaterial) {
                            e.material.needsUpdate = true;
                        }

                    });
                }
                else if (child.colladaId == "Plane") {
                    child.traverse(function (e) {
                        e.castShadow = true;
                        e.receiveShadow = true;
                    });
                }
            });
            dae.updateMatrix();
            init();
            animate();
            console.log(scene);
        });
        function init() {
            /*creates empty scene object and renderer*/
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 500);
            renderer = new THREE.WebGLRenderer({ antialias: true });

            renderer.setClearColor(0x000000);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMapEnabled = true;
            renderer.shadowMapSoft = true;

            /*add controls*/
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.addEventListener('change', render);

            camera.position.x = 5;
            camera.position.y = 9;
            camera.position.z = 42;
            camera.lookAt(scene.position);

            scene.add(dae);
            /*datGUI controls object*/
            guiControls = new function () {
                this.rotationX = 0.0;
                this.rotationY = 0.0;
                this.rotationZ = 0.0;

                this.lightX = 19;
                this.lightY = 47;
                this.lightZ = 19;
                this.intensity = 2.5;
                this.distance = 373;
                this.angle = 1.6;
                this.exponent = 38;
                this.shadowCameraNear = 34;
                this.shadowCameraFar = 2635;
                this.shadowCameraFov = 68;
                this.shadowCameraVisible = false;
                this.shadowMapWidth = 512;
                this.shadowMapHeight = 512;
                this.shadowBias = 0.00;
                this.shadowDarkness = 0.11;

            }
            /*adds spot light with starting parameters*/
            spotLight = new THREE.SpotLight(0xffffff);
            spotLight.castShadow = true;
            spotLight.position.set(20, 35, 40);
            spotLight.intensity = guiControls.intensity;
            spotLight.distance = guiControls.distance;
            spotLight.angle = guiControls.angle;
            spotLight.exponent = guiControls.exponent;
            spotLight.shadowCameraNear = guiControls.shadowCameraNear;
            spotLight.shadowCameraFar = guiControls.shadowCameraFar;
            spotLight.shadowCameraFov = guiControls.shadowCameraFov;
            spotLight.shadowCameraVisible = guiControls.shadowCameraVisible;
            spotLight.shadowBias = guiControls.shadowBias;
            spotLight.shadowDarkness = guiControls.shadowDarkness;
            scene.add(spotLight);

            /*adds controls to scene*/
            datGUI = new dat.GUI();

            datGUI.add(guiControls, 'lightX', -60, 180);
            datGUI.add(guiControls, 'lightY', 0, 180);
            datGUI.add(guiControls, 'lightZ', -60, 180);

            datGUI.add(guiControls, 'intensity', 0.01, 5).onChange(function (value) {
                spotLight.intensity = value;
            });
            datGUI.add(guiControls, 'distance', 0, 1000).onChange(function (value) {
                spotLight.distance = value;
            });
            datGUI.add(guiControls, 'angle', 0.001, 1.570).onChange(function (value) {
                spotLight.angle = value;
            });
            datGUI.add(guiControls, 'exponent', 0, 50).onChange(function (value) {
                spotLight.exponent = value;
            });
            datGUI.add(guiControls, 'shadowCameraNear', 0, 100).name("Near").onChange(function (value) {
                spotLight.shadowCamera.near = value;
                spotLight.shadowCamera.updateProjectionMatrix();
            });
            datGUI.add(guiControls, 'shadowCameraFar', 0, 5000).name("Far").onChange(function (value) {
                spotLight.shadowCamera.far = value;
                spotLight.shadowCamera.updateProjectionMatrix();
            });
            datGUI.add(guiControls, 'shadowCameraFov', 1, 180).name("Fov").onChange(function (value) {
                spotLight.shadowCamera.fov = value;
                spotLight.shadowCamera.updateProjectionMatrix();
            });
            datGUI.add(guiControls, 'shadowCameraVisible').onChange(function (value) {
                spotLight.shadowCameraVisible = value;
                spotLight.shadowCamera.updateProjectionMatrix();
            });
            datGUI.add(guiControls, 'shadowBias', 0, 1).onChange(function (value) {
                spotLight.shadowBias = value;
                spotLight.shadowCamera.updateProjectionMatrix();
            });
            datGUI.add(guiControls, 'shadowDarkness', 0, 1).onChange(function (value) {
                spotLight.shadowDarkness = value;
                spotLight.shadowCamera.updateProjectionMatrix();
            });
            datGUI.close();
            $("#webGL-container").append(renderer.domElement);
            /*stats*/
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            $("#webGL-container").append(stats.domElement);
        }


        function render() {
            dae.traverse(function (child) {
                if (child.colladaId == "Suzanne") {
                    child.rotation.y += .01;
                }
                else if (child.colladaId == "Plane") {
                    child.rotation.y -= .01;
                }
            });

            spotLight.position.x = guiControls.lightX;
            spotLight.position.y = guiControls.lightY;
            spotLight.position.z = guiControls.lightZ;

        }

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


    $(window).resize(function () {


        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;

        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

    });
</script>
</html>
2

THREE.LoaderUtils was introduced with R89. You are using R70. Always ensure to use a version of three.js that is equal to the version of all other files (like ColladaLoader or OrbitControls).

In genereal, it’s best to use the latest stable version.