title: Update height/radius of 3D Cylinder created with Three.js at runtime
body: <p>Like we are changing height/width/depth of 3D cube at run time in this Fiddle:
  <strong><a href="http://jsfiddle.net/EtSf3/4/" rel="nofollow">http://jsfiddle.net/EtSf3/4/</a></strong></p>
  
  <p>How can we change the Radius and Length at runtime of Cylinder created using Three.js</p>
  
  <p>Here is my code: </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script src="http://www.html5canvastutorials.com/libraries/three.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>//Script for 3D Cylinder 
  
  // revolutions per second
  var angularSpeed = 0.2;
  var lastTime = 0;
  
  var cylinder = null;
  // this function is executed on each animation frame
  function animate() {
      // update
      var time = (new Date()).getTime();
      var timeDiff = time - lastTime;
      var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
      cylinder.rotation.x += angleChange;
      cylinder.rotation.z += angleChange;
      lastTime = time;
  
      // render
      renderer.render(scene, camera);
  
      // request new frame
      requestAnimationFrame(function () {
          animate();
      });
  }
  
  // renderer
  var container = document.getElementById("container");
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  container.appendChild(renderer.domElement);
  
  // camera
  var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 700;
  
  // scene
  var scene = new THREE.Scene();
  
  // cylinder
  // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
  cylinder = new THREE.Mesh(new THREE.CylinderGeometry(150, 150, 500, 100, 100, false), new THREE.MeshPhongMaterial({
      // light
      specular: '#cccccc',
      // intermediate
      color: '#666666',
      // dark
      emissive: '#444444',
      shininess: 100
  }));
  cylinder.overdraw = true;
  cylinder.rotation.x = Math.PI * 0.2;
  //cylinder.rotation.y = Math.PI * 0.5;
  scene.add(cylinder);
  
  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x444444);
  scene.add(ambientLight);
  
  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0xcccccc);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);
  
  // start animation
  animate();
  </code></pre>
  
  <p><strong>Here is the Fiddle for the same: <a href="http://jsfiddle.net/dpPjD/" rel="nofollow">http://jsfiddle.net/dpPjD/</a></strong></p>
  
  <p>Let me know if you need any other information.</p>
  
  <p>Please suggest.</p>