title: Window resize causes animation to accelerate. (ThreeJS)
body: <p>I have the following code and I'm wondering why it speeds out of control when I resize the window.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;!DOCTYPE html&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
          
          &lt;h1&gt;FooBarBaz&lt;/h1&gt;
          &lt;p&gt;LaDeDa&lt;/p&gt;
          &lt;script src="http://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://threejs.org/examples/js/controls/TrackballControls.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
          
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize( window.innerWidth, window.innerHeight );
          
          var objects = [
              {
                  name : "earth",
                  mesh : new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshPhongMaterial()),
                  init : function(scene){
                  this.mesh.position.set(0,0,0);
                  //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
                  scene.add(this.mesh);
                  },
                  animate : function(t){return}
              },
              {
                  name : "satellite",
                  mesh : new THREE.Mesh(new THREE.SphereGeometry(0.1, 32, 32), new THREE.MeshPhongMaterial()),
                  init : function(scene){
                  this.mesh.position.set(1.5,0,0);
                  //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
                  scene.add(this.mesh);
                  },
                  animate : function(t){this.mesh.position.set(Math.sin(t)*1.5,Math.cos(t)*1.5,0);}
              }];
          objects.forEach(object =&gt; object.init(scene));
          
          var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
          scene.add(light);
          
          camera.position.x = 0;
          camera.position.y = -5;
          camera.position.z = 0;
          camera.lookAt(new THREE.Vector3( 0, 0, 0));
          var timeStep = 0.01;
          var time = 0;
          var controls = new THREE.TrackballControls( camera, renderer.domElement );
          controls.target.set( 0, 0, 0 );
          var render = function () {
              time += timeStep;
              requestAnimationFrame( render );
              objects.forEach(object =&gt; object.animate(time));
              controls.update();
              renderer.render(scene, camera);
          }
          function onWindowResize() {
              camera.aspect = window.innerWidth / window.innerHeight
              camera.updateProjectionMatrix()
              renderer.setSize(window.innerWidth, window.innerHeight)
              render()
          }
          window.addEventListener('resize', onWindowResize, false)
          
          document.body.appendChild( renderer.domElement );
          render();&lt;/script&gt;
          &lt;/body&gt;
          &lt;/html&gt;
          </code></pre>
  </div>
  </div>
  </p>
  <p>As you can see every time you resize the window it starts going faster and faster... Why?</p>