The basics of an HTML5 3D Concentration game made with Babylon.js

Earlier this week I showed you the creation of a 3D Sokoban level with Babylon.js, now it’s time to create something interactive, like a Concentration game.

In this step, I will only focus on the creation and selection of a single tile, but the topics covered are quite a number and pretty advanced, such as:

* Texture mapping
* Using different textures on different meshes of the same body
* Directional lights
* Shadows
* Selection of bodies with the mouse
* Animations and keyframes

This is what you are going to build:

Click on the yellow tile to turn it and reveal its hidden color.

The concept behind the script continues where the creation of 3D Sokoban level with Babylon.js ended, so I recommend to start from the previous example if you are new to Babylon.

The new, fully commented content of game.js used to make this example is:

As you can see, everything is easy and intuitive with Babylon, next time I will show you a complete 3D Concentration game, meanwhile download the source code, with all required libraries.

  • Impressive that HTML5 can make 3D games too. I am studying 3D for C++, in OpenGL. I use Misfit to create the models in MD2 format.

    Do HTML5 has support for loading MD2 models?