javascriptthree.jstweeneasing

Three.js OrbitControls how to stop gradually and smoothly, instead of instantly when panning?

When I am panning the scene on the screen, how should I set up the OrbitControls to make the scene come to a standstill gradually, instead of instantly, just like this website ?

Here is my code.

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);

Thanks!!

Solution

  • When using your code, I can see damping on my computer, see https://jsfiddle.net/p2kgvxoc/. You probably want to set OrbitControls.dampingFactor to a lower value in order to make the damping effect more visible. Also ensure to use an active render loop.