title: Simple Three.js morphing
body: <p>It's far from easy to start using Three.js. The documentation is incomplete and messed up and other resources seem to be outdated. So please bear with me.</p>
  
  <p>How can I simply morph a geometry and/or mesh?</p>
  
  <p>Take this as an example. How can I make this cylinder bow like a banana?</p>
  
  <pre><code>var material = wireframe: new THREE.MeshBasicMaterial({color: 0x00ff00});
  var geometry = new THREE.CylinderGeometry(15, 15, 80, 30, 1, false)
    , mesh = new THREE.Mesh(geometry, material);
  </code></pre>
  
  <p>The authors of the Three.js examples tend to overdo it and throw so much unrelated stuff together in their demos, that a starter can't understand the point. Take <a href="http://threejs.org/examples/webgl_morphtargets_horse.html" rel="nofollow noreferrer">this morphing demo</a>.
  Why can't they come up with a simple Geometry object and morph it?</p>
  
  <p>As this is directly related to morphing, I'd also like to know, how I can create a rig that behaves realistically (i.e. arms don't fall off). In Cinema 4D this is really simple, but how can I tell Three.js that one morphing point should control multiple mesh points?</p>
  
  <p>Take this <a href="http://bot.janbuschtoens.de/" rel="nofollow noreferrer">simple Three.js roboter</a> as an example.</p>