Three.js - OrbitControlsが機能しない

Question

スクリプトを実行すると、コンソールに「THREE.OrbitControlsがコンストラクタではありません」というメッセージが表示されます。私が間違っていた何

？私はマニュアルから同じコードを使用しました。

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

アプリケーションには、OrbitControlsを明示的に含める必要があります。

また

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

、

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

3を使用する方法を使用するとき、あなたは理解して慎重にthree.js OrbitControls例のコメントを読みます.js r.72

Answer 2

私はthreeライブラリ

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

ソリューションのwebpackビルドと同じ問題があったが、ここでサードパーティ製の軌道制御をインストール

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の代わりに適用した場合、うまく動作します;）