Orbit Controls follow the mouse without clicking three.js

Question

Does anyone have a code to force orbit controls in three.js to move the scene on mousemove instead of click + mousemove I've tried using the answer in this thread: How to recreate the Three.js OrbitControl movement on mouse move? but sadly it throws an error "Maximum call stack size exceeded error" and I just get a black canvas with nothing in it...

I also tried changing

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

to

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

In the OrbitControls.js file but that seems to freeze when moving and stops every now and again...

Has anyone managed to solve this? Thanks in advance!

Answer 1

How about this; 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 );

Use an Object3D that acts as a pivot for the camera. It rotates on mouse movement.

EDIT: I found my own answer but found a way. You can enable auto rotate with the mouse position, but you have to make OrbitControl's handleMouseMoveRotate public, by copying the function and setting it as this.handleMouseMoveRotate. Then in setup you add an event listener and send the event to the controls.

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

And make sure to set controls.enableRotate = false;