I would like to recreate the Three.js OrbitControl movement without the click & drag, i.e. simply making the camera following mouse movement.
I tried to recreate it from scratch, but it was too much effort as the problem is that the camera moves on three axis, not just two. I'm pretty sure some has done before.
Specifically I would like the camera to move around the scene origin keeping the same distance from it.
I had the same requirement as OP. This is how I solved it, with help from Leeft's comments:
Update OrbitControls.js to change scope of function handleMouseMoveRotate
from
function handleMouseMoveRotate( event )
to
this.handleMouseMoveRotate = function ( event )
This is required for you to manually use this method from within your own code.
In the JS code which loads the model, use the dispose
method to remove the default mouse controls and add your own event handler for mousemove
which manually calls handleMouseMoveRotate
:
init();
animate();
function init() {
// Set up Camera, Scene and OrbitControls
camera = new THREE.PerspectiveCamera( 45, containerWidth / containerHeight );
scene = new THREE.Scene();
controls = new THREE.OrbitControls(camera);
// Remove default OrbitControls event listeners
controls.dispose();
controls.update();
... // omitted for brevity: Load model and Renderer
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove( event ) {
// Manually fire the event in OrbitControls
controls.handleMouseMoveRotate(event);
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
controls.update();
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
NOTE: this solution removes ALL library listeners. If you are interested you can enable them again copying them from here to the end of the update method.