title: Why am I getting an "Uncaught ReferenceError: THREE is not defined" error from three.js even when I have added a requirejs shim
body: <p>When running my code I am getting the following error:
  Uncaught ReferenceError: THREE is not defined</p>
  
  <pre><code>module game {
      export class Add3DScene extends dragonwings.Command {
  
          @inject('ResponsiveDiv')     protected _responsiveDiv:          components.ResponsiveDiv;
  
          public execute(): void {
              super.execute();
              var scene = new THREE.Scene();
          }
      }
  }
  </code></pre>
  
  <p>I cannot try <a href="https://stackoverflow.com/questions/41089475/three-js-uncaught-referenceerror-three-is-not-defined">this</a> solution because I do not have access to the embedding html</p>
  
  <p>I have however tried <a href="https://github.com/mrdoob/three.js/issues/9602" rel="nofollow noreferrer">this</a> but adding the shim does not seem to help and I have not been able to add the define wrapper due to lack of understand on how to incorporate this into my typescript.</p>
  
  <p>I can see three.min.js as loaded in chrome debugger</p>
  
  <p>I am using requirejs which seems to be causing some complications from what I have found online. Here a simplified version of my config</p>
  
  <pre><code>requirejs.config({
      baseUrl: "content/${gamecode}/lib",
      paths: {
          TweenMax:           "gsap/TweenMax",
          THREE:              "three/three.min",
      },
      shim:
      {
          'THREE': {
              exports: 'THREE'
          },
          'game_libs': {
              deps: ['stats', 'TweenMax']
          },
          '../app/js/main': {
              deps: ['game_libs']
          },
      }
  });
  </code></pre>
  
  <p>Any help appreciated</p>
  
  <p>**Edit
  after looking at <a href="https://stackoverflow.com/questions/30358323/require-js-not-loading-three-js">Require.js not loading Three.js</a> my other modules are no longer defined and so I have yet to get to the execution of the code I originally posted about
  new require config</p>
  
  <pre><code>define("three-glue", ["three"], function (three) {
      window.THREE = three;
      return three;
  });
  requirejs.config({
      baseUrl: "content/${gamecode}/lib",
      waitSeconds: 60,
      paths: {
          TweenMax:           "gsap/TweenMax",
          three:            "three/three.min",
      },
      map: {
          '*': {
              three: 'three-glue'
          },
      'three-glue': {
          three: 'three'
      },
      shim:
      {
          'game_libs': {
              deps: [
                  'TweenMax'
              ]
          },
          '../app/js/main': {
              deps: ['game_libs']
          },
      }
  }
  });
  </code></pre>