First what means MD2 ? MD2 is the file format used in the famous Quake II. Many of the monster you love to hate can be found in this format :) You can find md2 models at sitters-electronics or at planet quake.
You can use it easily in three.js thanks to oosmoxiecode He wrote a nice converter from MD2 to three.js json format. He wrote a post about it with plenty of usefull info on the subject. alteredq wrote several cool demos using it.
Let’s Get Started
Nice demo no ? You can try it here. Let’s code it!
The 3D World
First we initialize the world in 3D.
tQuery.createWorld(), we create a
.boilerplate(), we setup a boilerplate on this world. A boilerplate is
a fast way to get you started on the right foot. It is the
learningthreejs boilerplate for three.js
.start(), we start the rendering loop. So from now on, the world scene
gonna be rendered periodically, typically 60time per seconds.
Change the background color. This confusing line ensure the background of the
3D scene will be rendered as
0x000000 color, aka black. We set a black
background to give an impression of night.
Here we setup the lights of our scene. This is important as it determine how your scene looks. We add a ambient light and 2 directional lights. The ambient light is a dark grey, to simulate the lack of light during the night. We setup a directional light in front colored redish…. This is like a setting sun. In the opposite direction, we put another direction light, bluish. This is like the moon. Well this was my rational :)
1 2 3
We had a fog to the scene.
For that, we use
It allows to create the 2 types of fog from three.js
density is the density of the fog. 0.01 is very light, 0.9 is almost opaque.
In general, fogs are a nice visual trick. It is rather cheap to compute
and limits the depth of what you see.
It is a nice trick to hide the “end of the world” :)
initialize a material
We will apply it to all the columns. It is lambert lighting
ambient is the color which gonna be combined with be combined with the ambient
light we initialized on top.
color will be combined with the
directional lights. and
map gives the texture to use.
1 2 3 4 5
Build 15 Columns
loop over each column
Create the cylinder. We pass some parameters to the contructor to setup
the size we see fit, and we add the material we want to apply on the
cylinder. Then we use
.addTo() to add our object to
Change the position of the column. We translate the column to build a kind of alley. Thus the character will be able to run inside it :)
We create a large checkerboard with
We scale the checkerboard to 100 per 100 units in the 3D world. Thus it is
quite large and disappears into the fog. It gives the cheap impression of
an infinite checkerboard.
1 2 3 4
tQuery.RatamahattaMD2Character plugin. Its inherits from
tQuery.MD2Character plugin. All the configuration for this particular
ratamahatta is already done for you.
We attach it to tQuery world.
Additionnaly we use
.hookKeyboard() which bind arrow key to character moving.
This function is part of
keyboard plugins for ratamahatta
Here we show an example of binding the “loaded” event. It is notified once the whole characters data are loaded (texture, mesh for animations of body and weapons). It just display the name of the available animations.
1 2 3
We setup the user camera controls.
It will determine how the user camera will move in the world scene.
tQuery.MD2Character.CameraControls plugin made specially
for this case. With it, the camera will follow the MD2 character looking
at it from above.
Change the Skin by Keyboard
hook a function in the rendering loop. This function will be executed everytime
the scene is rendered. Within this function, we will use
plugins to test the keyboard. if the key
s is pressed, then use
to change the skin of the character.
1 2 3 4 5 6
So we have seen what is possible to do with
It is a rather short code for what you got on the screen, if you ask me.
Btw all that released under MIT license.
I think i like the code walkthru format.
I find it efficient to describe tQuery examples and fast for me to generate.
It is directly derived from annoted doc format
as you can see here.
I will likely do more in the future.
That’s all folks. Have fun :)