将惯性添加到相机控件(Three.js)

我用相机设置了一个场景,它保留在场景中心的一个固定点上。 用户可以通过点击(并按住)并拖动鼠标左键来平移相机。 当用户释放鼠标左键时,摄像机的运动停止。 我的场景基于Three.js演示之一,如此处所示

有一堆事件处理程序用于创建相机的目标位置以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;
    }
}

在我的更新循环中我有:

// 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 );

其中按预期工作。 当用户点击并拖动鼠标时,照相机旋转跟随。 现在我正试图增加一些惯性,因此当用户释放鼠标左键时,相机会继续沿着旋转方向少量旋转。

我尝试跟踪鼠标位置在我的拖动开始和拖动结束事件中的变化,并尝试根据它来计算运动的方向,但它似乎是一种复杂的方式

有关如何将惯性添加到相机控件的建议?

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

上一篇: Add inertia to camera controls (Three.js)

下一篇: three.js, tween camera and mousemove event