html图片靠左文字在右边_L019. 文字

*在本公众号输入 L019 可得本篇效果链接。*

在2D网页中，因为浏览器的渲染器已经帮忙处理了文字渲染的所有事情，所以文字显示是非常简单的功能。但是在3D世界中，文字的渲染非常麻烦。A-Frame框架内置了一个性能和清晰度相对较好的基于SDF(Signed Distance Field)的文字组件：text。该组件使用了Mattdes的three-bmfont-text库(Github上的网址：https://github.com/Jam3/three-bmfont-text)。

文字组件(text)

文字组件有以下相关参数：

参数	默认值	说明
value	‘’	文本内容。支持换行符(\n)和制表符(\t)。
color	#FFFFFF	文本颜色。
align	left	多行文本的对齐方式，可选值有：left、center和right。
anchor	center	水平方向的锚点，可选值有：left，center和right。
baseline	center	垂直方向的锚点，可选值有：top，center和bottom。
shader	sdf	渲染文本的着色器。
font	default	文本字体。直接使用A-Frame提供的字体列表(见下表)中的名字或者使用URL来指定的路径。
fontImage	从字体中获取	字体对应的图片，如果使用了A-Frame提供的字体就不需要设置该参数。
height	从字体中获取	文本的高度。
width	从几何体中获取(如果存在)	文本的宽度。
lineHeight	从字体中获取	行高。
letterSpacing	0	字与字之间的像素间隔。
whiteSpace	normal	泛空格符的处理方式。可选值有normal，nowrap，pre，pre-wrap，pre-line和inherit。具体含义和CSS中的white-space一样。
wrapCount	40	多少个字后自动换行。
wrapPixels	从wrapCount算出	多少像素后自动换行。
tabSize	4	每个制表符用多少个空格代替。
transparent	true	文本是否透明。
side	front	渲染哪个面，有效值为front、back和double。
xOffset	0	X轴的偏移值。
zOffset	0.001	如果以一个几何体作为背景，通过设置Z轴的偏移值可以防止Z-fighting现象(深度冲突现象)。

文本的参数比较多，我们这里只介绍三个重要的属性：

水平锚点(anchor)和垂直锚点(baseline)

文字的锚点就是文本对应的实体的坐标点。水平锚点用来控制整个文本在坐标点水平方向的位置：水平锚点为left时，整个文本都在锚点的右边；水平锚点为center时，文本水平方向的中点和锚点重合；水平锚点为right时，整个文本都在锚点的左边。垂直锚点用来控制整个文本在坐标点垂直方向的位置：垂直锚点为top时，整个文本都在锚点的下面；垂直锚点为center时，文本垂直方向的中点和锚点重合；垂直锚点为bottom时，整个文本都在锚点的上面。

源码12.Text目录下的anchors.html的文件展示了锚点的六种情况。上面是水平锚点的文本，下面是垂直锚点的文本，其中每个文本中的小方块标志了对应该文本的锚点。

对齐方式(align)

文字的对齐方式用来控制在一定的宽度范围内文字的对齐方式。对齐方式为left时，文字在宽度范围内靠左对齐；对齐方式为center时，文字在宽度范围内居中对齐；对齐方式为right时，文字在宽度范围内靠右对齐。

源码12.Text目录下的align.html的文件展示了对齐方式的三种情况：

文字几何体组件(text-geometry)

文字几何组件为第三方组件，其有效参数如下表：

参数	默认值	说明
value	‘’	文本内容。支持换行符(\n)和制表符(\t)。
height	0.05	文本的高度。
weight	normal	文本是否加粗，可选值有：normal或bold。
style	normal	文本是否斜体，可选值有：normal或italics。
font
curveSegments	12	弧线分段数，该值越大，文字的曲线越光滑。
bevelEnabled	false	是否在文本边缘使用倒角。
bevelThickness	8	倒角厚度。
bevelSize	12	倒角宽度

源码12.Text目录下的textGeomety.html文件给出了文字几何体组件的使用示例：

*本系列所有文章均属原创。*

*未经授权，不得转载。*

关注公众号，实时获得最新增强与虚拟现实的web版教程。