I'm currently in the process of developing a 2D game that involves blocks falling down in a Tetris-like fashion. I'm looking to render different alphabets on these blocks. Here's how I am setting up the blocks:
var geometry = new THREE.BoxGeometry( this.BLOCK_WIDTH, this.BLOCK_WIDTH, 4 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
this.blocks = [];
for (var i = 0; i < rows * columns; i++) {
cube = new THREE.Mesh( geometry, material );
cube.visible = false;
cube.letter = letterGenerator.getNextLetter();
this.blocks[i] = cube;
scene.add( this.blocks[i] );
};Each block will have a unique alphabet associated with it, but otherwise they will all look the same. In the update() function, I move the blocks either left, right, or down. With this movement, the block positions are updated, and I need the alphabets to be rendered accordingly.
Can someone guide me on how to effectively render alphabets on these blocks?
UPDATE: The game is being rendered using WebGLRenderer.