Gamification has been a buzzword on the net for some time now. Can’t remember when I first heard the term used. May have been when listening to the Think Vitamin podcast; think that it was this episode.

I was also listening to the TechStuff podcast last weekend and they had a podcast dedicated to the topic. Whilst listening to this podcast last weekend I was kind of inspired, which is odd as I was carrying out the weekly chore of ironing at the time!

I jotted down some thoughts and ideas at the time. However I feel that it’s one of those occasions where you have what seems to be a great idea at the time and then turns out to be a really crappy idea when you wake-up the next morning. I thought of using gamification principles to drive traffic to my personal site and to keep people coming back. Seemed a good idea at the time but now seems a rather lame idea.

In essence my thoughts were to give readers of my blog ‘points’ if they followed me on Twitter, submitted a genuine comment, followed a particular link, FaceBook ‘liked’ a particular post, etc. These points would either be displayed on the site in the form of a leaderboard or by using a badge system. I even thought that I might be able to get a few media types who I know to produce some nice badges for me. But, as I say, the next day, in the cold light of day it seemed a rather daft idea.

Stupid idea or not, it’s not stopped me from carrying out a little research about gamification every time I go online. Found a rather interesting post about gamification at the UX Magazine site.

Can’t remember how I came across the BigDoor site, whether it was via the TechStuff podcast or on one blog post or other. It seems like a very fast way of adding gamification elements to a web site but my concern is where is all of the data that’s being collected actually stored and how is it used? I know that if I create my own server-side code to support gamification on my site any user data will be stored in my backend database and it won’t be sold to any third party. I don’t have that same feeling about using someone else’s services.

Anyway, I”ve rambled on for long enough. My research into gamification will continue, be it the ethics behind it or the technical implementation. I will surely blog about it in the future.

*UPDATE* Just wanted to mention the Practical Ethics post on the ethics of gamification.

WhatFont, a nice little browser extension that makes finding out what a particular font is. Check it out.

I’ve plans to change the styling again but it can wait.

Work in Blender

To begin I returned to Blender and created a new 3D model. A model that was even more simplistic than my previous robot-type model. I wanted to produce something very simple that I could animate easily. I didn’t want to worry about having to add bones to my 3D model or anything like that. In the end I essentially created a box with some C-shaped ‘feet’ and I animated the movement of the feet and the box ‘body’ in Blender to give the illusion of, erm, a walking box I guess! An example of the final result can be seen here. Only works in WebGL-enabled browsers by the way.

As I write this post I’m trying to recall where I located the Blender Python script file that allowed me to export a javascript (.js) file from Blender. I’m fairly sure that I found it amongst the files that I’d downloaded from the three.js github repository, located down in the utils/exporters/blender path somewhere.

In order to export my model from Blender I used the Export > Three.js (.js) option from the Blender File menu; thus calling upon the Python export script that I’d previously installed.

Export option in Blender

From the Blender export window I then selected the options shown in the next image.

Blender Export Options

This gave me a .js file that contained the definition of my simple model.

I  want to briefly make a reference to the site of Kadrmas Concepts which is where I found a nice tutorial on how to use bones in Blender. I didn’t actually use bones in my simple model in the end but this post about modelling and exporting was to the point.

I also found the superb THREE Fab tool at the same time. I think that I mentioned this in my previous post; it’s a great way of importing models and just playing with primitives and lighting. I managed to solve some minor issues that I had with my basic animation by using this tool. It’s nice and easy to just drag and drop the exported .js file onto the window in the browser and view (and animate) your model.

Onto the interesting bit…

The Code

Again I’ve used the same code set-up that I’ve used and discussed previously in this series of blog posts. Therefore I’m not going to explain all of the details again such as how the require.js stuff works or setting-up of the basic 3D scene.

Here’s the first chunk of javascript.

