如果我运行该脚本,控制台会显示“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();
最佳答案
您必须在应用程序中显式包含 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
三.js r.147
关于javascript - Three.js - OrbitControls 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32884527/