{"id":1085,"date":"2013-06-05T11:57:37","date_gmt":"2013-06-05T11:57:37","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=1085"},"modified":"2013-06-05T11:57:37","modified_gmt":"2013-06-05T11:57:37","slug":"3d-board-game-in-a-browser-using-webgl-and-three-js-part-2","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/3d-board-game-in-a-browser-using-webgl-and-three-js-part-2\/","title":{"rendered":"3D board game in a browser using WebGL and Three.js, part 2"},"content":{"rendered":"

In a previous article<\/a> we’ve built the basic structure of our 3D checkers game and ended up with drawing a simple cube. In this article we’ll add the board and the pieces. By the end of this part you’ll have something like that looks like this:<\/p>\n

\"webgl_3d_checkers_board_with_pieces2\"<\/a><\/p>\n

First, download and copy the content from the 3D assets\u00a0archive<\/a> into 3d_assets\/<\/em> folder.<\/p>\n

Note:<\/strong> Unless specified otherwise, most of the code from this article will go into js\/BoardController.js<\/strong>.<\/p>\n

Let’s start with some variable declarations:<\/p>\n

\r\n\r\nvar cameraController;\r\n\r\nvar lights = {};\r\nvar materials = {};\r\n\r\nvar pieceGeometry = null;\r\nvar boardModel;\r\nvar groundModel;\r\n\r\nvar squareSize = 10;\r\n\r\n<\/pre>\n
The name of the variables should be self-explanatory and as we go along they will make more sense.<\/p>\n
Creating a light<\/h2>\n
Before adding any objects into our scene, we need to create at least one light or else the objects will appear black. So, create a initLights<\/strong> function after initEngine:<\/em><\/p>\n
\r\n\r\nfunction initLights() {\r\n    \/\/ top light\r\n    lights.topLight = new THREE.PointLight();\r\n    lights.topLight.position.set(0, 150, 0);\r\n    lights.topLight.intensity = 1.0;\r\n\r\n    \/\/ add the lights in the scene\r\n    scene.add(lights.topLight);\r\n}\r\n\r\n<\/pre>\n
For now just a point light is created and placed above the scene. The newly created function must be called from drawBoard<\/em> after the initEngine<\/em> call.<\/p>\n
Creating the materials<\/h2>\n
Now we need to create some materials for the objects so that they will not appear in wireframe like the cube from the previous article. So, create a initMaterials<\/strong> function after initLights<\/em>:<\/p>\n
\r\nfunction initMaterials() {\r\n    \/\/ board material\r\n    materials.boardMaterial = new THREE.MeshLambertMaterial({\r\n        map: THREE.ImageUtils.loadTexture(assetsUrl + 'board_texture.jpg')\r\n    });\r\n\r\n    \/\/ ground material\r\n    materials.groundMaterial = new THREE.MeshBasicMaterial({\r\n    \ttransparent: true,\r\n    \tmap: THREE.ImageUtils.loadTexture(assetsUrl + 'ground.png')\r\n    });\r\n\r\n    \/\/ dark square material\r\n    materials.darkSquareMaterial = new THREE.MeshLambertMaterial({\r\n    \tmap: THREE.ImageUtils.loadTexture(assetsUrl + 'square_dark_texture.jpg')\r\n    });\r\n    \/\/\r\n    \/\/ light square material\r\n    materials.lightSquareMaterial = new THREE.MeshLambertMaterial({\r\n    \tmap: THREE.ImageUtils.loadTexture(assetsUrl + 'square_light_texture.jpg')\r\n    });\r\n\r\n    \/\/ white piece material\r\n    materials.whitePieceMaterial = new THREE.MeshPhongMaterial({\r\n    \tcolor: 0xe9e4bd,\r\n    \tshininess: 20\r\n    });\r\n\r\n    \/\/ black piece material\r\n    materials.blackPieceMaterial = new THREE.MeshPhongMaterial({\r\n    \tcolor: 0x9f2200,\r\n    \tshininess: 20\r\n\t});\r\n\r\n    \/\/ pieces shadow plane material\r\n    materials.pieceShadowPlane = new THREE.MeshBasicMaterial({\r\n        transparent: true,\r\n        map: THREE.ImageUtils.loadTexture(assetsUrl + 'piece_shadow.png')\r\n    });\r\n}\r\n\r\n<\/pre>\n
On line 3 a non-shiny material for the board is created with a texture for the color map.<\/p>\n
On line 8 a flat material is created for the ground. The ground will fake the board shadow, so a transparent texture is loaded for the color map. When using transparent images the material’s transparent<\/em> property must be set to true<\/em>.<\/p>\n
The board’s squares will be created as individual objects, so on lines 14 and 19 the materials for the dark and light square is created.<\/p>\n
On lines 24 and 30 a material is created for each piece type. Because we want some shininess on the pieces, a MeshPhongMaterial<\/a> was chosen.<\/p>\n
The shadow cast by the pieces on the board will be faked using planes placed under them with a material as shown on line 36.<\/p>\n
Now that we have the initMaterials<\/em> function created, let’s call it from drawBoard<\/em> just after the initLights<\/em> call.<\/p>\n
Loading 3D objects from external files<\/h2>\n
With the lights and materials created, we’re ready to load the board and the piece. If you look in the 3d_assets\/<\/em> folder you’ll find the following files: board.js<\/strong>, board.obj, piece.js<\/strong> and piece.obj.<\/p>\n
The .js files are the ones that will be loaded. These are created from the .obj files using the python script from three.js\/utils\/converters\/obj\/convert_obj_three.py<\/em> like this:<\/p>\n
\r\n\r\npython\u00a0convert_obj_three.py\u00a0-i board.obj -o board.js\r\n\r\n<\/pre>\n
Note:<\/strong> You’ll need Python 2.x installed on you computer to run that command.<\/p>\n
If you want to modify the 3D objects or maybe to just have a look at them, you can open the .obj files in a 3D modeling application like Autodesk Maya or 3ds Max.<\/p>\n
Note:<\/strong> The pivot point<\/em> for the board was modified to sit on top of it, at the top-left corner; the pivot point for the piece was placed at the base.<\/p>\n
Now let’s modify our initObjects<\/em> function like this:<\/p>\n
\r\nfunction initObjects(callback) {\r\n    var loader = new THREE.JSONLoader();\r\n    var totalObjectsToLoad = 2; \/\/ board + the piece\r\n    var loadedObjects = 0; \/\/ count the loaded pieces\r\n\r\n    \/\/ checks if all the objects have been loaded\r\n    function checkLoad() {\r\n        loadedObjects++;\r\n\r\n        if (loadedObjects === totalObjectsToLoad && callback) {\r\n            callback();\r\n        }\r\n    }\r\n\r\n    \/\/ load board\r\n    loader.load(assetsUrl + 'board.js', function (geom) {\r\n        boardModel = new THREE.Mesh(geom, materials.boardMaterial);\r\n\r\n        scene.add(boardModel);\r\n\r\n        checkLoad();\r\n    });\r\n\r\n    \/\/ load piece\r\n    loader.load(assetsUrl + 'piece.js', function (geometry) {\r\n        pieceGeometry = geometry;\r\n\r\n        checkLoad();\r\n    });\r\n\r\n    scene.add(new THREE.AxisHelper(200));\r\n}\r\n<\/pre>\n
On line 2 an instance of JSONLoader<\/a> is created that will be used to load the external 3D models. Since the objects are loaded via AJAX we can’t call the success callback right away, but after they are loaded. So between the lines 3 and 13 we have some code that will help us to do that.<\/p>\n
On line 16 the board model is loaded by passing a URL and a callback function to the loader’s load method. After the board is loaded we create a mesh from the loaded geometry and add it to the scene. On line 21 we verify if all the needed objects have been loaded so that we could call the success callback passed to initObjects<\/em> function.<\/p>\n
On line 25 the piece is loaded. Since we’ll need to create multiple pieces from the loaded geometry we save it for later use. We’ll add the pieces into our scene\u00a0 later.<\/p>\n
On line 31 we’ll add an AxisHelper<\/strong> into the scene to be able to see the XYZ axes to help us visualize the objects position.<\/p>\n
Loading our project in the browser right now you should see something like this:<\/p>\n
\"webgl_3d_checkers_board1\"<\/a><\/p>\n
As you can see the board is automatically positioned so that the top-left corner is at (0,0,0). This happened because the pivot point position was changed in the 3D modeling application before exporting the model. In this way we’ll only have to work with positive values for X and Z axes when placing the squares and pieces.<\/p>\n
Now let’s add the squares and the ground that will fake the board shadow:<\/p>\n
\r\n\r\n\/\/ load board\r\nloader.load(assetsUrl + 'board.js', function (geom) {\r\n    boardModel = new THREE.Mesh(geom, materials.boardMaterial);\r\n    boardModel.position.y = -0.02;\r\n\r\n...\r\n\r\n\/\/ load piece\r\n...\r\n\r\n\/\/ add ground\r\ngroundModel = new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 1, 1), materials.groundMaterial);\r\ngroundModel.position.set(squareSize * 4, -1.52, squareSize * 4);\r\ngroundModel.rotation.x = -90 * Math.PI \/ 180;\r\n\/\/\r\nscene.add(groundModel);\r\n\r\n\/\/ create the board squares\r\nvar squareMaterial;\r\n\/\/\r\nfor (var row = 0; row < 8; row++) {\r\n    for (var col = 0; col < 8; col++) {\r\n        if ((row + col) % 2 === 0) { \/\/ light square\r\n            squareMaterial = materials.lightSquareMaterial;\r\n        } else { \/\/ dark square\r\n            squareMaterial = materials.darkSquareMaterial;\r\n        }\r\n\r\n        var square = new THREE.Mesh(new THREE.PlaneGeometry(squareSize, squareSize, 1, 1), squareMaterial);\r\n\r\n        square.position.x = col * squareSize + squareSize \/ 2;\r\n        square.position.z = row * squareSize + squareSize \/ 2;\r\n        square.position.y = -0.01;\r\n\r\n        square.rotation.x = -90 * Math.PI \/ 180;\r\n\r\n        scene.add(square);\r\n    }\r\n}\r\n\r\n<\/pre>\n
To be sure that the pieces and the squares do not intersect the board is moved slightly in negative Y axis on line 4. We’ve used a value of -0.02 because the squares we’ll be positioned at -0.01 along the Y axis.<\/p>\n
On line 12 the ground is created and on line 13 it’s moved to match the board position using the squareSize<\/em> property. Remember that we’ve set the value for this property to 10 in the beginning. The board and the piece have been modeled especially for that value. The -1.52 value for the Y axis was taken from the 3D modeling software by measuring the board height and by adding the 0.02 value used to move the board down.<\/p>\n
On line 14 the ground needs to be rotated -90 degree along the X axis because a THREE.PlaneGeometry will be positioned along the XY plane.<\/p>\n
Note:<\/strong> Three.js works with radians, so if we want to use degrees we need to convert the values.<\/p>\n
<\/strong>From line 19 the board’s squares are added.<\/p>\n
Right now the camera will look and orbit around the board’s top-left corner, around the (0,0,0) position. Let’s change that by going into the initEngine function and modifying the camera properties:<\/p>\n
\r\n\/\/ create camera\r\ncamera = new THREE.PerspectiveCamera(35, viewWidth \/ viewHeight, 1, 1000);\r\ncamera.position.set(squareSize * 4, 120, 150);\r\ncameraController = new THREE.OrbitControls(camera, containerEl);\r\ncameraController.center = new THREE.Vector3(squareSize * 4, 0, squareSize * 4);\r\n<\/pre>\n
On line 3 we’ve modified the X position of the camera and on line 5 we’ve told the camera controller to look at and move around the board’s center position.<\/p>\n
The top light also needs to be repositioned:<\/p>\n
\r\n\r\nlights.topLight.position.set(squareSize * 4, 150, squareSize * 4);\r\n\r\n<\/pre>\n
Refresh the browser and you should see this:<\/p>\n
\"webgl_3d_checkers_board2\"<\/a><\/p>\n
Adding the checkers pieces<\/h2>\n
With the board added and looking nice we are now ready to add the pieces in their starting position. To make that happen we’ll need a variable that will hold the pieces and one public method to add tthem. With that in mind modify the BoardController.js file like this:<\/p>\n
\r\n...\r\nvar squareSize = 10;\r\n\r\nvar board = [\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0]\r\n];\r\n\r\n...\r\n\r\nthis.drawBoard = function () {\r\n...\r\n};\r\n\r\nthis.addPiece = function (piece) {\r\n    var pieceMesh = new THREE.Mesh(pieceGeometry);\r\n    var pieceObjGroup = new THREE.Object3D();\r\n    \/\/\r\n    if (piece.color === CHECKERS.WHITE) {\r\n        pieceObjGroup.color = CHECKERS.WHITE;\r\n        pieceMesh.material = materials.whitePieceMaterial;\r\n    } else {\r\n        pieceObjGroup.color = CHECKERS.BLACK;\r\n        pieceMesh.material = materials.blackPieceMaterial;\r\n    }\r\n\r\n    \/\/ create shadow plane\r\n    var shadowPlane = new THREE.Mesh(new THREE.PlaneGeometry(squareSize, squareSize, 1, 1), materials.pieceShadowPlane);\r\n    shadowPlane.rotation.x = -90 * Math.PI \/ 180;\r\n\r\n    pieceObjGroup.add(pieceMesh);\r\n    pieceObjGroup.add(shadowPlane);\r\n\r\n    pieceObjGroup.position = boardToWorld(piece.pos);\r\n\r\n    board[ piece.pos[0] ][ piece.pos[1] ] = pieceObjGroup;\r\n\r\n    scene.add(pieceObjGroup);\r\n};\r\n\r\n<\/pre>\n
On line 4 we’ll use a 2 dimensional 8×8 array to create an internal board representation.<\/p>\n
From line 21 the addPiece<\/strong> method is defined. This function will expect as its only parameter an object with properties related to the piece, like color and position.<\/p>\n
Because we’ll use a textured plane under the piece to fake the shadow on the board, on line 23 an instance of Object3D<\/a> is created that will group the piece mesh and the shadow plane together.<\/p>\n
Between line 25 and 31 the piece group gets assigned a WHITE or BLACK color and the right material is assigned to the piece mesh.<\/p>\n
On line 34 the shadow plane is created and on line 37 and 38 the piece mesh and the shadow plane are grouped together.<\/p>\n
On line 40 the piece group is positioned using the pos<\/em> property from the function’s parameter object. Since its value will be an array holding the position in a 8×8 array, we need to find out the position in our 3D space using the boardToWorld<\/em> function that will be created immediately.<\/p>\n
On line 42 the piece group is stored in the internal board representation and also added in the scene on line 44.<\/p>\n
Now let’s add the boardToWorld<\/strong> function right after onAnimationFrame<\/em>:<\/p>\n
\r\n\r\nfunction boardToWorld (pos) {\r\n    var x = (1 + pos[1]) * squareSize - squareSize \/ 2;\r\n    var z = (1 + pos[0]) * squareSize - squareSize \/ 2;\r\n\r\n    return new THREE.Vector3(x, 0, z);\r\n}\r\n\r\n<\/pre>\n
The above function will return the center position of the right square.<\/p>\n
The last thing we need to do in BoardController.js is to make the drawBoard<\/em> function receive a callback:<\/p>\n
\r\n\r\nthis.drawBoard = function (callback) {\r\n    ...\r\n    initObjects(function () {\r\n        onAnimationFrame();\r\n\r\n        callback();\r\n    });\r\n}\r\n\r\n<\/pre>\n
Now open the Game.js<\/strong> file and modify it like this:<\/p>\n
\r\n\r\nvar CHECKERS = {\r\n\tWHITE: 1,\r\n    BLACK: 2\r\n};\r\n\r\n...\r\n\r\nvar boardController = null;\r\n\r\nvar board = [\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0],\r\n    [0, 0, 0, 0, 0, 0, 0, 0]\r\n];\r\n\r\n...\r\n\r\nfunction init() {\r\n    ...\r\n    boardController.drawBoard(onBoardReady);\r\n}\r\n\r\nfunction onBoardReady() {\r\n    \/\/ setup the board pieces\r\n    var row, col, piece;\r\n    \/\/\r\n    for (row = 0; row < board.length; row++) {\r\n        for (col = 0; col < board[row].length; col++) {\r\n            if (row < 3 && (row + col) % 2) { \/\/ black piece\r\n                piece = {\r\n                    color: CHECKERS.BLACK,\r\n                    pos: [row, col]\r\n                };\r\n            } else if (row > 4 && (row + col) % 2) { \/\/ white piece\r\n                piece = {\r\n                    color: CHECKERS.WHITE,\r\n                    pos: [row, col]\r\n                };\r\n            } else { \/\/ empty square\r\n                piece = 0;\r\n            }\r\n\r\n            board[row][col] = piece;\r\n\r\n            if (piece) {\r\n                boardController.addPiece(piece);\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
The above code should be self-explanatory and if you do a refresh in the browser you should see something like this:<\/p>\n
\"webgl_3d_checkers_board_with_pieces\"<\/a><\/p>\n
You’ll notice that the pieces don’t look as nice as in the image from the beginning of the article. That’s because more lights are needed in the scene. You can download the sample code and have a look in initLights<\/em> function and onAnimationFrame<\/em> to see how to add the new lights.<\/p>\n
End of part 2<\/h2>\n
That\u2019s all folks! In the next and final article we will allow the pieces to be dragged and some checkers game logic will be added also.<\/p>\n
You can download the current phase of the project from here<\/a>.<\/p>\n
If you have questions, suggestions or improvements don\u2019t hesitate to add a comment and let me know about them.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
In a previous article we’ve built the basic structure of our 3D checkers game and ended up with drawing a simple cube. In this article we’ll add the board and the pieces. By the end of this part you’ll have something like that looks like this: First, download and copy the content from the 3D …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,13],"tags":[122,121,120],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1085"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=1085"}],"version-history":[{"count":5,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"predecessor-version":[{"id":1098,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions\/1098"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}