I am currently working on a 6 cube panorama project and using this demo as a reference:
The dragging functionality in this demo is controlled by mouse events. I am looking to implement easing so that the panorama cube follows the mouse smoothly. I understand that easing involves calculating the distance between the current element position and the mouse coordinates, then dividing it by a constant (e.g., 5). However, I am struggling to apply this concept in the provided example code:
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;
}
}
function update() {
if ( isUserInteracting === false ) { lon += 0.1; }
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
target.x = 500 * Math.sin( phi ) * Math.cos( theta );
target.y = 500 * Math.cos( phi );
target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( target );
renderer.render( scene, camera );
}
In the onDocumentMouseMove function, there is already some calculation based on the difference of points which complicates my attempts to introduce easing.
Note: I prefer developing my own solution for easing rather than relying on external libraries for this task.