Three.js - OrbitControls funktioniert nicht

Question

Wenn ich das Skript ausführen, zeigt mir die Konsole "THREE.OrbitControls ist kein Konstruktor".

Was habe ich falsch gemacht? Ich habe den gleichen Code aus einem Handbuch verwendet.

var controls; 
    controls = new THREE.OrbitControls(camera); 
    controls.addEventListener('change', render); 

var render = function() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
       //Hier wird die Größe des Fensters manipuliert! 
    renderer.setSize(window.innerWidth - 20, window.innerHeight - 20);     

};

var animate = function() { 
     requestAnimationFrame(animate); 
     controls.update();     
    }; 


var geometry1 = new THREE.BoxGeometry(10, 10, 10); 
var material = new THREE.MeshPhongMaterial({specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide}); 
var box = new THREE.Mesh(geometry1, material); 


scene.add(box); 

camera.position.z = 50; 


render(); 
animate(); 

Answer 1

Sie müssen OrbitControls explizit in Ihre Anwendung einbeziehen.

<script src="js/controls/OrbitControls.js"></script> 

Auch lesen Sie die Kommentare in den three.js OrbitControls Beispiel sorgfältig, so dass Sie, wenn verstehen

verwenden

controls.addEventListener('change', render); // add this only if there is no animation loop (requestAnimationFrame) 

und wenn

controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true 

http://threejs.org/examples/misc_controls_orbit.html

drei verwenden .js r.72

https://github.com/mattdesl/three-orbit-controls

dann ändern Sie den obigen Code:

Answer 2

ich das gleiche Problem mit einem webpack Build der Bibliothek three hatte

var THREE = require('three') 
THREE.OrbitControls === undefined // true 

Lösung, eine dritte Steuer Partei Orbit

npm install three-orbit-controls 

Details hier installieren Fragment zu

var THREE = require('three') 
var OrbitControls = require('three-orbit-controls')(THREE) 
OrbitControls === undefined // false 

ok, nicht das beste Beispiel, aber wenn anstelle von angewendet, funktioniert es ganz gut;)