Learning Three.js

or WebGL for Dummies

Funky Deformation for the Geometry of Your Three.js Game With threex.vertexanimation

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.vertexanimation. threex.vertexanimation is a three.js games extension which provides easy vertex animation. You can see your object move as if it’s got a life of its own! You can use it to make the objects in your game bounce, dance or move in funky ways. You can add it in your games to get a Flubber effect. The best part about it is that you can get creative. You can morph or deform your objects to transform them into other objects. It is really fun to experiment with!

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

How To Install It

You can install it via script tag

1
<script src='threex.vertexanimation.js'></script>

Or you can install with bower, as you wish.

1
bower install threex.vertexanimation

How To Use It

Here is a typical usage

1
2
3
4
5
6
7
8
9
10
// instanciate the animation object
var animation   = new THREEx.VertexAnimation(geometry, function(origin, position, delta, now){
    // here you put your formula, something clever which fit your needs
    var angle   = now*2 + position.y     * 10;
    position.x  = origin.x + Math.cos(angle)*0.1;
})
// update the animation at every frame
updateFcts.push(function(delta, now){
    animation.update(delta, now)
})

Comments