Simple Three.js morphing

Question

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.

How can I simply morph a geometry and/or mesh?

Take this as an example. How can I make this cylinder bow like a banana?

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);

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 this morphing demo. Why can't they come up with a simple Geometry object and morph it?

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?

Take this simple Three.js roboter as an example.

Have you found any tutorials for it since? I am trying to achieve pupil dilation on the eye model I created from SphereGeometry. I can't figure out how to morph the sphere near its poles to achieve this effect. — Varin
threejs.org/examples/webgl_morphtargets.html - I realize it's years later and this probably didn't exist then. Regardless, here it is. — Jacksonkr

Lee Stemkoski Lee Stemkoski · Accepted Answer · 2013-05-26T17:22:47

I understand how you feel about the official Three.js demos being so feature-packed that it is difficult to extract the code for individual effects that you might want to incorporate into your own programs. That was my motivation for creating the collection of elementary and thoroughly commented examples at

http://stemkoski.github.io/Three.js/

While this collection doesn't contain the example you seek (at least not yet), I just wanted to share this link with you in the hopes that it might help you learn about other individual features in the future.

Simple Three.js morphing

1 Answers