# Text3D组件

使用Text3D组件可以为实体添加3D文本，由 @tx3d/extension 包提供。

import { Engine } from '@tx3d/core';
import { Text3D } from '@tx3d/extension';
import { FileLoader } from 'three';

// 3D字体json资源路径
const url = './assets/fonts/3D/Alibaba PuHuiTi 2.0 35 Thin_Regular.json'
const loader = new FileLoader();
let data = null;

// 加载GLTF模型
const entity = engine.loadGLTF( '../assets/models/总装/三门.glb', {

    transform: {

        position: [ 0, 0, 0 ],

    }

} ).then( ( entity ) => {

    loader.load( url, ( txt ) => {

        // 数据
        data = JSON.parse( txt );

        const text3D = entity.addComponent( Text3D, {

            fontData: data,
            text: '华夏天信智慧矿山智能组合变频启动器',
            size: 0.5,
            height: 0.01,
            bevelThickness: 0.05,
            bevelSize: 0.0125,
            curveSegments: 10,
            color: '#ffffff'

        } )

    } )

} );

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

提示

Text3D组件初始化参数，详见Text3DParameters。

注意

将市面通用字体文件转换为3D专用json字体资源，目前只能通过手动方式转换地址 (opens new window)。

# 属性

🌏height 字体高度

// 获取当前文本高度
const height = text3D.height;

// 设置文本高度
text3D.height = 5;

1
2
3
4
5

🌏size 字体尺寸

// 获取当前文本尺寸
const size = text3D.size;

// 设置文本高度
text3D.size = 2;

1
2
3
4
5

🌏text 字体内容

// 获取当前文本内容
const text = text3D.text;

// 设置文本内容
text3D.text = 'xxx';

1
2
3
4
5

🌏bevelEnabled 是否开启斜角

// 获取是否开启斜角
const bevelEnabled = text3D.bevelEnabled;

// 设置开启
text3D.bevelEnabled = true;

1
2
3
4
5

🌏fontData 设置字体，只写属性

// 设置字体
text3D.fontData = true;

1
2

🌏occluded 是否可被遮挡

// 获取当前文本是否可被遮挡
const occluded = text3D.occluded;

// 设置文本可被遮挡
text3D.occluded = true;

1
2
3
4
5

🌏opacity 透明度

// 获取当前文本透明度
const opacity = text3D.opacity;

// 设置文本透明度
text3D.opacity = 1.0;

1
2
3
4
5

🌏color 字体颜色

// 获取当前文本颜色
const color = text3D.color;

// 设置文本颜色
text3D.color = '#ff0000';

1
2
3
4
5

← Text组件 VolumeSpotLight组件 →