title: Three.js - Uncaught ReferenceError: OBJLoader is not defined
body: <p>I'm following several tutorials on Three.js, yet I keep getting a <code>Uncaught ReferenceError: OBJLoader is not defined</code> error when trying to implement my own .obj file. Tried different methods, nothing is helping. Been stuck on this problem for days.</p>
  <p>I'm running on localhost using http-server.</p>
  <p>Oddly enough, when I switch the <code>new OBJLoader();</code> to <code>new THREE.ObjectLoader();</code> it seems to work as it tries to load the file, albeit the file is not a .json file, it is an .obj so it throws an error.</p>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;title&gt;three.js crash course&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type=&quot;module&quot; src=&quot;js/jQuery.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;module&quot; src=&quot;js/three.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;module&quot; src=&quot;js/OrbitControls.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;module&quot; src=&quot;loaders/GLTFLoader.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;module&quot; src=&quot;loaders/OBJLoader.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;module&quot; src=&quot;js/index.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>window.onload = function() {
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  
      $(window).resize(function(){
          var width = window.innerWidth;
          var height = window.innerHeight;
          renderer.setSize(width, height);
          camera.aspect = width/height;
          camera.updateProjectionMatrix();
      });
  
      var controls = new THREE.OrbitControls(camera, renderer.domElement);
  
      const loader = new OBJLoader();
  
      loader.load (
          // resource URL
          './models/boat_large.obj',
          // called when resource is loaded
          function ( object ) {
  
              scene.add( object );
  
          },
          // called when loading is in progresses
          function ( xhr ) {
  
              console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  
          },
          // called when loading has errors
          function ( error ) {
  
              console.log( 'An error happened' );
  
          }
      );
  
      camera.position.z = 3;
  
      var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
  
  
      // game logic
      var update = () =&gt; {
      
      };
  
      // draw scene
      var render = () =&gt; {
          renderer.render(scene, camera);
      };
  
      // run game loop (update, render, repeat)
      var GameLoop = () =&gt; {
          requestAnimationFrame(GameLoop);
      
          update();
          render();
      }
  
      GameLoop();
  }
  </code></pre>