require(['96methods/BotCharacter', 'libraries/RequestAnimationFrame', 'libraries/Three', 'jquery'], function(Character) {

	var camera, stage, renderer;
	var character = new Character('./models/robot02_01_feet.js');

	// Initialise and then animate the 3D scene!
	init();
	animate();

	function init() {

		// Begin loading the character model:
		character.load();

		// Instantiate the 3D scene:
		stage = new THREE.Scene();

		// Instantiate an Orthographic camera this time.
		// The Left/Right/Top/Bottom values seem to be relative to the scene's 0, 0, 0 origin.
		// The best result seems to come if the overall viewable area is divided in 2 and
		// the Left & Bottom values set to negative
		camera = new THREE.OrthographicCamera(
			window.innerWidth / -2, 	// Left
			window.innerWidth / 2,		// Right
			window.innerHeight / 2,		// Top
			window.innerHeight / -2,	// Bottom
			-2000,						// Near clipping plane
			1000 );						// Far clipping plane

		// Set the camera position:
		camera.position.y = 100;
		camera.position.x = 200;
		camera.position.z = 200;

		camera.lookAt(new THREE.Vector3(0, 0, 0));

		// Add the camera to the scene/stage:
		stage.add(camera);

		// Add some lights to the scene
		var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
		directionalLight.position.x = 1;
		directionalLight.position.y = 0;
		directionalLight.position.z = 0;
		stage.add( directionalLight );

		var directionalLight2 = new THREE.DirectionalLight(0xeeeeee, 2.0);
		// A different way to specify the position:
		directionalLight2.position.set(-1, 0, 1);
		stage.add( directionalLight2 );

		// Instantiate the renderer
		renderer = new THREE.WebGLRenderer();
		// .. and set it's size:
		renderer.setSize(window.innerWidth, window.innerHeight);

		// Place the renderer into the HTML (inside the #container div):
		$('#container').append(renderer.domElement);

	}

At line 4 I’m simply calling the constructor of my Character class again as I have in previous examples. This time I’m passing in an argument that specifies the path of my 3D model. The Character class will load this model, when the load() method is invoked, and will control the animation for me; more of that shortly.

Again, at lines 7 & 8, I am initialising the scene and beginning the animation loop. Following this is the definition of the init() method.

Main point of interest here is at line 13 where I call the load() method of my Character class. Think that’s the only main point of interest in the init() function actually!

This leads us to the remainder of the file and the animate() function.

	function animate() {
		// Defined in the RequestAnimationFrame.js file, this function means that the
		// animate function is called upon timeout:
		requestAnimationFrame( animate );

		// Find out if the robot has loaded:
		if(character.hasLoaded()) {
			// Add the character to the stage?
			if(!character.onStage()) {
				character.addToStage(stage);
			}
			// Animate:
			else {
				character.animateCharacter();
			}
		}

		render();

		// Update the character position
		TWEEN.update();
	}

	function render() {

		// *** Update the scene ***
		renderer.render(stage, camera);
	}
});

Lines 68 to 77 contain the key points of interest. Essentially here I’m trying to determine if my 3D model has loaded, if it has loaded have I added it to the stage yet and if it’s already on the stage I then call my animateCharacter() method to update the character animation.

Right, now onto the Character class definition.

define(['libraries/Three', 'libraries/mootools-core-1.4.2'], function() {

	return new Class(function(modelPath) {

		// Private members
		var mesh = null;
		var modelLoader = null;
		var loadedModel = false;

		var onStage = false;

		var animCycleDuration = 1000,
			numKeyframes = 39,
			scaleFactor = 20.5;

		var currentKeyframe,
			lastKeyframe;

		var lastFrameRenderedFlag = false;

		Object.append(this, {
			// Getters/setters
			getMesh: function() { return mesh; },
			setMesh: function(value) { mesh = value; },

			// Load the model
			load: function() {
				// Instantiate the JSON loader:
				modelLoader = new THREE.JSONLoader();

				// Initiate loading of the model and define callback:
				modelLoader.load( modelPath, function ( geometry ) {

					// Create a mesh based upon the loaded geometry:
					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xFF6060, morphTargets: true } ) );

					// Scale-up the model so that we can see it:
					mesh.scale.set( scaleFactor, scaleFactor, scaleFactor );

					// Perhaps set flag and the main scene can ask this character if it's loaded?
					loadedModel = true;
				});
			},

			// Checks if the character model has loaded:
			hasLoaded: function() {	return loadedModel; },
			// Checks if the character model has been added to the stage:
			onStage: function() { return onStage; },
			// Adds the character model to the stage:
			addToStage: function(stage) {
				stage.add(mesh);
				onStage = true;
			},

			animateCharacter: function() {

				// Calculate interpolation - how long a single frame is shown for:
				var interpolation = animCycleDuration / numKeyframes;

				// Determine the current frame (keyframe) by calculating how much
				// more time of our animation cycle remains to be played thru.
				var time = Date.now() % animCycleDuration;

				var keyframe = Math.floor( time / interpolation ) + 1;

				// Update the frame details if the keyframe just calculated is different to the
				// current keyframe:
				if ( keyframe != currentKeyframe ) {

					// Update the morphTargetInfluences array to progress the animation cycle:
					mesh.morphTargetInfluences[ lastKeyframe ] = 0;
					mesh.morphTargetInfluences[ currentKeyframe ] = 1;
					mesh.morphTargetInfluences[ keyframe ] = 0;

					// Track previous/last keyframe and the current keyframe:
					lastKeyframe = currentKeyframe;
					currentKeyframe = keyframe;

					// Not 100% sure about this little bit. I think it helps for a smoother animation,
					// especially when animation duration is long, according to the catchvar.com site!
					// However I have found that it screws up the my little bot animation so I've taken it out.
					// Essentially the movement is very jerky when it comes to the forward movement of the whole mesh.
					//mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
					//mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];

					// Determine if the character mesh should be moved forward.
					// The character mesh should be moved once the animation cycle has completed,
					// to provide the suggestion of continuous walking.

					// Has the final frame of the cycle been rendered and, thus, we are now going
					// to render the first frame in the cycle?
					if(lastFrameRenderedFlag) {
						// Clear the flag:
						lastFrameRenderedFlag = false;
						// The character in the Blender animation moves forward by 2 units during a complete
						// animation cycle, so want to move character by that amount
						// and factor in the scaling-up, hence multiplying scale factor by 2:
						mesh.position.x = mesh.position.x + (2* scaleFactor);
					}
					// The keyframe will be < the lastKeyframe when the last frame
					// of the animation cycle is being rendered, i.e. when the final
					// frame is reached:
					if(keyframe < lastKeyframe)
					{
						// Flag that the last frame has been reached:
						lastFrameRenderedFlag=true;
					}
				}
			}
		}); // End of Object.append
	});
});

