Orbit Controls 跟随鼠标不点击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.