如何使用threejs在2D中渲染字母

Question

我正在制作一个 2d 游戏，其中方块正在掉落（俄罗斯方块风格）。我需要在这些块上渲染字母。这就是我创建块的方式：

	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] );
	};

如您所见，所有块看起来都完全一样，除了它们将具有与之关联的不同字母表。在我的 update() 中，我将块向左/向右或向下移动。当我这样做时，块位置将被更新，并且显然应该相应地呈现字母表。

我应该如何在这些块上渲染字母？

编辑：我正在使用 WebGLRenderer。

Answer 1

您可以获取要在其上绘制文本的每个块（上面的“立方体”变量）的屏幕位置，并使用 HTML 在每个块上的该屏幕位置绘制文本。这里讨论了使用 HTML 制作这样的文本精灵：

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

您可以像这样获取上面“立方体”的屏幕位置：

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

您必须更新 HTML 以进行立方体移动。

另一种方法是使用您想要的文本创建特定纹理，并将每个纹理作为材质应用到适当的立方体。