I apologise as I have rather dumped a lot of code there. I’ve also written a lot of comments in that block of code.

The first interesting bit is on lines 12 to 14 where I’ve declared some local variables. Here they are again:

var animCycleDuration = 1000,
			numKeyframes = 39,
			scaleFactor = 20.5;

My animation in Blender runs for a second, so that’s where the 1000 came from, i.e. 1000 milliseconds. I have a total of 40 frames in my animation and I probably should have named my numKeyframes variable something like lastKeyframe as the frame numbering goes from 0 to 39. I’m scaling-up my model as it can barely be seen otherwise.

Next comes the load() method that we saw being called earlier in the init() function:

// Load the model
load: function() {
	// Instantiate the JSON loader:
	modelLoader = new THREE.JSONLoader();

	// Initiate loading of the model and define callback:
	modelLoader.load( modelPath, function ( geometry ) {

		// Create a mesh based upon the loaded geometry:
		mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xFF6060, morphTargets: true } ) );

		// Scale-up the model so that we can see it:
		mesh.scale.set( scaleFactor, scaleFactor, scaleFactor );

		// Perhaps set flag and the main scene can ask this character if it's loaded?
		loadedModel = true;
	});
},

I am using the JSONLoader class to load my 3D model. At line 32 I am calling the load() method and specifying a callback function that will be invoked once the model has loaded. Once loaded I define a mesh using the loaded model geometry, scale it up and set a flag to show that the model has loaded (this flag is used by the animate() function in my main block of javascript code to determine if the model is loaded).

Following this are the definitions of some methods used by the main javascript code to determine if the model is loaded, if it’s been added to the scene (or stage as I’ve called it) and a method used to add the loaded model to the stage.

Next comes the animateCharacter() method. Note I’ve reduced some of comments in the following section to make it a little easier to follow.

animateCharacter: function() {

	// Calculate interpolation - how long a single frame is shown for:
	var interpolation = animCycleDuration / numKeyframes;

	// Determine the current frame (keyframe) by calculating how much
	// more time of our animation cycle remains to be played thru.
	var time = Date.now() % animCycleDuration;

	var keyframe = Math.floor( time / interpolation ) + 1;

	// Update the frame details if the keyframe just calculated is different to the
	// current keyframe:
	if ( keyframe != currentKeyframe ) {

		// Update the morphTargetInfluences array to progress the animation cycle:
		mesh.morphTargetInfluences[ lastKeyframe ] = 0;
		mesh.morphTargetInfluences[ currentKeyframe ] = 1;
		mesh.morphTargetInfluences[ keyframe ] = 0;

		// Track previous/last keyframe and the current keyframe:
		lastKeyframe = currentKeyframe;
		currentKeyframe = keyframe;

		// Determine if the character mesh should be moved forward.
		// The character mesh should be moved once the animation cycle has completed,
		// to provide the suggestion of continuous walking.

		// Has the final frame of the cycle been rendered and, thus, we are now going
		// to render the first frame in the cycle?
		if(lastFrameRenderedFlag) {
			// Clear the flag:
			lastFrameRenderedFlag = false;
			// The character in the Blender animation moves forward by 2 units during a complete
			// animation cycle, so want to move character by that amount
			// and factor in the scaling-up, hence multiplying scale factor by 2:
			mesh.position.x = mesh.position.x + (2* scaleFactor);
		}
		// The keyframe will be < the lastKeyframe when the last frame
		// of the animation cycle is being rendered, i.e. when the final
		// frame is reached:
		if(keyframe < lastKeyframe) {
			// Flag that the last frame has been reached:
			lastFrameRenderedFlag=true;
		}
	}
}

At lines 58 to 64 I am essentially calculating which of my 40 keyframes I should be displaying.

The statement at line 68 is determining if there has been a change in the keyframe to be rendered since the last time this method was called. If so, the morphTargetInfluences array is updated so that the array cell, that refers to the frame that needs to be shown, is set to 1. Bearing in mind that currentKeyframe always refers to the frame being rendered on that pass. Next lines 76 and 77 store the currentKeyframe and keyframe ready for the next time around.

The code described thus far achieves the animation of our model; cycling through the frames of our animation and looping back once we have completed one full cycle of animation, i.e. once we’ve rendered all 40 frames of animation. The remainder of the code in the animateCharacter() method moves the whole model forwards a little bit each time we complete one cycle of animation. The result is that the character appears to walk slowly forwards.

