title: How to tell tween.js to wait until a texture is displayed in three.js
body: <p>I have a problem with three.js in combination with tween.js. The problem is, that the timer of a tween.js animation starts, before the texture of a sphere is displayed.</p>
  
  <p>I'm building a panorama viewer with three.js for Firefox. The panorama images are mapped to a sphere and the camera is in its center. It is possible to change the displayed panorama to virtually visit different rooms (this is done by turning different spheres with different textures visible). When the room is changed, a light is animated with tween.js to turn the room dark. Then the light goes up again and the new panorama image is displayed.</p>
  
  <p>The problem is, that it needs some time to display the image, if a room is visited for the first time. That happens because the image is not loaded into memory before it is displayed.</p>
  
  <p>That wouldn't be bad if the room remained dark until the panorama is completely loaded into memory and ready to display. But the animation timer of tween.js starts before the image is displayed.</p>
  
  <p>The result is, that the light is not turning on slowly by animation, as desired, instead it takes a short time to display the new panorama and then the light is completely turned on without any animation at all. The duration of the animation is set to 500 ms and it takes roughly the same amount of time to display the panorama image. </p>
  
  <p>My question is, is there a way to know, when a texture is rendered? So that I can trigger the animation when the image is displayed?</p>
  
  <p>Three.js version is r71.</p>
  
  <pre><code>//after light turns dark, the panorama is changed and light goes up again
  tweenDarkenLight.onComplete( function() { 
  
    roomModule.setRoomVisible(); //sets new room visible
  
    tweenEnhanceLight.start(); //start of animation to enlighten the scene
  });
  </code></pre>
  
  <p>The textures for all rooms/panoramas are loaded and attached to spheres when the app starts. But each of them remains invisble until the user selects one of them.</p>
  
  <pre><code>texture = new THREE.Texture();
  
  loader = new THREE.ImageLoader( manager );
  
  //the url for each panorama is stored in roomAssetArray
  loader.load( roomAssetArray.panorama, 
  
    function ( image ) {
  
    texture.image = image;
    texture.needsUpdate = true;
  });
  </code></pre>