title: How can I render a fade in animation for an object in Three.js?
body: <p>I'm new to Three.js and want to add a fade in animation for adding a new mesh geometry into the scene. make the material's opacity to change from 0 to 1 after adding it. How do I do that?</p>
  
  <p>I tried to define opacity outside the function under GUI button, and seems the update animation is not working</p>
  
  <pre class="lang-js prettyprint-override"><code>var opa = 0;
  
  var MyUpdateLoop(){
  
  requestAnimationFrame(MyUpdateLoop);
  
  renderer.render(camera, scene);
  
  
  //here is the problem
  
  opa += 0.1;
  
  }
  
  function buildGui(){
  
      gui = new dat.GUI();
  
      var obj = {
          addBox: function(){
             var geometry= new THREE.BoxGeometry(20, height, 20);
             var material= new THREE.MeshPhongMaterial( {transparent:true, 
             opacity: opa} );
             var mesh = new THREE.Mesh(geometry, material);
             scene.add(mesh);
          }
      }
  
      gui.add(obj, 'addBox');
  }
  </code></pre>
  
  <p>I expect the opacity can from 0 to 1 by 1 second, but it actually was 0.3 at the first click and 1 at the second click.</p>