title: Manipulate objects in the browser with three.js using the mouse
body: <p>I have this piece of code (see below) that I used to draw a cube with <code>three.js</code>:</p>
  
  <pre><code>        // revolutions per second
          var angularSpeed = 0.0; 
          var lastTime = 0;
  
          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(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 Length, Height, Width
          var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 200, 200), new THREE.MeshBasicMaterial({
              wireframe: true,
              color: '#ff0000'
          }));
          cube.rotation.x = Math.PI * 0.1;
          scene.add(cube);
  
          // start animation
          animate();
  </code></pre>
  
  <p>Does anyone know whether is it possible to allow the user to change the size of the cube by dragging the edges using the mouse?</p>