Text

Text——文本组件，是一个基于 "troika three text" 封装的 2D 文本渲染组件。

重要

Text 组件由 @fantasy3d/addons 包提供。

创建

import { Euler } from 'three';
import { Text } from '@fantasy3d/addons'

// 创建一个实体
const { rootEntity } = scene;
const entity = rootEntity.createChild();

// 添加一个Text组件
entity.addComponent( Text, {

    text: 'Fantasy 3D',                                 // 文本内容
    fontSize: 10,                                       // 字体高度
    anchorX: 'center',                                  // 文本水平方向对齐锚点
    anchorY: 'bottom',                                  // 文本垂直方向对齐锚点
    rotation: new Euler( -Math.PI / 3.0, 0.0, 0.0 )     // 文本旋转量

} );

提示

Text 组件初始化参数，详见 TextOptions。

属性

• text - 设置文本内容，只写属性。

• textAlign - 设置文本水平对齐方式，只写属性，可选 "left"、"right"、"center"、 "justify"。

• textIndent - 设置文本缩进，只写属性，作用类似 CSS 的 text-indent 属性。

• font - 设置使用的自定义字体文件的URL，只写属性。

注意

当前支持 .ttf、 .otf、 .woff 格式字体，不支持 .woff2 格式字体。

• fontSize - 设置文本字体高度，只写属性。

• fontStyle - 设置文本字体样式，只写属性，可选 "italic" 和 "normal"。

• fontWeight - 设置文本字体粗细，只写属性，可以是数字、"normal"、"bold"。

• color - 设置文本颜色，只写属性。

• anchorX - 设置文本水平方向对齐锚点，只写属性，可以是数字，百分比（例如："25%"）或以下关键字之一： "left" 、"center"、"right"。

• anchorY - 设置文本垂直方向对齐锚点，只写属性，可以是数字，百分比（例如："25%"）或以下关键字之一："top"、"top-baseline"、"top-cap"、"top-ex"、"middle"、"bottom-baseline"、"bottom"。

• outlineColor - 设置文本描边颜色，只写属性。

• outlineOpacity - 设置文本描边透明度，只写属性。

注意

该属性取值范围在 [ 0 ~ 1 ] 之间。

• outlineWidth - 设置文本描边宽度，只写属性。

方法

• setAttributes - 设置文本属性。

// 设置文本组件属性
text.setAttributes( {

    text: 'Fantasy 3D',                                 // 文本内容
    fontSize: 10,                                       // 字体高度
    anchorX: 'center',                                  // 文本水平方向对齐锚点
    anchorY: 'bottom',                                  // 文本垂直方向对齐锚点

} );