轨道控制跟随鼠标，无需点击 Three.js

Question

有没有人有代码强制 Three.js 中的轨道控件在 mousemove 上移动场景，而不是单击 + mousemove 我尝试使用此线程中的答案： 如何在鼠标移动时重新创建 Three.js OrbitControl 移动？ 但遗憾的是它抛出一个错误“最大调用堆栈大小超出错误”，我只是得到一个黑色画布，里面什么也没有......

我也尝试过改变

scope.domElement.addEventListener( 'mousedown', onMouseDown, false );

到

scope.domElement.addEventListener( 'mousemove', onMouseDown, false );

在 OrbitControls.js 文件中，但移动时似乎会冻结并时不时地停止......

有人设法解决这个问题吗？提前致谢！

Answer 1

这个怎么样; https://jsfiddle.net/EthanHermsey/e3b501cw/51/

document.addEventListener('mousemove', function(e){
    let scale = -0.01;
    orbit.rotateY( e.movementX * scale );
    orbit.rotateX( e.movementY * scale ); 
    orbit.rotation.z = 0; //this is important to keep the camera level..
})
    
//the camera rotation pivot
orbit = new THREE.Object3D();
orbit.rotation.order = "YXZ"; //this is important to keep level, so Z should be the last axis to rotate in order...
orbit.position.copy( mesh.position );
scene.add(orbit );

//offset the camera and add it to the pivot
//you could adapt the code so that you can 'zoom' by changing the z value in camera.position in a mousewheel event..
let cameraDistance = 1;
camera.position.z = cameraDistance;
orbit.add( camera );

使用充当相机枢轴的 Object3D。它随着鼠标的移动而旋转。

编辑：我找到了自己的答案，但找到了一种方法。您可以启用随鼠标位置自动旋转，但您必须handleMouseMoveRotate通过复制该函数并将其设置为 来将 OrbitControl 公开this.handleMouseMoveRotate。然后在设置中添加事件侦听器并将事件发送到控件。

document.body.addEventListener( 'mousemove', ( e )=>{
    controls.handleMouseMoveRotate( e ) 
});

并确保设置controls.enableRotate = false;