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();

- Ramón Wilhelm

---

你有包含它吗？<script src="js/controls/OrbitControls.js"></script> - WestLangley

把它放在 JSFiddle 上。https://jsfiddle.net - EugenSunic

Answer 1

您必须在应用程序中显式地包含OrbitControls。例如：

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three/build/three.module.js",
            "three/addons/": "https://unpkg.com/three/examples/jsm/"
        }
    }
</script>

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

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

https://github.com/mrdoob/three.js/blob/dev/examples/misc_controls_orbit.html

three.js r.147

- WestLangley

---

太好了！感谢无动画循环 / requestAnimationFrame 部分的说明！ - LinusGeffarth

OrbitControls.js 是否有CDN URL 可以使用？ - LarsH

那正是我的问题，因为我没有动画循环。这让我节省了时间。 - Martin Naughton

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 的位置时，它完全可以正常工作 ;)

- FraggaMuffin

---

此软件包已合并到主要存储库中，不再维护 - 当前文件为 https://github.com/mrdoob/three.js/commits/master/examples/js/controls/OrbitControls.js。 - Pawel Gorczynski

Answer 3

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

这是一个关于IT技术的网址，它提供了三维场景相关的控制器。请点击网址进行访问。

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

orbitcontrols 应该在 Angular 中单独安装，这个问题困扰了我几天。

- Tethys Zhang

Answer 4

我也遇到了同样的问题，这是因为你放错了位置。 你需要将它放在这一行的下面。

document.body.appendChild( renderer.domElement );

然后您添加轨道控制。

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

如果它不能正常工作，请下载脚本文件这里

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

- playbyan1453

Answer 5

我曾经遇到过类似的问题，经过大量的研究，以下方法有效。

在您的HTML中，添加OrbitControls时顺序很重要，因为它需要从Three.js获取某些内容。

应该是这样的：

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

- charmi shah