javascriptthree.jsmousemousewheelorbitcontrols

three.js - OrbitControls damping works when mouse pressed but no damping when mouse stops moving

This may be hard to explain:

Using OrbitControls in three.js and have enabled damping for smooth rotation with the mouse. It works partially. I click, I drag, the damping works fine, but as soon as I stop moving the mouse, with the button still held down, the damping stops and the scene halts instantly instead of smoothly dragging a bit longer.

Interestingly, when I use the scroll wheel, the damping that didn't finish picks up again in an ease-out fashion while rolling the wheel.

My OrbitControls are set up as follows:

const controls = new OrbitControls( camera, renderer.domElement );

controls.target.set(0,0,0);
controls.enableDamping = true;
controls.dampingFactor = 0.07;
controls.enablePan = false;
controls.maxDistance = highestDimension * 2;
controls.minDistance = 10;
controls.minPolarAngle = Math.PI / 8;
controls.maxPolarAngle = Math.PI / 2;
controls.update();

I'm not seeing any other options for damping online, unless I'm missing something.

Solution

  • Try stick controls.update inside animaton loop.

    function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();