Adding Damping (Inertia) to Panorama Rotation for Smoother Movements

Question

Adding Damping (Inertia) to Panorama Rotation for Smoother Movements

I understand that OrbitControls.js has a damping feature, which adds a smooth dragging of panorama, also known as easing. I am looking to achieve the same functionality without relying on this library. This is because I want to streamline my code and have more precise control over mouse or tap events.

I have created a Plunker to demonstrate the initial project I use for my panorama view.

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

In this demo, mouse coordinates are converted to latitude/longitude to adjust the camera position. It's a basic example showcasing a minimal panorama from the three.js site.

While experimenting with damping in OrbitControls.js (view this line), I couldn't quite replicate the same smooth behavior - the interaction caused the panorama to jump:

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

I'm struggling to apply this damping effect to my Plunker example.

Can someone provide guidance on how to implement damping in my Plunker project?

Update:

I made some progress by introducing new delta values for longitude and latitude: refer to latDelta and lonDelta in the updated Plunker. I now have a better grasp of how it works in OrbitControls.js. You can notice a smooth scroll on page load due to lonDelta = 0.35. However, I'm unsure about adjusting this during user mouse scrolling. Nonetheless, I feel like I'm heading in the right direction.

javascript three.js easing

Answer 1

Answer №1

Almost there! The key concept is to determine the user's panning speed and maintain that speed while gradually decreasing it to mimic friction. In case you're wondering, 'delta', or d, commonly represents distance. By finding out how far the user moved and how long it took them to do so, you can calculate the velocity and apply it using basic physics principles.

For more details, check out this link.

This section is crucial, extracted from the update function:

// Calculate time elapsed since last frame
var now = Date.now();
var dT = now - then;

if (isUserInteracting) {
    // Determine distance traveled since last frame
    var dLon = lon - prevLon;
    var dLat = lat - prevLat;
    // velocity = distance / time
    lonVelocity = dLon / dT;
    latVelocity = dLat / dT;
} else {
    // old position + (velocity * time) = new position
    lon += lonVelocity * dT;
    lat += latVelocity * dT;
    // handle friction
    lonVelocity *= (1 - dampingFactor);
    latVelocity *= (1 - dampingFactor);
}

// Store values for the next frame
then = now;
prevLon = lon;
prevLat = lat;

Answer 2

Almost there! The key concept is to determine the user's panning speed and maintain that speed while gradually decreasing it to mimic friction. In case you're wondering, 'delta', or d, commonly represents distance. By finding out how far the user moved and how long it took them to do so, you can calculate the velocity and apply it using basic physics principles.

For more details, check out this link.

This section is crucial, extracted from the update function:

// Calculate time elapsed since last frame
var now = Date.now();
var dT = now - then;

if (isUserInteracting) {
    // Determine distance traveled since last frame
    var dLon = lon - prevLon;
    var dLat = lat - prevLat;
    // velocity = distance / time
    lonVelocity = dLon / dT;
    latVelocity = dLat / dT;
} else {
    // old position + (velocity * time) = new position
    lon += lonVelocity * dT;
    lat += latVelocity * dT;
    // handle friction
    lonVelocity *= (1 - dampingFactor);
    latVelocity *= (1 - dampingFactor);
}

// Store values for the next frame
then = now;
prevLon = lon;
prevLat = lat;

Adding Damping (Inertia) to Panorama Rotation for Smoother Movements

Answer №1

Similar questions

Is it possible to insert HTML content as plain text into a div?

leveraging UI-Router for navigating based on app state and data

How can we implement a feature that allows users to save a page as a bookmark by clicking a specific button, and then store that bookmarked page link in their user profile for easy access

After two HTML injections, Javascript ceases to function properly

Incorporating Array elements into a table designed with Bootstrap

The lightbox feature seems to be malfunctioning, despite having successfully loaded jQuery

Utilizing the no-data-text attribute in v-combobox with Vuetify: Tips and tricks

The pageSize in React's Material Table does not reflect dynamic updates

Loading Ajax content into div (Wordpress) without pre-loading the font can cause display issues

AngularJS: Utilizing $http to fetch XML data instead of JSON

Error: Element type is invalid: a string was anticipated, but not found

Controller encounters a error when requiring a module

What is the process for importing module dependencies from other npm dependencies?

Delivering seamless css integration using express.js

Low frame rate in a straightforward Three.js environment on Safari for MacOS

Having difficulties in Vue while attempting to access a particular row

The 'fetch' operation could not be completed on the current window due to a TypeError

Showing numerous skinned meshes on canvas using react-three-fiber

What are the best ways to stop jQuery events from propagating to ancestor elements?

Having issues with django-autocomplete-light triggering JavaScript errors