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!

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!

• javascript
• three.js

Share Improve this question Follow edited Mar 14, 2020 at 5:03 user128511 asked Mar 13, 2020 at 23:50 user3112634user3112634 70344 gold badges1010 silver badges3030 bronze badges 2

• 2 Couldn't you just use FirstPersonControls like in this example? threejs/examples/webgl_shadowmap – Mugen87 Commented Mar 14, 2020 at 16:47
• 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 Commented Mar 17, 2020 at 19:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

How about this; https://jsfiddle/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;