Animating Three.js Warping

‹prev | My Chain | next›

I was finally able to come up with a way to warp a Three.js plane into a cube-like shape last night. This does not seem like a good topic for 3D Game Programming for Kids as I still have a hard time coming up with a mental model for this.

Still, it seems cool enough that it is worth exploring a little more. Perhaps if I animate the flat plane warping from flat to cube, I might come up with a real life analogy...

So I Tween the column and row vertices pushing back into the previous column and row:

  function tweenVertex(vertex, dim, end) {
    new TWEEN
      .Tween({loc: vertex[dim]})
      .to({loc: end}, 8*1000)
      .onUpdate(function () {
        vertex[dim] = this.loc;
      })
      .start();
  }

I have a for loop running through the appropriate columns and rows invoking this function:

  var vertices = ground.geometry.vertices;
  for (var i=0; i<=faces; i++) {
    tweenVertex(vertices[2*(faces+1) + i], 'y', vertices[1*(faces+1) + i].y);
    // ...
  }

I do the same for depth:

  function tweenDepth(vertex, depth) {
    new TWEEN
      .Tween({amount: 0})
      .to({amount: depth}, 8*1000)
      .onUpdate(function () {
        vertex.z = this.amount;
      })
      .start();
  }

Which results in a nice animation:

Live demo

That is definitely a nice visualization. Although it does help me to get a clearer mental picture of what is going on, I cannot say that this has helped me to come with a useful mental model / real life equivalent. Ah well... shiny animation!

Day #709