Smashinglabs

Sebastian Poręba's blog

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 github

Part 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.

Grab source from github

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.

Grab source from github

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.

Grab source from github

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.

Grab source from github

Many thanks to @TeMPOraL_PL for beta testing and spell-checking this tutorial!

  • RSS
  • Facebook
  • Twitter

FAQ about Wordpress

This came as a surprise for me but gMap is ...

gMap 3.3.3 released

It was a looong time since I last visited gMap. ...

Talks for Google Dev

Two new slide decks appeared in lectures tab. This time with ...

Talks and lectures w

Every now and then I spend a weekend watching various ...

3D Tetris with Three

In the fifth part of tutorial we add some final ...

FAQ about Wordpress

This came as a surprise for me but gMap is ...

gMap 3.3.0 released

Christmas came early! New version of gMap is ready!

Lecture for GTUG: Ja

Today I gave a lecture for GTUG Krakow about optimizations in ...

Unit testing for jQu

In part 1 I described basics of unit testing in ...

Unit testing for jQu

In part 1 I described some basic concepts behind unit ...