[英]Three.js - OrbitControls doesn't work
如果我运行脚本,控制台会显示“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
。
<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
三.js r.72
我在构建three
库的webpack
遇到了同样的问题
var THREE = require('three')
THREE.OrbitControls === undefined // true
解决方案,安装第 3 方轨道控制
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
应用时,它工作得很好;)
https://github.com/nicolaspanel/three-orbitcontrols-ts :
npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'
orbitcontrols
应该以角度单独安装,这个问题困扰了我好几天。
我也有同样的问题,那是因为你放错了行。 你需要把它放在这条线下面
document.body.appendChild( renderer.domElement );
然后你添加轨道控制
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', posUpdate );
controls.update();
如果它不起作用,请在此处添加脚本文件下载
<script src="OrbitControls.js"></script>
我遇到了类似的问题,经过大量研究,下面的事情奏效了
在您的 HTML 中,添加 OrbitControls 时的顺序很重要,因为它需要来自 Three.js 的某些东西。
它应该是
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.