#StackBounty: #javascript #three.js #easing Implement Damping (Inertia) to Panorama Rotation

Bounty: 50

I am aware of OrbitControls.js having a damping feature, which adds a smooth dragging of panorama, also known as easing. I want to implement the same functionality but without using this library. The reason is that I need to reduce amount of code used and get a tighter control of mouse or tap events.

I have built this Plunker to show the demo I use as a starter project for my panorama view.

https://plnkr.co/edit/eX2dwgbrfNoX9RwWaPaH?p=preview

In this demo I use mouse coordinates to convert to latitude/longitude values, which would adjust camera position. It is a basic panorama example on three.js site.

When I was playing around with damping from OrbitControls.js (see this line) I could not quite get the same smooth behavior – interaction caused panorama to jump around:

if ( scope.enableDamping === true ) {
    sphericalDelta.theta *= ( 1 - scope.dampingFactor );
    sphericalDelta.phi *= ( 1 - scope.dampingFactor );
    panOffset.multiplyScalar( 1 - scope.dampingFactor );
}

I do not believe I can fully understand how to apply it to my example in the plucker and what sphericalDelta is.

Can anyone guide me in the right direction applying damping to my example from Plunker?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.