This is a summary page for a Three.js 3D Tetris tutorial. I thought of it as an alternative way of learning Three.js and as a source of HTML5 game development tips. The game itself is not so great, but it’s quite good for the first project. You can play it at http://fridek.github.com/Threejs-Tetris/ if your browser supports WebGL.
Part 1 – Introduction and game loop
After this part you should:
- Know how to setup a renderer and scene with Three.js.
- Understand what a game loop is and
- why requestAnimationFrame is great.
- Know that if it looks good, it’s good.
Grab source from githubPart 2 – Static blocks and keeping score
After this part you should:
- Know the difference between connected and separated geometries.
- Understand basics of materials and how to mix them.
- Understand what exactly does position mean in Three.js.
Part 3 – Adding and moving a block
After this part you should:
- Know that numerics are passed by value and objects by reference.
- Understand life cycle of a Tetris block.
- Know how to merge geometries and the difference between mesh and geometry.
- Know how to bind keyoboard events.
Part 4 – Collision detection
After this part you should:
- Know what enum is and how to emulate it in JavaScript.
- Know how to detect different types of collision in Tetris.
- Be familiar with shorthands for
- if conditional: test ? if_true : if_false
- long scope resolution: var tmpVal = some.long.obj.val
- boolean as a parameter: myFunc((foo === 42))
- Understand 3D math – transforming vectors (positions) with matrices.
Part 5 – Audio and scoring
After this part you should:
- Know how to detect and manage completed slices.
- Know basics of Audio API.
- Know how to have fun.
- Start writing your own game.
Many thanks to @TeMPOraL_PL for beta testing and spell-checking this tutorial!
