How To Render Alphabets In 2d Using Threejs

I'm making a 2d game, where blocks are falling down ( tetris style). I need to render alphabets on these blocks. This is how I am creating blocks: As you can see, all blocks will

Solution 1:

You can get the screen position of each block (your "cube" variable above) that you want to paint text on and use HTML to paint text at that screen location over each block. Using HTML to make a text sprite like this is discussed here:

https://github.com/mrdoob/three.js/issues/1321

You can get the screen position for your "cube" above like so:

var container = document.getElementById("idcanvas");
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;
var widthHalf = containerWidth / 2, heightHalf = containerHeight / 2;
var locvector = newTHREE.Vector3();
locvector.setFromMatrixPosition(cube.matrixWorld);
locvector.project(your_camera); //returns center of meshvar xpos = locvector.x = (locvector.x * widthHalf) + widthHalf; //convert to screen coordinatesvar ypos = locvector.y = -(locvector.y * heightHalf) + heightHalf;

You'll have to update the HTML for cube movement.

Another approach is to create specific textures with the text you want and apply each texture as a material to the appropriate cube.