如何使用Threejs在2D中渲染字母 [英] how to render alphabets in 2D using threejs

问题描述

我正在制作2D游戏，其中方块掉落(俄罗斯方块风格).我需要在这些块上渲染字母.这就是我创建块的方式:

I'm making a 2d game, where blocks are falling down ( tetris style). I need to render alphabets on these blocks. This is how I am creating blocks:

	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()中，我将块向左/向右或向下移动.当我这样做时，块的位置将被更新，显然应该相应地渲染字母.

As you can see, all blocks will look exactly alike except for the fact, that they will have a different alphabet associated with them. In my update(), I move the block, left/right or down. When I do so, block position will be updated and obviously the alphabet should be rendered accordingly.

我应该如何在这些块上呈现字母?

How should I go about rendering alphabets on these blocks ?

我正在使用WebGLRenderer.

I am using WebGLRenderer.

推荐答案

您可以获取要在其上绘制文本的每个块(上面的"cube"变量)的屏幕位置，并使用HTML在该屏幕上绘制文本每个块上的位置.在此处讨论使用HTML制作这样的文本精灵的方法:

You can get the screen position of each block (your "cube" variable above) that you want to paint text on and use HTML to paint text at that screen location over each block. Using HTML to make a text sprite like this is discussed here:

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

您可以像上面这样获得多维数据集"的屏幕位置:

You can get the screen position for your "cube" above like so:

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以进行立方体移动.

You'll have to update the HTML for cube movement.

另一种方法是使用所需的文本创建特定的纹理，并将每种纹理作为材料应用于适当的立方体.

Another approach is to create specific textures with the text you want and apply each texture as a material to the appropriate cube.

这篇关于如何使用Threejs在2D中渲染字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！