How can we achieve a gradual and smooth stop in Three.js OrbitControls instead of an abrupt halt while panning?

How can I configure the OrbitControls to gradually bring a scene to a standstill while panning, like on this website, instead of stopping instantly?

Below is my code snippet:

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.mouseButtons = {
    ORBIT: THREE.MOUSE.RIGHT,
    ZOOM: THREE.MOUSE.MIDDLE,
    PAN: THREE.MOUSE.LEFT
};
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;

const direction = new THREE.Vector3();
camera.getWorldDirection(direction);
camera.getWorldPosition(controls.target);
controls.target.addScaledVector(direction, 50);

Thank you!

Answer №1

After implementing your code, I noticed the damping effect on my machine. Please check out the demonstration at https://jsfiddle.net/p2kgvxoc/. It might be beneficial to adjust the OrbitControls.dampingFactor to a lower value for a more pronounced damping effect. Don't forget to include an active render loop as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The clash between mototools and JavaScript is causing both to be non-operational

I am currently facing a conflict between JavaScript and Mototools in my project. I have heard about the NoConflict script, but I'm not sure how to implement it properly. I will provide the code for both dependencies so that someone can explain it to m ...

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

When an ion-datetime field in Ionic 4 has no value, the label always floats as shown below. Here is my code snippet: <form [formGroup]="statusHandlerForm"> <ion-item class="input-container " align-items-center no-padding> <ion-la ...

alter the appearance of a timepiece using a controller dynamically

Currently, I have a watch set up in my controller for the following watch: var pageFunc = $scope.$watch('page["USER"].number', function(newob,oldob){ console.log("WATCHING page"); if(oldob != newob){ //perform data load } },t ...

The 'file' property of undefined throws an error in ng-file-upload

I am currently exploring the functionality of ng-file-upload from this repository: https://github.com/danialfarid/ng-file-upload I have successfully implemented the basic setup as follows: HTML: <section ng-controller="MyController"> ...

Transferring data from a web form to PHP using a JavaScript function

I have been working on some code recently where I am attempting to transfer the input text content named "stName" to my PHP script: <!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>Untitled Document</title> &l ...

Employing the power of JavaScript to enable the seamless toggle of an overlay

I have a div named "navbar_menu". On clicking this div, I want the visibility of the div named "nav_overlay" to fade in. Upon another click, I want it to fade back and become invisible again. Currently, I have set the div 'nav_overlay" to have ' ...

Trigger event when user ceases to click

I have successfully implemented a click event using jQuery. Here is the code: $('#myButton').click(function(){ // perform desired actions }); However, I am facing an issue where multiple intermediate events are triggered if the user clicks on ...

Unusual issue encountered in next.js production: ENOENT error - File or directory not found (image cache)

Encountering an issue with my AWS EC2 deployment of next.js. After running npm run build followed by npm run start, everything appears to be functioning correctly. Initially, there are no webp images in the cache as expected. However, I have noticed that t ...

Transform the blob data into an Excel file for easy download, but beware the file is not accessible

My API returns a response containing the content of an excel file, which is displayed in the image below. https://i.sstatic.net/2VHsL.png Now, I am looking to convert this content into an excel file and make it downloadable for the user. Below is the AP ...

Variable Returned by AJAX

I am attempting to send a variable using a select box via POST method, then use AJAX to submit the data and finally leverage that variable on the original page to update SQL queries. Below is the code snippet I currently have: <script type="text/j ...

Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of

I am looking to apply my custom class to certain pages, with the exception of specific routes. For example, all pages should have the class fixed-header, except for the following routes: /cart/step-1 /login This class should be added or removed from the ...

Checking for palindromes should also result in a negative outcome

function checkPalindrome(input) { let cleanInput = input.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~ ()]/g,"").toLowerCase(); let reversedInput = cleanInput.split('').reverse().join(''); if(cleanI ...

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

Is there any assistance available for incorporating Slimbox and loading images through JavaScript?

I have exhaustively searched online for a solution to my problem, but without any luck. So now I am reaching out to the experts who know exactly what they're doing. Currently, I'm in the process of loading images from Facebook using a handy jQue ...

Having trouble bringing my custom-built Angular module into my Angular application

Currently considering the utilization of this Yeoman generator as a starting point for a small project that will contain several reusable form components to be published. The generator constructs a module and an example component, directive, pipe, and serv ...

Creating a response in Node JS

I'm struggling with crafting a response to the server. Currently, I have a login form that sends data to the server. On the backend, I verify if this data matches the information in a .json file and aim to send a response upon successful validation. ...

Learn how to iterate through child elements of an element's children in JavaScript

I am struggling to retrieve an element's children and then access the children of each child element. Even though I have attempted this code, I cannot figure out why it is not functioning correctly: var myElement = $('.a-container'); var my ...

Show the chosen value from the dropdown menu on all JSP pages

I have a header.jsp file containing a dropdown box labeled "Role". This header.jsp is designed to be included in all other JSP files using a directive. Once a user logs in, they are directed to a homepage where they must select a value from the dropdown ...

React-Three/Fiber Vertical Sticky Carousel for Mobile Devices using Three.js

https://i.sstatic.net/Z5F8K0mS.gif After stacking the sticky areas, I faced a challenge in adding text in the same style. Additionally, I created refs for each phone scene but the stickiness was lost. I am uncertain about what caused it to stick initially ...

"Troubleshooting the disappearance of Node.js deployment process in the

My node.js app is deployed on DigitalOcean. Setting up everything went smoothly the first time, but I encounter an issue when I return for the second time. Here's what I did initially: Logged in via SSH using the terminal (I'm on a Mac). Naviga ...