Added damping to OrbitControls

examples/js/controls/OrbitControls.js

@@ -35,6 +35,10 @@
 		this.minAzimuthAngle = - Infinity; // radians
 		this.maxAzimuthAngle = Infinity; // radians
 
+		// Set to true to disable damping (inertia)
+		this.staticMoving = false;
+		this.dynamicDampingFactor = 0.2;
+
 		////////////
 		// internals
 
@@ -249,8 +253,18 @@
 
 				this.object.lookAt( this.target );
 
-				thetaDelta = 0;
-				phiDelta = 0;
+				if ( this.staticMoving ) {
+
+					thetaDelta = 0;
+					phiDelta = 0;
+
+				} else {
+
+					thetaDelta *= ( 1 - this.dynamicDampingFactor );
+					phiDelta *= ( 1 - this.dynamicDampingFactor );
+
+				}
+
 				scale = 1;
 				panOffset.set( 0, 0, 0 );
 
@@ -949,6 +963,38 @@
 
 			}
 
+		},
+
+		staticMoving : {
+
+			get: function () {
+
+				return this.constraint.staticMoving;
+
+			},
+
+			set: function ( value ) {
+
+				this.constraint.staticMoving = value;
+
+			}
+
+		},
+
+		dynamicDampingFactor : {
+
+			get: function () {
+
+				return this.constraint.dynamicDampingFactor;
+
+			},
+
+			set: function ( value ) {
+
+				this.constraint.dynamicDampingFactor = value;
+
+			}
+
 		}
 
 	} );

examples/misc_controls_orbit.html

@@ -48,31 +48,33 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
+			var stats;
 
 			var camera, controls, scene, renderer;
 
 			init();
-			render();
+			animate();
 
-			function animate() {
+			function init() {
 
-				requestAnimationFrame(animate);
-				controls.update();
+				scene = new THREE.Scene();
+				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-			}
+				renderer = new THREE.WebGLRenderer();
+				renderer.setClearColor( scene.fog.color );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			function init() {
+				var container = document.getElementById( 'container' );
+				container.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
-				controls = new THREE.OrbitControls( camera );
-				controls.damping = 0.2;
-				controls.addEventListener( 'change', render );
-
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				//controls.addEventListener( 'change', render ); // only add this if there is no animation loop and no damping
+				controls.dynamicDampingFactor = 0.2;
+				controls.noZoom = true;
 
 				// world
 
@@ -91,7 +93,6 @@
 
 				}
 
-
 				// lights
 
 				light = new THREE.DirectionalLight( 0xffffff );
@@ -105,16 +106,7 @@
 				light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
-
-				// renderer
-
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container = document.getElementById( 'container' );
-				container.appendChild( renderer.domElement );
+				//
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -126,8 +118,6 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				animate();
-
 			}
 
 			function onWindowResize() {
@@ -137,6 +127,16 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				controls.update(); // required if there is damping or if autoRotate = true
+
+				stats.update();
+
 				render();
 
 			}
@@ -144,11 +144,9 @@
 			function render() {
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 
-
 		</script>
 
 	</body>