Question

我正在进行一场2d游戏，其中积木正在倒塌（俄罗斯方块风格）。我需要在这些块上呈现字母表。这就是我创建块的方式：

＆＃13;

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

＆＃13;

正如您所看到的，除了事实之外，所有区块看起来都完全相同，因为它们将具有与之关联的不同字母表。在我的更新（）中，我向左/向右或向下移动块。当我这样做时，块位置将被更新，显然应该相应地呈现字母。

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

编辑：我正在使用WebGLRenderer。

Answer 1

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

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

您可以获得＆＃34; cube＆＃34;的屏幕位置。以上就像这样：

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。

另一种方法是使用您想要的文本创建特定纹理，并将每个纹理作为材质应用到相应的多维数据集。

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

1 个答案: