Three.js - Uncaught TypeError: undefined ist keine Funktion

Question

Ich bekomme die Uncaught TypeError: undefined is not a function während Three.js verwenden. Der Fehler wird für die Zeile angezeigt, in der ich ein THREE.PerspectiveCamera erstelle. Das Skript ist

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

Ist dies, weil die Art, wie ich die Kamera bin erklärt falsch ist? Ich überprüfte die three.js Dokumentation und das Beispiel gibt es im Grunde gleich. So bin ich fest, was zu tun ist.

UPDATE: Ich verwendete eine lokale Kopie von Three.js, als ich den letzten Fehler ermittelte. Ich habe es mit dem Link http://www.html5canvastutorials.com/libraries/Three.js geschaltet. Jetzt ist der PerspectiveCamera-Fehler verschwunden, aber es erzeugt einen neuen Fehler innerhalb des Three.js-Skripts. Der Fehler ist Uncaught TypeError: Cannot read property 'x' of undefined in Zeile 337 des Three.js-Skripts

Danke.

Answer 1

Das Problem mit der lokalen Kopie besteht darin, dass Sie die unstrukturierte Three.js-Datei verwendet haben (das wäre src/Three.js). Die gewünschte Version ist entweder build/three.js oder build/three.min.js. Ich habe das in mein Projekt kopiert und den Verweis darauf im src-Attribut des Skript-Tags geändert, und alles hat angefangen zu arbeiten.

Kurz:

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 
     ...