title: Three.js CSS3D Renderer - Uncaught TypeError: undefined is not a function
body: <p>I'm having a lot of trouble getting the CSS3d renderer to work, and it seems like basic Javascript is hindering me. </p>
  
  <p>I load all the Three.js libraries separately via Sid.js, and if I add the CSS3DRenderer.js file via this method, I get</p>
  
  <p><code>Uncaught TypeError: undefined is not a function</code> on <code>renderer = new THREE.CSS3DRenderer();</code></p>
  
  <p>(it is being loaded after the Three.js library)</p>
  
  <p>If I load it from the header, I get </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: THREE is not defined</p>
  </blockquote>
  
  <p>(cssrender line 6)</p>
  
  <p>I'm using this as an example <a href="http://mrdoob.github.io/three.js/examples/css3d_periodictable.html" rel="nofollow">http://mrdoob.github.io/three.js/examples/css3d_periodictable.html</a></p>
  
  <p>Any ideas how I can get the CSS3d renderer to load? </p>
  
  <p>EDIT</p>
  
  <p>Here is an example <a href="http://gms.beektest.co/g150" rel="nofollow">http://gms.beektest.co/g150</a></p>
  
  <p>The file where all the scripts get loaded via Sid.js is <a href="http://gms.beektest.co/resources/js/player.js" rel="nofollow">http://gms.beektest.co/resources/js/player.js</a></p>
  
  <pre><code>Sid.js([  
              "http://ajax.googleapis.com/ajax/libs/threejs/r67/three.min.js",
              "../../resources/js/beekjs/three-css3d.min.js",
              "../../resources/js/beekjs/Detector.js",
              "../../resources/js/beekjs/beek.js",
              "../../resources/js/beekjs/tween.min.js",
              "../../resources/js/beekjs/scene.js"],
  
              function(){
              showProgress(0.4);
              init();
          }
      );
  </code></pre>
  
  <p>The renderer function that calls the error is</p>
  
  <pre><code>    renderer = new THREE.CSS3DRenderer(); (error is on this line)
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.domElement.style.position = 'absolute';
      document.getElementById( 'container' ).appendChild( renderer.domElement );
  </code></pre>