# 组件
通过组件可以给实体添加不同的渲染效果和逻辑控制。在Tx3d Engine中Component是所有组件的基类。
# 属性
🌏 entity 获取组件所属实体，只读属性
// 获取组件所属实体
const entity = component.entity;
1
2
2
🌏 enabled 获取&设置组件是否启用组件
// 启用组件
component.enabled = true;
// 禁用组件
component.enabled = false;
// 判断组件是否已启用
if ( component.enabled ) {
// TODO:
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
🌏 userData 获取&设置组件用户数据
// 获取用户数据
const userData = component.userData;
// 设置用户数据，方式一
component.userData.timeStamp = '2023.2.15.9.49';
// 设置用户数据，方式二
component.userData = {
timeStamp: '2023.2.15.9.49'
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
提示
userData的默认值为{}。
# 接口
公有接口
🌏 setActive 设置是否激活组件
// 激活组件
component.setActive( true );
// 冻结组件
component.setActive( false );
1
2
3
4
5
2
3
4
5
🌏 destroy 销毁组件
// 销毁组件
component.destroy();
1
2
2
提示
组件销毁时会分发"destroy"事件，组件销毁完成时会分发"destroyed"事件。
保护接口
🌏 _onAwake 唤醒组件时调用，调用一次。
🌏 _onEnable 启用组件时调用，调用多次。
🌏 _onDisable 禁用组件时调用，调用多次。
🌏 _onDestroy 销毁组件时调用，调用一次。
# 事件
组件的顶层基类为EventDispatcher，因此事件相关的所有操作在组件中都可以使用，详见"事件"。
属性改变事件
Tx3d Engine的内置组件的属性值发生改变时会对外分发属性改变事件（"propertychanged"），事件结构如下所示：
| 名称 | 类型 | 描述 |
|---|---|---|
| type | string | 事件类型，始终为'propertychanged' |
| name | string | 发生改变的属性名称 |
| value | any | 改变后的属性值 |
{
type: 'propertychanged', // 事件类型，始终为'propertychanged'
name: 'color', // 'color'属性发生改变
value: '#deac9f' // 改变后的颜色值
}
1
2
3
4
5
2
3
4
5
开发人员可以监听该事件并在事件回调中执行相应的操作，如下所示：
import { EventType } from '@tx3d/core';
// 监听组件属性改变事件
component.addEventListener( EventType, ( event ) => {
switch ( event.name ) {
case 'color':
// 'color'属性发生改变
const color = event.value;
// TODO:
break;
case 'intensity':
// 'intensity'属性发生改变
const intensity = event.value;
// TODO:
break;
case 'position':
// 'position'属性发生改变
const position = event.position;
// TODO:
break;
}
} );
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
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
提示
外部扩展的组件可以通过以下两种方法实现属性改变通知：
1️⃣ 通过属性装饰器 (opens new window)（propertyChanged）实现
import { Component, propertyChanged } from '@tx3d/core';
class Beam extends Component {
......
// 高度属性
private _height: number;
/**
* 设置高度
*/
@propertyChanged<number>()
set height( value: number ) {
this._height = value;
}
......
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2️⃣ 手动分发属性改变事件
import { Component, EventType } from '@tx3d/core';
class Beam extends Component {
......
// 高度属性
private _height: number;
/**
* 设置高度
*/
set height( value: number ) {
this._height = value;
// 分发属性改变事件
this.dispatchEvent( {
type: EventType.PROPERTY_CHANGED,
name: 'height',
value: value
} );
}
}
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
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
自定义事件
开发时可以根据需求分发和监听自定义事件，如下所示：
// 组件分发"changed"自定义事件
component.dispatchEvent( {
type: 'changed',
value: 1000
} );
// 监听组件的"changed"自定义事件
component.addEventListener( 'changed', ( event ) => {
// TODO:
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14