title: Three.js - Uncaught TypeError: undefined is not a function
body: <p>I'm getting the <code>Uncaught TypeError: undefined is not a function</code> while using Three.js.
  The error is being shown for the line where I'm creating a <code>THREE.PerspectiveCamera</code>. 
  The script is </p>
  
  <pre><code>window.requestAnimFrame = (function(callback){
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback){
              window.setTimeout(callback, 1000 / 60);
          };
      })();
  
      function animate(lastTime, angularSpeed, three){
          // update
          var date = new Date();
          var time = date.getTime();
          lastTime = time;
  
          // render
          three.renderer.render(three.scene, three.camera);
  
          // request new frame
          requestAnimFrame(function(){
              animate(lastTime, angularSpeed, three);
          });
      }
  
      $(window).bind('load',function(){
          var angularSpeed = 0.2; // revolutions per second
          var lastTime = 0;
          $container = $("#container");
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          $container.append(renderer.domElement);
  
          // camera - Uncaught Type Error on the below line
          var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
          camera.position.y = -450;
          camera.position.z = 400;
          camera.rotation.x = 45 * (Math.PI / 180);
  
          // scene
          var scene = new THREE.Scene();
  
          var material = new THREE.LineBasicMaterial({
                              color: 0x0000ff,
                          });
          var geometry = new THREE.Geometry();
          for(var i=0;i&lt;100;i++){
              geometry.vertices.push(new THREE.Vector3(i-100,i-100,i-100));
              geometry.vertices.push(new THREE.Vector3(i+100,i+100,i+100));
              var line = new Three.Line(geometry,material);
              scene.add(line);
              geometry=new THREE.Geometry();
          }
  
  
          // create wrapper object that contains three.js objects
          var three = {
              renderer: renderer,
              camera: camera,
              scene: scene,
          };
  
          animate(lastTime, angularSpeed, three);
      });
  </code></pre>
  
  <p>Is this because the way I'm declaring the camera is wrong?
  I checked the three.js documentation and the example give there is basically the same.
  So I'm stuck on what to do.</p>
  
  <p>UPDATE:
  I was using a local copy of Three.js when I encountered the last error. I switched it with the link <a href="http://www.html5canvastutorials.com/libraries/Three.js" rel="noreferrer">http://www.html5canvastutorials.com/libraries/Three.js</a>. 
  Now, the PerspectiveCamera error is gone, but it produces a new error inside the Three.js script. The error is <code>Uncaught TypeError: Cannot read property 'x' of undefined</code> on line 337 of the Three.js script</p>
  
  <p>Thanks.</p>