How to recreate the Three.js OrbitControl movement on mouse move?

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/39357130/how-to-recreate-the-three-js-orbitcontrol-movement-on-mouse-move

标签

javascript

three.js

perspectivecamera