Add inertia to camera controls (Three.js)

I've setup a scene with a camera which remains in a fixed point in the center of the scene. The user can pan the camera around by clicking (and holding) and dragging the left mouse button. When the user releases the left mouse button, the motion of the camera stops. My scene is based on one of the Three.js demos as see here

There are a bunch of event handlers which are used to create a target position for the camera to lookAt :

function onDocumentMouseDown( event ) {
    event.preventDefault();
    isUserInteracting = true;
    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;
    onPointerDownLon = lon;
    onPointerDownLat = lat;
}

function onDocumentMouseMove( event ) {
    if ( isUserInteracting === true ) {
        lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
        lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
    }
}

and in my update loop I have:

// lat and long have been calculated in the event handlers from the cursor click location 

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );

camera.target.x = (500 * Math.sin( phi ) * Math.cos( theta ));
camera.target.y = (500 * Math.cos( phi ));
camera.target.z = (500 * Math.sin( phi ) * Math.sin( theta ));

camera.lookAt( camera.target );

Which works as expected. When the user clicks and drags the mouse, the camera rotates to follow. Now I am attempting to add some inertia to the movement so when the user releases the left mouse button the camera continues to rotate in the direction of rotation for a small amount of time.

I have tried tracking the change in position of the mouse position in my drag start and drag end events and try to calculate the direction of movement based on that, but it seems like a convoluted way of doing it

Any suggestions on how I could add inertia to the camera controls?

链接地址: http://www.djcxy.com/p/83226.html

上一篇: 相对于透视而言，如何在ThreeJS中移动相机？

下一篇: 将惯性添加到相机控件（Three.js）