Three.js - Uncaught TypeError：未定義は関数ではありません

Question

Three.jsを使用しているうちにUncaught TypeError: undefined is not a functionを取得しています。 THREE.PerspectiveCameraを作成している行にエラーが表示されています。 スクリプトがある

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<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); 
    }); 

は、これは私がカメラを宣言しています方法が間違っているためですか？ 私はthree.jsのドキュメントをチェックしましたが、基本的に同じ例があります。 私は何をすべきかについていません。

更新日： 最後のエラーが発生したとき、私はThree.jsのローカルコピーを使用していました。私はリンクhttp://www.html5canvastutorials.com/libraries/Three.jsでそれを切り替えました。 PerspectiveCameraエラーはなくなりましたが、Three.jsスクリプト内に新しいエラーが生成されます。エラーはThree.jsスクリプトの337行目のUncaught TypeError: Cannot read property 'x' of undefinedです

ありがとうございました。

Answer 1

ローカルコピーの問題は、未構築のThree.jsファイル（src/Three.js）が使用されていることです。必要なのはbuild/three.jsかbuild/three.min.jsです。私はそれを私のプロジェクトにコピーし、スクリプトタグのsrc属性でそれへの参照を変更しました。要するに

：

mrdoob-three.js-2524525(or some other number here) 
| 
+----build 
|  | 
|  +--three.js  <-- YES, CORRECT FILE 
|  +--three.min.js <-- YES 
|  ... 
| 
+----src 
... | 
     +--Three.js  <-- NO, PREBUILT FILE THAT ONLY CONTAINS CONSTANTS 
     ...