In this blog post I'll explain how to make a TicTacToe game in your browser. To keep up with the current technologies and make things a bit more interesting, this version will be in 3D.

To get started I'd like to introduce the technologies used to create our game. WebGL is a JavaScript API used for rendering 3D and 2D graphic inside a compatible browser.  Three.js is a "light weight 3D library" for JavaScript, and you can get the latest version from GitHub. We'll also be using three.js boilerplate to quickly get started with our project, also downloadable from GitHub. But before all that we'll need to create our 3D models, and for that I used Blender, a free and open source 3D modeling tool.

In this blog post I won't be explaining how to work with blender, since there are a lot of awesome tutorials available for all skill levels. Images 1 and 2 show the final result.

To export a three.js compatible model from blender, we'll need to get three.js from GitHub. If you are using Windows, you're in luck because there is an official GitHub application available for easy repository fetching. After you have installed it, all you need is a GitHub account, click here, and click Clone in Windows. Head to the three.js folder which is created on your computer, and find "three.js\utils\exporters\blender\2.63\scripts\addons\io_mesh_threejs". Copy the entire folder in to "\Blender Foundation\Blender\2.63\scripts\addons\". In Blender menu select File -> User Preferences, select the Addons tab, and search for three.js. After you have marked three.js, close User Preferences, and select File -> Export -> Three.js. Make sure Flip YZ is checkbox is unchecked, and click Export Three.js.

Now that we have our model, we can easily show it in our web browser. We'll user three.js boilerplate to get this done quickly. Get the boilerplate from GitHub, and copy the downloaded files into a new folder. Also move your X.js and O.js models into that folder.

Here is the code you'll have to modify in boilerplates index.html.

// Line 91
var loader = new THREE.JSONLoader(true);
loader.load("X.js", function (Geometry) {
    Geometry.materials[0].color.setHex(0x0000FF); // Sets the material color to blue
  
    var mesh = new THREE.Mesh(Geometry, new THREE.MeshFaceMaterial()); // Creates new mesh
  
    mesh.scale.set(0.1, 0.1, 0.1); // Scales down the mesh
    mesh.position.set(-0.5, 0, 0); // Positions the mesh left from the center
    scene.add(mesh); // Adds mesh to the scene
});
  
loader.load("O.js", function (Geometry) {
    Geometry.materials[0].color.setHex(0xFF0000); // Sets the material color to red
  
    var mesh = new THREE.Mesh(Geometry, new THREE.MeshFaceMaterial());
  
    mesh.scale.set(0.1, 0.1, 0.1);
    mesh.position.set(0.5, 0, 0); // Positions the mesh right from the center
    scene.add(mesh);
});
  
var light = new THREE.PointLight(0xFFFFFF); // Adds white colored point light
light.position.set(-10, 0, 10);
scene.add(light);

We added both models in our scene, and the final result can be seen at image 3.

And that is it! Now we have finished our first step in creating TicTacToe game for a web browser. Next part will cover how to create the game grid, and how to show our models after a mouse click event inside a certain grid field.