index.js

MD2Character

This is annoted source of the examples for tQuery.MD2Character plugin. The live demo can be found here

 

The 3D World

First we initialize the world in 3D. With tQuery.createWorld(), we create a tQuery.World. With .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 With .start(), we start the rendering loop. So from now on, the world scene gonna be rendered periodically, typically 60time per seconds.

var world	= tQuery.createWorld().boilerplate().start();

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.

world.renderer().setClearColorHex( 0x000000, world.renderer().getClearAlpha() );

The Lights

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 :)

tQuery.createAmbientLight().addTo(world).color(0x444444);
tQuery.createDirectionalLight().addTo(world).position(-1,1,1).color(0xFF88BB).intensity(3);
tQuery.createDirectionalLight().addTo(world).position( 1,1,-1).color(0x4444FF).intensity(2);

The fog

We had a fog to the scene. For that, we use tquery.world.createfog.js plugins. It allows to create the 2 types of fog from three.js : fogexp2 and fog. 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" :)

world.addFogExp2({density : 0.1});

The Columns

initialize a material

We will apply it to all the columns. It is lambert lighting the 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.

var material	= new THREE.MeshLambertMaterial({
	ambient	: 0xFFFFFF,
	color	: 0xFFAAAA,
	map	: THREE.ImageUtils.loadTexture('images/water.jpg')
});

Build 15 Columns

loop over each column

for(var i = 0; i < 15; i++ ){

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 our tQuery.World.

	var column	= tQuery.createCylinder(0.2,0.2,2, material).addTo(world);

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 :)

	column.translateX(i%2 ? +1 : -1).translateY(1).translateZ(15/2 + -1*i);
}

The Ground

We create a large checkerboard with tquery.checkerboard.js plugin. 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.

tQuery.createCheckerboard({
	segmentsW	: 100,	// number of segment in width
	segmentsH	: 100	// number of segment in Height
}).addTo(world).scaleBy(100);

The Character

We use tQuery.RatamahattaMD2Character plugin. Its inherits from tQuery.MD2Character plugin. All the configuration for this particular character 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

var character	= new tQuery.RatamahattaMD2Character().attach(world).hookKeyboard();

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.

character.bind("loaded", function(){
	console.log("list animmation", Object.keys(character._meshBody.geometry.animations))
});

We setup the user camera controls. It will determine how the user camera will move in the world scene. We use tQuery.MD2Character.CameraControls plugin made specially for this case. With it, the camera will follow the MD2 character looking at it from above.

world.setCameraControls(new tQuery.MD2Character.CameraControls(character));

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 tQuery.Keyboard plugins to test the keyboard. if the key s is pressed, then use character.setSkin() to change the skin of the character

world.loop().hook(function(){
	var keyboard	= tQuery.keyboard();	// get keyboard instance
	if( keyboard.pressed("s") ){		// if the key 's' is pressed, change the skin
		character.setSkin(Math.floor(Math.random()*5));
	}
});