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.md2character. threex.md2character is a three.js game extension which provides a model of a monster. His name is ‘ratmahatta’ and is from quake era. It is animated, can hold a weapon, skin may be changed. Pretty sweet. you got 12 weapons to choose from, 5 different skins and 16 distinct animations. Pretty complete! It is easy to include in your game, maybe in a cave or a dungeon :) It is from webgl_morphtargets_md2.html three.js example. The model is make by Brian Collins and converted by @oosmoxiecode’s MD2 converter.

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

examples/select.html [view source] : It shows all the possibilities for the skins, the weapons and the animations.

examples/ratmahattaplayer.html [view source] : It shows how to controls the mesh as if it was a player in a game with input in the keyboard wasd or arrows keys.

How To Install It

You can install it via script tag

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

Or you can install with bower, as you wish.

1 bower install threex.md2character

How To Use It

threex.md2characterratmahatta.js

You typically create a ratamahatta like this

1 2 var ratamahatta = new THREEx.MD2CharacterRatmahatta () scene.add ( ratamahatta.character.object3d )

Don’t forget to update it when you render with ratamahatta.update(delta) .Internally, it create a character and a controls. You can use them directly. * ratamahatta.character instance of THREEx.MD2Character * ratamahatta.controls instance of THREEx.MD2CharacterControls

It has simple functions to set the skin, weapon and animations.

ratamahatta.skinNames is the names of available skins. It has 5 different skins ["ratamahatta", "ctf_b", "ctf_r", "dead", "gearwhore"]

is the names of available skins. It has 5 different skins ratamahatta.setSkinName(skinName) set the skin based on its name

set the skin based on its name ratamahatta.weaponsNames is the names of available weapons. It has 12 animation ["none", "weapon", "w_bfg", "w_blaster", "w_chaingun", "w_glauncher", "w_hyperblaster", "w_machinegun", "w_railgun", "w_rlauncher", "w_shotgun", "w_sshotgun"]

is the names of available weapons. It has 12 animation ratamahatta.setWeaponName(weaponName) set the weapon based on its name

set the weapon based on its name ratamahatta.animationNames is the names of available animation. It has 16 animations ["stand", "run", "attack", "pain", "jump", "flip", "salute", "taunt", "wave", "point", "crstand", "crwalk", "crattack", "crpain", "crdeath", "death"]

is the names of available animation. It has 16 animations ratamahatta.setAnimationName(animationName) set the animation based on its name

threex.md2charactercontrols.js

First you create controls for your character like this

1 var controls = new THREEx.MD2CharacterControls ( character.object3d )

Dont forget to update it when you render with controls.update(delta, now) . The character is controlled by controls.inputs properties. You just have to set them to fit your need.

control.inputs.right is true if the character must go right

is true if the character must go right control.inputs.left is true if the character must go left

is true if the character must go left control.inputs.up is true if the character must go forward

is true if the character must go forward control.inputs.down is true if the character must go backward

threex.md2character.js

It provide the base to play with the model. It is a modified version of MD2Character.js from this webgl_morphtargets_md2.html three.js example.

First you create it.

1 var character = new THREEx.MD2Character ()

Dont forget to update it at every frame with a character.update(delta)