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

how to render alphabets in 2D using threejs

本文关键字：字母表 2D 何使用 threeJ      更新时间：2023-09-26

我正在制作一个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。

您可以获取要在其上绘制文本的每个块（上面的"立方体"变量）的屏幕位置，并使用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 才能移动立方体。

另一种方法是使用所需的文本创建特定纹理，并将每个纹理作为材质应用于相应的立方体。

相关文章：