The condition at line 85 determines if the lastFrameRenderedFlag has been set and, if it has, resets the flag and moves the model mesh forward by 2 units (the character model in Blender was 2 units in size) multiplied by the scale factor that was used to enlarge our model in the first case. The condition that follows this on line 96 determines if we are about to render the last frame in the animation cycle and, if so, sets the lastFrameRenderedFlag so that the mesh movement, as just described, can take place on the next time through the render sequence.

Conclusions

The working example can be found here. It’s a bit ugly but this is a work in progress. Also remember that it only works in WebGL-enabled browsers.

I’ve realised that the material applied to my model doesn’t seem to be showing up correctly. Pretty sure, upon editing this post, that it’s because of the mesh definition at line 35 of my BotCharacter.js code.

Whilst writing-up this post I discovered that my character model had the wrong pivot point, or centre of rotation. I was going to amend my example code so that the character walked in a circle by rotating the mesh each time an animation cycle was complete, but this was when I found that the character did not rotate as intended. I went back to the THREE Fab site and dropped-in my model. When rotating around the y-axis I saw the weird rotation again. Going back to take a look in Blender I recalled that the pivot point was out. This is something I’ll need to look into in the future. It raises a number of concerns that I have about how I’m achieving the character animation and if there’s a much better way of doing it. I realised that the centre-point of my 3D scene is the point around which the animating character will rotate. I have no idea at the moment if this centre-point can be moved while the character is animating or not. If anyone reading this has any thoughts on the topic and would like to enlighten me then please comment.

This post will look at the exporting of a 3D model from Blender to be used with three.js. I’ll create another post to look at how I then managed to produce a 3D model in Blender and animate it with three.js.

Blender

I had first used Blender several years ago, I even bought one of those ‘For Dummies’ books, but the Blender interface has changed since I last used the software and viewing a video seemed a nice quick way of diving back into it. Therefore I looked at a few Blender tutorials initially to get my head into the application.

After some hours playing around with what I’d seen in the video tutorials I managed to make an extremely crude-looking robot. When I say crude I don’t mean that it featured any phallic appendages! It was simply a very simplistic model.

In order to export my robot model from Blender I used the Export > COLLADA (.dae) option from the Blender File menu. This generated a Collada .dae file for me. At a later point in my experimentation with Blender I attempted to produce a very simplistic animation within Blender and to export this animation. Well this didn’t work terribly well until I installed a script for Blender that allowed me to export my model as a Three.js (.js) file. But more on that in my next post.

One of the first problems that I encountered when initially loading my robot model into the three.js scene was that of weirdly rotated objects. Essentially, objects that I had rotated in Blender in order to create my robot model were appearing non-rotated when imported into my scene. I went so far as to put a question up on the StackOverflow site but then, after investigation, managed to answer my own question. Well, ok I didn’t fix the problem myself but thanks again to the Mr. Doob github area I found the answer. I downloaded the three.js library from the ‘dev’ branch rather than the ‘master’ branch on github and my immediate problems were solved.

In order to be able to export my model from Blender this post came in handy; again on the Mr. Doob github pages. Although this only came into use when I began investigating animation of loaded models.

The Source

Anyway the code is as follows. I’ve based much of this code on my previous examples so some elements, such as my use of require() at the top , may make more sense if you read some of my earlier posts about my experimentation with three.js. I’ve only included the javascript source here.

I think that the code, with its comments, is fairly self explanatory.

require(['libraries/RequestAnimationFrame', 'libraries/Three', 'jquery'], function() {

	var camera, scene, renderer;
	var dae;

	// Create an instance of the collada loader:
	var loader = new THREE.ColladaLoader();

	// Need to convert the axes so that our model does not stand upside-down:
	loader.options.convertUpAxis = true;

	// Load the 3D collada file (robot01.dae in my example), and specify
	// the callback function that is called once the model has loaded:
	loader.load( './models/robot01.dae', function ( collada ) {

		// Grab the collada scene data:
		dae = collada.scene;

		// No skin applied to my model so no need for the following:
		// var skin = collada.skins[ 0 ];

		// Scale-up the model so that we can see it:
		dae.scale.x = dae.scale.y = dae.scale.z = 25.0;

		// Initialise and then animate the 3D scene
		// since we have now successfully loaded the model:
		init();
		animate();
	});

	function init() {

		// Instantiate the 3D scene:
		scene = new THREE.Scene();

		// Instantiate an Orthographic camera this time.
		// The Left/Right/Top/Bottom values seem to be relative to the scene's 0, 0, 0 origin.
		// The best result seems to come if the overall viewable area is divided in 2 and
		// the Left & Bottom values set to negative
		camera = new THREE.OrthographicCamera(
			window.innerWidth / -2, 	// Left
			window.innerWidth / 2,		// Right
			window.innerHeight / 2,		// Top
			window.innerHeight / -2,	// Bottom
			-2000,						// Near clipping plane
			1000 );						// Far clipping plane

		// Set the camera position so that it's up top and looking down:
		camera.position.y = 100;

		// Rotate around the x-axis by -45 degrees:
		camera.rotation.x -= 45 * (Math.PI/ 180);

		// Add the camera to the scene:
		scene.add(camera);

		// Add some lights to the scene
		var directionalLight = new THREE.DirectionalLight(0xeeeeee , 1.0);
		directionalLight.position.x = 1;
		directionalLight.position.y = 0;
		directionalLight.position.z = 0;
		scene.add( directionalLight );

		var directionalLight2 = new THREE.DirectionalLight(0xeeeeee, 2.0);
		// A different way to specify the position:
		directionalLight2.position.set(-1, 0, 1);
		scene.add( directionalLight2 );

		// Add the loaded model to the scene:
		scene.add(dae);

		// Instantiate the renderer
		renderer = new THREE.WebGLRenderer();
		// .. and set it's size:
		renderer.setSize(window.innerWidth, window.innerHeight);

		// Place the renderer into the HTML (inside the #container div):
		$('#container').append(renderer.domElement);
	}

	function animate() {
		// Defined in the RequestAnimationFrame.js file, this function
		// means that the animate function is called upon timeout:
		requestAnimationFrame( animate );

		render();
	}

	function render() {
		// *** Update the scene ***
		renderer.render(scene, camera);
	}
});

