This post is about Minecraft Character. We will play with the minecraft character, learn how to do your own and make it move. I recently saw this excelent minecraft items demo by @daniel_hede. It triggered a switch in my head :) I felt in love with minecraft style of 3d. It makes modeling so simple. You don’t need to learn how to use 3d modeling software like blender, maya and such. It is easy to create new model based on this style.
Try the minecraft plugin demo. This is the one we gonna build. I used @daniel_hede’s code and did many plugins to make it all simple and fun :) In this demo, i introduce three.js post processing for the first time. This is the Vignetting and sepia color that you see. Additionnaly, you can easily change the skins with the UI within the demo. Now let’s get started!
Let’s start coding
We start to create our world as usual. This initialize the renderer, the camera, its controls and a rendering loop. We setup the boilerplate for three.js and add a page title with some info on our little 3D demo. We just put the camera a little closer to scene center. Thus the character will be bigger on screen. We just can’t get enougth of it, can we ;)
Now we add a bit of post processing. It is the first time we talk about this, so let’s details it a bit. What is post processing (in a 3d context) ? Post processing is performed after rendering the 3D, hence the name. It applies on the screen as a whole. So the effects are in 2D. What’s it not ? It isn’t for 3d effect on specific objects in your world.
tquery.effectcomposer.js plugin provides a simple api to add
postprocessing to our world. It is a chained API on top of
three.js effect composer.
In our case, we first apply
.sepia() to change the colors toward
Then we apply
and mark the effects list
Not too hard hey ;)
Now that we go a world. We will create a minecraft character.
In fact, minecraft main character is called ‘steve’.
tQuery.MinecraftChar is the main class. It will create
a character model and expose all its limbs too e.g right legs or right arms.
More on that later.
As you can see, we specify
skinUrl parameter. It should point to the
image of the skin texture. You can change it anytime with
1 2 3
Now that we got our character setup, we just need to include it in our 3D world.
Make this model move
So we talked about exposed limbs… kinda gross, almost disturbing :)
In fact it just means each part of our model is exposed for you to
play with. It has the head, legs right and left, and the same for the arms.
It is all in
So the first step is to hook a function in the world rendering loop.
two parameters are passed
delta is the number
of seconds since the last iteration of the rendering loop.
now is the absolute
time in seconds.
We use those values to tune the animation. Thus it will be animated at the same
speed no matter the fps rate of your computer.
Here is simple animation of the head. So we hook the function and change
headGroup rotation to fit our taste.
We will make it do an
1 2 3 4
This is nice but the body would appear rather static if we move only the head.
Let’s make see how to make it walk.
When people walks or run, they swing theirs arm and legs.
So we need to change the rotation X of each of those limbs. First we get
an angle relative to current time. It will determine the position of the arms/legs.
The amplitude of the move has been tuned to
1.4, play with it and find the
value you like. Then you move the legs and arms by setting the rotation.
Just take care of balancing legs and arms thus his can keep his balance :)
1 2 3 4 5 6 7 8 9
And we are done! Pretty cool no ? :)
So we did a little character ala minecraft. We got a basic animations of it. Nevertheless it would be neat to make animations more robusts and generic. A new post will likely focus on this. I so love this field and how it make things easier.
That’s all folks. Have fun :)