如何使用threejs渲染二维字母

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() 中，我将块移动 left/right 或向下移动。当我这样做时，块位置将被更新，显然字母表应该相应地呈现。

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

编辑：我正在使用 WebGLRenderer。

Answer 1

您可以获得要在其上绘制文本的每个块（上面的 "cube" 变量）的屏幕位置，然后使用 HTML 在每个块的屏幕位置绘制文本。使用 HTML 制作这样的文本精灵在此处讨论：

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

您可以像这样获取上面 "cube" 的屏幕位置：

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 方块移动。

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

如何使用threejs渲染二维字母

how to render alphabets in 2D using threejs

javascript

rendering

text-rendering

three.js