I found the best collision detection example at Mr.Doob’s three.js repository on github. In fact that are a number of examples there. These examples use a couple of utility files, namely CollisionUtils.js and Collisions.js that can be found along with the example code. I’m pretty sure that I checked out the latest revision of the three.js code from github but the CollisionUtils.js and Collisions.js utility files that are available here didn’t seem to come with it. I used these utility files in order to implement collision detection in my little exploration where they allowed me to use:

THREE.Collisions.colliders.push(
	THREE.CollisionUtils.MeshOBB( cube ) );

Essentially this creates an Object Bounding Box (OBB) around a THREE.Mesh object (cube in this example) and adds it to a collision detection list (THREE.Collisions.colliders as defined in Collisions.js). The MeshOBB() method is defined in the CollisionUtils.js file. In my code I added a number of cuboid objects to my 3D scene and also added them to the collision detection list (using the code snippet above). My plan was to then determine if my moving 3D object, or character, had collided with any of these cuboids.

In order to determine if my moving character had collided with any of the other objects in the scene (the objects on the collision detection list) I used the THREE.Ray class. The following segment of code determines the position of a theoretical focal point of this ray (think beam of light) that lies somewhere in front of our character. As our character rotates the focal point rotates also.

I believe that the distance specified in the second argument to the THREE.Ray constructor essentially represents the direction in which the ray is to be sent. I’ve used a value of 1000 in this example but it could have been a much smaller value.

// Using a little trigonometry calculate a point in
// space 1000 units in front of our character
var deltaX = Math.floor(Math.sin(mesh.rotation.y) * 1000);
var deltaZ = Math.floor(Math.cos(mesh.rotation.y) * 1000);

// Calculate where this collision focus point is in
// relation to our character position
var focusX = mesh.position.x - deltaX;
var focusZ = mesh.position.z - deltaZ;

// Fire a ray from the centre point of our character to the
// collision focus point
var ray = new THREE.Ray(mesh.position,
	new THREE.Vector3(focusX, 0, focusZ));

var c = THREE.Collisions.rayCastNearest( ray );

if(c && c.distance <= 50)
{
	console.log(c.distance);
	tween.stop();
}

The rayCastNearest() method is used to determine if the ray coincides with any of the objects that were added to the collision detection list that was populated earlier. If there is an object (or collider object as I’ve shown in the figure below) that the ray intersects then the object returned by the rayCastNearest() method includes a distanceproperty that tells us the distance between position of our character and the collider object. In the code extract above I’ve specified a distance of <= 50 as my character had a length of 100 and so 50 is the point at which the face of my character would potentially collide with any collider objects. If a collision occurs I stop the tweening update so that my character stops moving.

Note: In the figure above I’m pretty sure that I should have shown the z-axis as -z.

Once I’ve actually produced a practical demonstration of this theory I will post again with an example.

Finally

I just wanted to provide some further links as I did a little bit of trawling on the net when I was first researching into collision detection. I’m not sure that I’m using the best technique but there still seems to be validity in the methods that I’ve used. I came across a discussion on the Mr.Doob github pages where someone was unsure of how to find the direction for the THREE.Ray. The individual concerned did some searching themselves and came up with a slightly different method of determining the Ray direction than I did.

At one stage I was considering the use of the JigLibJS library as discussed on Tim Poon’s site. Didn’t go down this road in the end but could be interesting.

Of course I also found the code examples that come with the three.js library fairly useful too.

In the end I elected to use the MooTools library; actually I’m only using the Class definition of that library so far. I’m just rather unimpressed with how classes, sorry reference types, are defined in JavaScript. Certainly when compared to how easily and seemingly naturally this is done with other modern languages. There seem to be a number of different techniques, or patterns, in use by the JavaScript community but in the end I decided to just use MooTools. I think that my main reason for electing to use the MooTools library was due to my desire to find out how to distinguish between private and public class members in JavaScript. I was doing some Googling one day and found something about how to define private class members with MooTools. I know this can be done without resorting to the use of a framework but sometimes I just want to get on with things and not worry about the boring details. Note to self: have a good look at the underlying principles of reference types in JavaScript sometime, e.g. the use of prototype.

