问题描述
我在使用 Orbitcontrols 时遇到了麻烦。我有我的 Threee js 模型,我希望它在第一次加载页面时自动旋转,但由于某种原因它无法正常工作。 3d 模型静止不动,就好像没有考虑命令行一样。 这是我初始化函数的代码:
controls.autoRotate=true
controls.addEventListener('change',render);
render();
渲染函数:
function render() {
renderer.render(scene,camera);
}
请注意,我可以在页面中随意移动模型,但似乎没有触发自动旋转。
解决方法
仅当您在动画循环中调用 OrbitControls.autoRotate
时才使用 controls.update()
。您不能将自动旋转与按需呈现结合使用(即利用控件的 change
事件侦听器)。
let camera,scene,renderer,controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70,window.innerWidth / window.innerHeight,0.01,10 );
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 0.2,0.2,0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry,material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth,window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera,renderer.domElement );
controls.autoRotate = true;
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene,camera );
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.124/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124/examples/js/controls/OrbitControls.js"></script>