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!

Couldn't you just use FirstPersonControls like in this example? threejs.org/examples/webgl_shadowmap — Mugen87
There's also the thing that the cursor stops moving at the edge of the window.. (but you could fix that with pointerlock). — Ethan Hermsey

Ethan Hermsey Ethan Hermsey · Accepted Answer · 2020-03-17T19:30:40

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.

Orbit Controls follow the mouse without clicking three.js

1 Answers