So, I’ve been playing with a bit more of the Three.js library, been using the Tween.js library to perform some very simple movement and the Require.js library to bring everything together in a structured way.

Using the require.js library allows me to have just a single <script> tag in my HTML that references my main JavaScript file, namely main.js.

Managing JavaScript Files with require.js

Here’s the HTML.  The main point of interest here is the <script> tag I think. I’ve added some buttons to control the movement of the 3D object that I’ll discuss in a bit. I’m not going to apologise for the lack of styling and the ugly buttons; but I am sorry about that! In future posts I will attempt to make things a little tidier.

<!doctype html>
<html lang="en">
	<head>
		<title>A moving shape - Made with three.js</title>
		<meta charset="utf-8">
	</head>
	<body>

		<div id="container"></div>
		<div>
			<input type="button" id="fwdbtn" value="FWD"/>
			<input type="button" id="rotateleftbtn" value="ROTATE LEFT"/>
			<input type="button" id="rotaterightbtn" value="ROTATE RIGHT"/>
		</div>

		<script data-main="js/main" src="js/require.js"></script>

	</body>
</html>

Next is the JavaScript. Firstly is my main.js file that creates the 3D scene, adds objects to the scene and assigns event handlers to the buttons that were defined in the HTML previously. The first point of interest is the use of the require() function (line 1 in the main.js file shown below). I’m not going to discuss the details of the require.js library, suffice to say that this line ensures that the Character.js, Tween.js, RequestAnimationFrame.js, three.js and jquery.js dependency files are loaded before the inner function is executed. I’ve found that the use of the require.js library has given me the ability to place JavaScript code in smaller files rather than one large file and means that I don’t have to place numerous <script> tags in my HTML. There are many other benefits to using the require.js and I urge you to take a look at it.

Animating

I’ve attempted to place all code that deals with my movable object, or character as I have called it, in its own JavaScript file, Character.js. The Character.js file contains the definition of the Character class that is instantiated on line 4 below. Below this a little jQuery is used to bind methods of the Character class to click events on the buttons.

require(['96methods/Character', 'libraries/Tween', 'libraries/RequestAnimationFrame', 'libraries/Three', 'jquery'], function(Character) {

	var camera, scene, renderer;
	var character = new Character();

	// Add some button click event handlers:
	$("#rotateleftbtn").bind('click', character.rotateCharacterLeft);
	$("#rotaterightbtn").bind('click', character.rotateCharacterRight);
	$('#fwdbtn').bind('click', character.forwardCharacter);

	// Initialise and then animate the 3D scene!
	init();
	animate();

Following this is the init() method again as I’ve used previously in other posts (and in fact seems almost like the three.js standard). The key diferences between this version and what I did previously are rotating the camera so that it’s looking down upon the scene a little and using the createCharacter() method to add the ‘character’ object to the scene. Again this method is defined in the Character.js file (see later in this post).

Then come the animate() and render() function calls to perform the scene update; again as I’ve described in my previous post. The key difference here is the addition of the TWEEN.update() method call (line 79). TWEEN is yet another JavaScript library that I’m using to give me tweening functionality. Essentially everytime the animate() function is called the character object’s update method is called to reposition my character.

	function init() {

		// Instantiate the 3D scene:
		scene = new THREE.Scene();

		// Instantiate an Orthographic camera this time.
		// The Left/Right/Top/Bottom values seem to be relative to the scene's 0, 0, 0 origin.
		// The best result seems to come if the overall viewable area is divided in 2 and
		// the Left & Bottom values set to negative
		camera = new THREE.OrthographicCamera(
			window.innerWidth / -2, 	// Left
			window.innerWidth / 2,		// Right
			window.innerHeight / 2,		// Top
			window.innerHeight / -2,	// Bottom
			-2000,						// Near clipping plane
			1000 );						// Far clipping plane

		// Set the camera position so that it's up top and looking down:
		camera.position.y = 100;
		// Rotate around the x-axis by -45 degrees:
		camera.rotation.x -= 45 * (Math.PI/ 180);

		// Add the camera to the scene:
		scene.add(camera);

		// Define a cylinder object, well a cone anyway:
		cylinder = new THREE.Mesh(
			new THREE.CylinderGeometry(25,	// Radius top
				100,						// Radius bottom
				100,						// Height
				25,							// Number of segments in circumference (i.e. how smooth)
				5,							// Number of segments high
				false						// Open ended
			),
			new THREE.MeshBasicMaterial( {color: 0x372AFF} )
		);
		// Position it slightly to the right of the scene...
		cylinder.position.x = 400;
		// ...and add it to the scene:
		scene.add(cylinder);

		// Define our character shape and location within the scene:
		character.createCharacter(0, 0);
		// Add it to the stage:
		scene.add(character.getMesh());

		// Instantiate the renderer
		renderer = new THREE.CanvasRenderer();
		// .. and set it's size:
		renderer.setSize(window.innerWidth, window.innerHeight);

		// Place the renderer into the HTML (inside the #container div):
		$('#container').append(renderer.domElement);

	}

	function animate() {
		// Defined in the RequestAnimationFrame.js file, this function means that the
		// animate function is called upon timeout:
		requestAnimationFrame( animate );

		render();

		// Update the character position
		TWEEN.update();
	}

	function render() {

		// *** Update the scene ***
		renderer.render(scene, camera);
	}
});

