将惯性添加到相机控件(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