Three.js OBJMTLLoader is undefined with CDN or sources

Question

I am getting crazy since I try to use the THREE.OBJMTLLoader();

In fact, I tried to include the cdn, then the sources etc but always the same error displaying : Uncaught TypeError: undefined is not a function about the objmtlloader.

Here are my includes :

{% addtoblock "js" %}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}{% compress js %}<script src="{% static 'home_page/js/ObjectLoader.js' %}"></script>{% endcompress %}{% endaddtoblock %}
{% addtoblock "js" %}{% compress js %}<script src="{% static 'home_page/js/home-animations.js' %}"></script>{% endcompress %}{% endaddtoblock %}

(don't mind the compress, it's not active in localhost)

Then, I made a class in order to load the 3D model :

function homeAnimations() {
var that = this;
container = document.getElementById("section2-earth");

this.init = function() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.z = 100;

    //scene

    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 ).normalize();
    scene.add( directionalLight );


    //model

    var loader = new THREE.OBJMTLLoader();

    loader.load(
        '../assets/3d-earth/Earth.obj',
        '../assets/3d-earth/Earth.mtl',
        function (object) {
            object.position.y = - 80;
            scene.add(object);
        },
        function (xhr) {
            console.log((xhr.loaded /xhr.total * 100) + '% loaded');
        },
        function (xrh) {
            console.log('An error happened');
        }
        )

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
};

this.animate = function() {
    requestAnimationFrame( animate );
    render();
};

this.render = function() {

    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY - camera.position.y ) * .05;

    camera.lookAt( scene.position );

    renderer.render( scene, camera );

};
}

This has been take from the three.js documentation.

And here are my calls :

$(document).ready(function() {
    var myAnimations = new homeAnimations();
    myAnimations.init();
    myAnimations.animate();
});

So... I am a bit disappointed since their are no indication in the document about what include...

When I look at the sources example they include the OBJMTLLoader.js but I don't have it, even in the sources downloaded.

Then I tried to call the OBJLoader, with or without adding ObjectLoader.js from the sources, but I have the same error.

If someone has an idea about these error...

Thank you in advance !

EDIT: If I delete the call to OBJMTLLoader, all others three functions are not undefined.

EDIT2: Ok, it seems that you need to integrate MTLLoader.js and OBJMTLLoader.js from https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

** EDIT 3:** If you use module-style loading; note the jsm in this path: https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/jsm/loaders

And you could use this trick to access the JS file with the correct MIME type: import { OBJLoader } from 'https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/jsm/loaders/OBJLoader.js';