2015-10-01 2 views
14

Если я запустил скрипт, консоль отобразит меня «THREE.OrbitControls не является конструктором».Three.js - OrbitControls не работает

enter image description here

Что я сделал не так? Я использовал тот же код из руководства.

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

Включил его? '' – WestLangley

+1

Вставьте скрипку https://jsfiddle.net –

ответ

9

В вашей заявке необходимо указать OrbitControls.

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

Кроме того, прочитать комментарии в three.js OrbitControls пример тщательно, так что вы понимаете, когда использовать

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

и когда использовать

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

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

три .js r.72

+0

Отлично! Спасибо за * цикл анимации */'requestAnimationFrame'! – LinusGeffarth

5

Я была такая же проблема с webpack строить из three библиотеки

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

Solution, установите третью партию управления орбитальным

npm install three-orbit-controls 

подробности здесь: https://github.com/mattdesl/three-orbit-controls

затем изменить приведенный выше код фрагмент до

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

ОК, не самый лучший пример, но при применении вместо THREE.OrbitControls он отлично работает;)

Смежные вопросы