如何解决OrbitControls autoRotate 不适用于三个 js
我在使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。