As mentioned earlier, I’m trying to place all of the code that handles my moveable object in the character.js file, and therefore in my Character class.

There’s more require.js magic here to define my character module and specify the dependencies for this module, i.e. the three.js, mootools-core-1.4.2.js and Tween.js files. Once these files have been loaded a new instance of the Class object is returned (and thus available to the main.js file). Details of how the Class function works can be found in the MooTools documentation (see links later in this post).

Firstly a number of private member variables are declared and initialised then, to differentiate between private members and public members, the class is ‘appended’ to (at line 24 of character.js) specifying the public methods.

The getMesh() and setMesh() accessor methods are simply used to get/set the mesh data that is encapsulated within the Character class.

The createCharacter() method is responsible for instantiating the mesh for the character and setting its initial position in the 3D scene.

// 96methods/Character.js

// Character class definition

define(['libraries/three', 'libraries/mootools-core-1.4.2', 'libraries/Tween'], function() {

	return new Class(function() {

		// Private members
		var mesh = null;
		var width = 25, height = 25, length = 100;

		var tween = null;

		var currentAngle = { angle: 0 };
		var targetAngle = { angle: 45 };

		var currentZPos = { zPos: 0 };
		var targetZPos = { zPos: 100 };

		var actualAngle = 0;
		var actualZPos = 0;

		Object.append(this, {
			// Getters/setters
			getMesh: function() { return mesh; },
			setMesh: function(value) { mesh = value; },

			// Methods
			createCharacter: function(xpos, ypos) {
				mesh = new THREE.Mesh(
					new THREE.CubeGeometry(width, height, length),
					new THREE.MeshBasicMaterial( { color: 0x121212} ) // Material
				);

				mesh.position.x = xpos;
				mesh.position.z = ypos;
				mesh.position.y = 0;
			},

The forwardCharacter(), rotateCharacterLeft() and rotateCharacterRight() methods are bound to the buttons in the HTML and are responsible for controlling the movement of the character (ok it’s an oblong and not a well defined character but I’m taking small steps at a time here) when the buttons are clicked. If we focus on the rotateCharacterLeft() method:

			rotateCharacterLeft: function(event) {

				// Reset angle info:
				actualAngle = 0;
				currentAngle = { angle: 0 };

				// Define the tween along with the update function:
				tween = new TWEEN.Tween(currentAngle)
					.to(targetAngle, 1000)
					.onUpdate(function() {

						// Calculate the difference between current angle and where we want to be:
						var difference = Math.abs(currentAngle.angle - actualAngle);
						actualAngle = currentAngle.angle;

						// Rotate about Y:
						mesh.rotation.y += difference * (Math.PI / 180);
					})
					.start();
			},

The tween variable is assigned an instance of the Tween class; again see the Tween.js library (links a little later in this post). The argument to the Tween class’s constructor, currentAngle in this case, specifies the variable that will be used to track the current state of the animation as time progresses. The to() method then takes the target state and the time in milliseconds that the animation should take. In my example I’ve set the duration to 1000 milliseconds or 1 second. The onUpdate() method allows us to specify a callback function that is called when the TWEEN.update() method is called (see the animate() method of main.js shown earlier). In the case of the rotateCharacterLeft() method example the angle will be updated until it reaches the target angle of 45 degrees. Each time the callback function is called we calculate the difference between the current angle as determined by the tween and the actual angle the character is positioned at and move the character by this difference. The end result is that the character object rotates by 45 degrees in 1 second.

Here’s the remainder of the character.js file. The main point of interest here is in the forwardCharacter() method where the translateZ() method is used to move the character object, rather than rotating it.

			rotateCharacterRight: function(event) {

				// Reset angle info:
				actualAngle = 0;
				currentAngle = { angle: 0 };

				// Define the tween along with the update function:
				tween = new TWEEN.Tween(currentAngle)
					.to(targetAngle, 1000)
					.onUpdate(function() {

						// Calculate the difference between current angle and where we want to be:
						var difference = Math.abs(currentAngle.angle - actualAngle);
						actualAngle = currentAngle.angle;

						// Rotate about Y:
						mesh.rotation.y -= difference * (Math.PI / 180);
					})
					.start();
			},

			forwardCharacter: function(event) {

				// Reset z-pos info:
				actualZPos= 0;
			 	currentZPos = { zPos: 0 };

			 	tween = new TWEEN.Tween(currentZPos)
			 		.to(targetZPos, 1000)
			 		.onUpdate(function() {
						// Calculate the difference between current frame number and where we want to be:
						var difference = Math.abs(currentZPos.zPos - actualZPos);
						actualZPos = currentZPos.zPos;

						// Moving in -Z direction:
						mesh.translateZ(-difference);
			 		})
			 		.start();
			}

		}); // End of Object.append

	});
});

