topical media & game development
mobile-query-three-plugins-md2character-examples-index.htm / htm
<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle.js"></script>
<script src="../../../vendor/threex/THREEx.KeyboardState.js"></script>
<script src="../../keyboard/tquery.keyboard.js"></script>
<script src='../../checkerboard/tquery.checkerboard.js'></script>
<script src='../../fog/tquery.world.createfog.js'></script>
<script src="../tquery.md2character.js"></script>
<script src="../tquery.md2character.cameracontrols.js"></script>
<script src="../tquery.md2character.ratamahatta.js"></script>
<script src="../tquery.md2character.ratamahatta.keyboard.js"></script>
<body><script>
// # 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](http://learningthreejs.com/blog/2011/12/20/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.tRenderer().setClearColorHex( 0x000000, world.tRenderer().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](github.com/mrdoob/three.js/blob/master/src/scenes/FogExp2.js)
// and
// [fog](github.com/mrdoob/three.js/blob/master/src/scenes/Fog.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" :)
world.addFogExp2({density : 0.1});
// # The Columns
// initialize a material
// We will apply it to all the columns. It is [lambert lighting](http://en.wikipedia.org/wiki/Lambertian_reflectance)
// 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('../../assets/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](../../tquery.md2character.ratamahatta.keyboard.js)
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));
}
});
</script></body>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.