Panning supports damping

examples/js/controls/OrbitControls.js

@@ -184,14 +184,17 @@ THREE.OrbitControls = function ( object, domElement ) {
 				sphericalDelta.theta *= ( 1 - scope.dampingFactor );
 				sphericalDelta.phi *= ( 1 - scope.dampingFactor );
 
+				panOffset.multiplyScalar( 1 - scope.dampingFactor );
+
 			} else {
 
 				sphericalDelta.set( 0, 0, 0 );
 
+				panOffset.set( 0, 0, 0 );
+
 			}
 
 			scale = 1;
-			panOffset.set( 0, 0, 0 );
 
 			// update condition is:
 			// min(camera displacement, camera rotation in radians)^2 > EPS

examples/misc_controls_orbit.html

@@ -48,8 +48,8 @@
 			var camera, controls, scene, renderer;
 
 			init();
-			render(); // remove when using next line for animation loop (requestAnimationFrame)
-			//animate();
+			//render(); // remove when using next line for animation loop (requestAnimationFrame)
+			animate();
 
 			function init() {
 
@@ -67,14 +67,20 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 400, 200, 0 );
 
+				// controls
+
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.addEventListener( 'change', render ); // remove when using animation loop
-				// enable animation loop when using damping or autorotation
-				//controls.enableDamping = true;
-				//controls.dampingFactor = 0.25;
-				controls.panningMode = THREE.HorizontalPanning;
+
+				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
+
+				controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+				controls.dampingFactor = 0.25;
+
+				controls.panningMode = THREE.HorizontalPanning; // default is THREE.ScreenSpacePanning
+
 				controls.minDistance = 100;
 				controls.maxDistance = 500
+
 				controls.maxPolarAngle = Math.PI / 2;
 
 				// world
@@ -101,7 +107,7 @@
 				scene.add( light );
 
 				var light = new THREE.DirectionalLight( 0x002288 );
-				light.position.set( -1, -1, -1 );
+				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
 				var light = new THREE.AmbientLight( 0x222222 );
@@ -126,7 +132,7 @@
 
 				requestAnimationFrame( animate );
 
-				//controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
+				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
 
 				render();