# Text组件
使用Text组件可以为实体添加文本，由 @tx3d/extension 包提供。
import { Engine } from '@tx3d/core';
import { Text } from '@tx3d/extension';
const entity = engine.createEntity({
transform: {
position: [-1300.0, -260.0, -1000.0],
rotation: [0.0, 0.0, 0.0]
}
});
// 添加Text3D组件
const text = entity.addComponent(Text, {
// 文本内容
text: {
text: '华夏天信物联科技有限公司',
fontSize: 220.0,
fontWeight: 800.0,
letterSpacing: 0.03
},
// 文本轮廓
outline: {
outlineBlur: 0.2,
outlineColor: '#FFFFFF',
outlineWidth: 5.0,
outlineOpacity: 0.8
},
// 文本描边
stroke: {
strokeColor: '#0000FF',
strokeWidth: 2.0,
strokeOpacity: 0.5
},
color: '#f0f009',
// material: new MeshBasicMaterial({
// map: map,
// }),
opacity: 1.0,
lineHeight: 500.0,
maxWidth: 0.5,
// overflowWrap: 'break-word',
// whiteSpace: 'nowrap',
textAlign: 'center',
textIndent: 2.0,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
提示
Text组件初始化参数，详见TextParameters。
# 属性
🌏text 文本内容
// 获取当前文本内容
const text = text.text;
// 设置文本内容
text.text = 'TX3D ENGINE';
1
2
3
4
5
2
3
4
5
🌏font 文本样式
// 获取当前文本样式
const font = text.font;
// 设置文本样式
text.font = './assets/fonts/ChunkFive-Regular.otf',
1
2
3
4
5
2
3
4
5
🌏fontSize 文字尺寸
// 获取当前文字尺寸
const fontSize = text.fontSize;
// 设置文字尺寸
text.fontSize = 400.0;
1
2
3
4
5
2
3
4
5
🌏fontWeight 字体粗细
// 获取字体粗细
const fontWeight = text.fontWeight;
// 设字体粗细
text.fontWeight = 800.0;
1
2
3
4
5
2
3
4
5
🌏letterSpacing 字体间距
// 获取字体间距
const letterSpacing = text.letterSpacing;
// 设置字体间距
text.letterSpacing = 0.0;
1
2
3
4
5
2
3
4
5
🌏outlineBlur 边缘模糊半径
// 获取边缘模糊半径
const outlineBlur = text.outlineBlur;
// 设置边缘模糊半径
text.outlineBlur = 0.2;
1
2
3
4
5
2
3
4
5
🌏outlineColor 文本轮廓颜色
// 获取文本轮廓颜色
const outlineColor = text.outlineColor;
// 设置文本轮廓颜色
text.outlineColor = '#FFFFFF',
1
2
3
4
5
2
3
4
5
🌏outlineOffsetX 水平偏移量
// 获取水平偏移量
const outlineOffsetX = text.outlineOffsetX;
// 设置水平偏移量
text.outlineOffsetX = 0.0;
1
2
3
4
5
2
3
4
5
🌏outlineOffsetY 垂直偏移量
// 获取垂直偏移量
const outlineOffsetY = text.outlineOffsetY;
// 设置垂直偏移量
text.outlineOffsetY = 0.0;
1
2
3
4
5
2
3
4
5
🌏outlineOpacity 文本轮廓透明度
// 获取文本轮廓透明度
const outlineOpacity = text.outlineOpacity;
// 设置文本轮廓透明度
text.outlineOpacity = 1.0;
1
2
3
4
5
2
3
4
5
🌏outlineWidth 文本轮廓宽度
// 获取文本轮廓宽度
const outlineWidth = text.outlineWidth;
// 设置文本轮廓宽度
text.outlineWidth = 2.0;
1
2
3
4
5
2
3
4
5
🌏strokeColor 描边颜色
// 获取描边颜色
const strokeColor = text.strokeColor;
// 设置描边颜色
text.strokeColor = '#FFFFFF';
1
2
3
4
5
2
3
4
5
🌏strokeOpacity 文本描边透明度
// 获取文本描边透明度
const strokeOpacity = text.strokeOpacity;
// 设置文本描边透明度
text.strokeOpacity = 1.0;
1
2
3
4
5
2
3
4
5
🌏strokeWidth 文本描边宽度
// 获取文本描边宽度
const strokeWidth = text.strokeWidth;
// 设置文本描边宽度
text.strokeWidth = 2.0;
1
2
3
4
5
2
3
4
5
🌏color 文本颜色
// 获取文本颜色
const color = text.color;
// 设置文本颜色
text.color = '#ff0000';
1
2
3
4
5
2
3
4
5
🌏opacity 文本透明度
// 获取文本透明度
const opacity = text.opacity;
// 设置文本透明度
text.opacity = 1.0;
1
2
3
4
5
2
3
4
5
🌏lineHeight 行文本高度
// 获取行文本高度
const lineHeight = text.lineHeight;
// 设置行文本高度
text.lineHeight = 1.8;
1
2
3
4
5
2
3
4
5
🌏maxWidth 文本块宽度
// 获取水平偏移量
const maxWidth = text.maxWidth;
// 设置水平偏移量
text.maxWidth = 0.8;
1
2
3
4
5
2
3
4
5
🌏textIndent 文本缩进
// 获取文本缩进
const textIndent = text.textIndent;
// 设置文本缩进
text.textIndent = 0.0;
1
2
3
4
5
2
3
4
5
# 接口
// 批量更新text组件属性
text.updateProperties({
// 文本内容
text: {
text: 'TX3D',
fontSize: 400.0,
fontWeight: 800.0,
letterSpacing: 0.0
},
color: '#FFFFFF',
opacity: 0.5,
textAlign: 'center',
textIndent: 2.0
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
提示
更新参数，详见TextParameters。
注意
updateProperties是一个异步（ async ）方法。