2015-10-01 9 views
14

Se eseguo lo script, la console mi visualizza "THREE.OrbitControls non è un costruttore".Three.js - OrbitControls non funziona

enter image description here

cosa ho sbagliato? Ho usato lo stesso codice da un manuale.

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(); 
+3

Hai includerlo? '' – WestLangley

+1

Inserito in un violino https://jsfiddle.net –

risposta

9

È necessario includere esplicitamente OrbitControls nell'applicazione.

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

Inoltre, leggere i commenti dei Three.js OrbitControls esempio con attenzione in modo da capire quando usare

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

e quando utilizzare

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

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

tre .js r.72

+0

Perfetto! Grazie per la parte * no animation loop */'requestAnimationFrame'! – LinusGeffarth

5

Ho avuto lo stesso problema con un webpack build del three libreria

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

Solution, installare un 3a parte di controllo orbita

npm install three-orbit-controls 

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

quindi modificare il codice di cui sopra frammento a

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

ok, non il migliore esempio, ma se applicato al posto di THREE.OrbitControls, funziona bene;)