Three.js - OrbitControls不起作用

Question

如果我运行脚本，控制台会显示我＆＃34; THREE.OrbitControls不是构造函数＆＃34;。

我错了什么？我使用了手册中的相同代码。

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>

另外，请仔细阅读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

Answer 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

好的，不是最好的例子，但是当应用THREE.OrbitControls时，它可以正常工作;）

Answer 3

https://github.com/nicolaspanel/three-orbitcontrols-ts：

npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'

orbitcontrols应该分开安装，这个问题困扰了我几天。

Answer 4

我也有同样的问题，这是因为您输入了错误的行。 您需要将其放在此行下

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags" type="text" />

然后添加轨道控件

document.body.appendChild( renderer.domElement );

如果不起作用，请添加脚本文件下载select

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', posUpdate );
controls.update();

Answer 5

我遇到了类似的问题，经过大量研究，下面的事情奏效了

在您的 HTML 中，添加 OrbitControls 时的顺序很重要，因为它需要来自 Three.js 的某些东西。

应该是

<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>