Three.js - OrbitControls не работает
Если я запустил script, консоль отобразит меня "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();
Ответы
Ответ 1
Вы должны явно включать 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
three.js r.72
Ответ 2
У меня была такая же проблема с конструкцией webpack
библиотеки three
var THREE = require('three')
THREE.OrbitControls === undefined // true
Решение, установите стороннее управление орбитой
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
ok, не лучший пример, но когда он применяется вместо THREE.OrbitControls
, он отлично работает;)