Summary

I’ve uploaded an example of the movable object to demonstrate the code discussed in this post. One of my colleagues pointed out to me recently that none of my examples worked in IE. I think this is because of the issues with Canvas on earlier versions of IE.

I also appreciate that the graphics that these brief examples reveal are far from being attractive. Ok, so they are ugly and primitive (yep, quite literally primitive)! I hope that, in future posts, that will be resolved. At the moment I’m just happy to be playing around with the technology and recording my discoveries.

I decided with this post to place links mostly at the end of the piece. The silly idea was to tempt people to read the whole post before clicking on links and leaving my site.

Full details of the require.js library can be found at the require.js site. I recall that I initially heard about this library on the excellent Think Vitamin site.

I happened across a post by Mark Joseph Obcena whilst searching for information on how best to implement private methods in JavaScript. This then led me to begin using the MooTools framework. I also came across David Walsh’s post about the combination of require.js and MooTools that you may find interesting reading. Documentation for the MooTools framework is also a good starting point.

The tween.js code can be found on github. I found out about this library/engine at the Learning Three.js site. I’ve recently found another tweening library by gskinner. I may need to look into this one at some point in the future.

If you’ve found this post useful or if you’ve constructive comments please add a comment or send me an email to let me know. It’s sometimes nice to know if anyone out there in web land finds any of this stuff useful.

Looks interesting so thought that I’d share.

I’ve worked out how to implement an orthographic camera rather than a PerspectiveCamera and how to move the camera within the scene while ensuring that the camera is still pointing (or focused) on the centre of the scene.

I’ve simply taken the code from the last post and made some changes to it.

Here is my cube and cylinder example.

Here’s the HTML:

<!doctype html>
<html lang="en">
	<head>
		<title>A moving camera - Made with three.js</title>
		<meta charset="utf-8">
	</head>
	<body>

		<div id="container"></div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script src="js/Three.js"></script>
		<script src="js/RequestAnimationFrame.js"></script>
		<script src="cubedemo01.js"></script>

	</body>
</html>

No appreciable change since last time.

Here’s the JavaScript. Comments in the code to aid understanding.

I came across the RequestAnimationFrame function while looking at a three.js tutorial on the CreativeJS site. Details about RequestAnimationFrame can be found on Paul Irish’s site.

var camera, scene, renderer;
var cube, cylinder;

init();
animate();

function init() {

	var numberOfSegments = 1;

	// Instantiate the 3D scene:
	scene = new THREE.Scene();

	// Instantiate an Orthographic camera this time.
	// The Left/Right/Top/Bottom values seem to be relative to the scene's 0, 0, 0 origin.
	// The best result seems to come if the overall viewable area is divided in 2 and
	// the Left & Bottom values set to negative
	camera = new THREE.OrthographicCamera(
		window.innerWidth / -2, 	// Left
		window.innerWidth / 2,		// Right
		window.innerHeight / 2,		// Top
		window.innerHeight / -2,	// Bottom
		-2000,						// Near clipping plane
		1000 );						// Far clipping plane

	// Set the camera position so that it's not on top of our object in the scene:
	camera.position.y = 100;

	// Add the camera to the scene:
	scene.add(camera);

	// Define a Cylinder object
	cylinder = new THREE.Mesh(
		new THREE.CylinderGeometry(25,	// Radius top
			100,						// Radius bottom
			100,						// Height
			25,							// Number of segments in circumference (i.e. how smooth)
			5,							// Number of segments high
			false						// Open ended
		),
		new THREE.MeshBasicMaterial( {color: 0x372AFF} )
	);
	cylinder.position.x = 400;

	scene.add(cylinder);

	// Define the cube object
	cube = new THREE.Mesh(
		new THREE.CubeGeometry(200, 200, 200,
			numberOfSegments, numberOfSegments, numberOfSegments), // Cube geometry
		new THREE.MeshBasicMaterial( { color: 0x373737} ) // Material
	);

	// Add the cube to the scene:
	scene.add(cube);

	// Instantiate the renderer
	renderer = new THREE.CanvasRenderer();
	// .. and set it's size:
	renderer.setSize(window.innerWidth, window.innerHeight);

	// Place the renderer into the HTML (inside the #container div):
	$('#container').append(renderer.domElement);

}

function animate() {
	// Defined in the RequestAnimationFrame.js file, this function means that the
	// animate function is called upon timeout:
	requestAnimationFrame( animate );

	render();
}

function render() {

	// *** Update the scene ***

	// Set the camera to always point to the centre of our scene, i.e. at vector 0, 0, 0
	camera.lookAt( scene.position );

	// Move the camera in a circle with the pivot point in the centre of this circle...
	// ...so that the pivot point, and focus of the camera is on the centre of our scene.
	var timer = new Date().getTime() * 0.0005;

	camera.position.x = Math.floor(Math.cos( timer ) * 200);
	camera.position.z = Math.floor(Math.sin( timer ) * 200);

	renderer.render(scene, camera);
}

More posts to come on this topic I hope as I dig into the Three.js engine a little further.