title: Change width/height/length of 3D Cube created with Three.js at runtime
body: <p>Can we change the dimension "width/height/length" of 3D Cube created with Three.js at runtime?</p>
  
  <p>Like I got a Fiddle in SO which changes Color of Cube at run time : <strong><a href="http://jsfiddle.net/mpXrv/1/" rel="nofollow">http://jsfiddle.net/mpXrv/1/</a></strong></p>
  
  <p>Similarly can we change the Dimension??</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;
  &lt;div class="inputRow clear" id="dimensionsNotRound" data-role="tooltip"&gt;
      &lt;label class="grid-8"&gt;Dimensions (mm):&lt;/label&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      &lt;div&gt; &lt;span&gt;Length&lt;/span&gt;
  
          &lt;input class="numeric-textbox" type="text" value=""&gt;
          &lt;br/&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;div&gt; &lt;span&gt;Width&lt;/span&gt;
  
          &lt;input class="numeric-textbox" type="text" value=""&gt;
          &lt;br/&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;div&gt; &lt;span&gt;Height&lt;/span&gt;
  
          &lt;input class="numeric-textbox" type="text" value=""&gt;
          &lt;br/&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;button id="btn"&gt;Click me to change the Dimensions&lt;/button&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>    //Script for 3D Box 
  
  
  // revolutions per second
  var angularSpeed = 0.2;
  var lastTime = 0;
  
  // 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;
      cube.rotation.y += 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(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 700;
  
  // scene
  var scene = new THREE.Scene();
  
  // cube
  var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), new THREE.MeshLambertMaterial({
      color: '#cccccc'
  }));
  cube.overdraw = true;
  cube.rotation.x = Math.PI * 0.1;
  cube.rotation.y = Math.PI * 0.3;
  scene.add(cube);
  
  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x888888);
  scene.add(ambientLight);
  
  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0x666666);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);
  
  // start animation
  animate();
  </code></pre>
  
  <p>Here is the Fiddle for the same! <strong><a href="http://jsfiddle.net/EtSf3/1/" rel="nofollow">http://jsfiddle.net/EtSf3/1/</a></strong></p>
  
  <p>Let me know if you need any other information.</p>
  
  <p>Please suggest.</p>