CODEWITHSUNDEEP
javascriptthree.jseasingtween.js
Vad
Vad

Reputation: 3740

Three.js: Drag Panorama Smoothly with Easing

I am using this demo as a base for my 6 cube panorama project: https://threejs.org/examples/#canvas_geometry_panorama

Mouse events manage the dragging functionality. I want to apply easing so the panorama cube is smoothly following the mouse. I do know that easing is a difference of distance between current element position and mouse coordinates divided by some integer (eg. 5). In example above, I find hard time figuring out how to apply it. Here is the code sample:

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 onDocumentMouseMove there is already some calculation done in difference of points which does not allow me to achieve successful easing.

Note: I would prefer using own code rather than additional libraries which handle easing.

Upvotes: 1

Views: 1190

Answers (1)

WestLangley
WestLangley

Reputation: 104783

The easiest way to add damping to your panorama is to use OrbitControls. You can use a pattern like so:

camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 0.01;

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
controls.enablePan = false;
controls.enableDamping = true;

Then, in you animation loop:

requestAnimationFrame( animate );

controls.update(); // required when damping is enabled; otherwise, not required

renderer.render( scene, camera );

Experiment with the three.js webgl_panorama_cube.html example.

three.js r.89

Upvotes: 4

Related Questions