Javascript Three.js - OrbitControls 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32884527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js - OrbitControls doesn't work
提问by Ramón Wilhelm
If I run the script, the console displays me "THREE.OrbitControls is not a constructor".
如果我运行脚本，控制台会显示“THREE.OrbitControls 不是构造函数”。
What did I wrong? I used the same code from a manual.
我做错了什么？我使用了手册中的相同代码。
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();
采纳答案by WestLangley
You must explicitly include OrbitControlsin your application.
您必须明确包含OrbitControls在您的应用程序中。
<script src="js/controls/OrbitControls.js"></script>
Also, read the comments in the three.js OrbitControlsexample carefully so you understand when to use
另外，请OrbitControls仔细阅读three.js示例中的注释，以便您了解何时使用
controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
and when to use
以及何时使用
controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
http://threejs.org/examples/misc_controls_orbit.html
http://threejs.org/examples/misc_controls_orbit.html
three.js r.72
三.js r.72
回答by FraggaMuffin
I had the same issue with a webpackbuild of the threelibrary
我在webpack构建three库时遇到了同样的问题
var THREE = require('three')
THREE.OrbitControls === undefined // true
Solution, install a 3rd party orbit control
解决方案，安装第 3 方轨道控制
npm install three-orbit-controls
details here: https://github.com/mattdesl/three-orbit-controls
详情请见：https: //github.com/mattdesl/three-orbit-controls
then change the above code fragment to
然后将上面的代码片段更改为
var THREE = require('three')
var OrbitControls = require('three-orbit-controls')(THREE)
OrbitControls === undefined // false
ok, not the best example, but when applied in place of THREE.OrbitControls, it works just fine ;)
好的，不是最好的例子，但是当代替 应用时THREE.OrbitControls，它工作得很好;)
回答by Tethys Zhang
https://github.com/nicolaspanel/three-orbitcontrols-ts:
https://github.com/nicolaspanel/three-orbitcontrols-ts：
npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'
orbitcontrolsshould be installed separately in angular, this issue bothers me for several days.
orbitcontrols应该单独安装 angular，这个问题困扰了我好几天。
