A photo of Max Glenister Max Glenister

23: Planning Tetrominoes in VR

I outlined the plan for the week yesterday: To make a tetromino game. So here’s how we’re going to do that.

I’ve decided to call this “teVRis”, because who doesn’t like a word/acronym mashup?

First things first we need to think about how we can transition a game mechanic from two dimensions to three.

My first thought is to project the game board around the player in a circle. Positioning things on a circle is quite straight-forward with a bit of maths and two axis (x and z):

  // Position a bunch of blocks around the camera
  var block = core.build(
    'BoxGeometry', [5,5,5],
    'MeshBasicMaterial', [{color:0xff0000}]
  var numBlocks = 20;
  var circle = {
    width: 10,
    depth: 10,
    radius: 25
  var step = (2 * Math.PI) / numBlocks;
  var angle = 0;
  for (var i = 0; i < numBlocks; i++) {
    var _block = new T.Mesh(

    _block.position.x =
      (circle.width / numBlocks) +
      (circle.radius * Math.cos(angle));
    _block.position.z =
      (circle.depth / numBlocks) +
      (circle.radius * Math.sin(angle));


    angle += step;

You can see the output of this in Cardboctober 04: Skyboxes and generating meshes - I even did some preleminary Tetromino generation. So we’ve got the starting point for our game then, we just need to add all of the game logic.

Tomorrow we’ll look at generating the Tetromino shapes and putting them in to this game board.


View this Cardboctober hack 23: Planning Tetrominoes in VR

View the other submissions for day 23 on the Cardboctober website.

Check out my other Cardoctober posts here: /cardboctober

About the author

A photo of Max Glenister

Max Glenister is a Front-end Developer based in Oxfordshire. For work he spends his time designing, validating and implementing user interfaces. For fun he tinkers with Virtual Reality, 3D printing, embedded systems, game development and many other things.

You can keep up with Max on Github, Twitter and Reddit