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

我正在做一个2d游戏，方块像俄罗斯方块一样落下。我需要在这些块上渲染字母表。这就是我创建块的方式：

var geometry=new THREE.BoxGeometry this.BLOCK_WIDTH，this.BLOCK_WIDTH，4； var material=new THREE.MeshBasicMaterial{color:0x00ff00}； this.blocks=[]； 对于var i=0；i<行*列；i++{ 立方体=新的三个。网格几何体，材质； cube.visible=false； cube.letter=letterGenerator.getNextLetter； 这个.blocks[i]=立方体； scene.add this.blocks[i]；

---

}; 您可以获取立方体变量上方要绘制文本的每个块的屏幕位置，并使用HTML在每个块的屏幕位置绘制文本。下面将讨论如何使用HTML制作这样的文本精灵：

---

您可以获得上面立方体的屏幕位置，如下所示：

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

---

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

不确定这是否是一个相关的问题，但我会问：HTML方法是否也适用于WebGLRenderer？另外，由于这将通过GPU完成，所以渲染到纹理并应用它不是会更高效吗？@brany dexter使用HTML将与WebGLRenderer一起工作。可以将屏幕上的放置在渲染器正在绘制的上方。如果您只想应用几个字母，那么纹理可能更容易编码。如果您有很多动态变化的文本，那么HTML方法可能更容易编码。性能将取决于平台，但我个人认为，以这种方式在三个应用程序中使用HTML的性能损失最小。