# Media组件
使用Media组件可以替换指定Mesh的材质纹理，从而实现LED、大屏等效果。
1️⃣ 'text'类型Media组件
import { Media } from '@tx3d/core';
// 加载LED显示屏模型
engine.loadGLTF( './assets/models/LED/LED.gltf', {
transform: {
position: [ 0, 120, 0 ],
scale: [ 50, 50, 50 ]
}
} ).then( ( entity ) => {
// 添加Media组件
const media = entity.addComponent( Media, {
type: 'text',
container: 'Container',
content: '华夏天信物联科技有限公司',
offset: [ 1.0, 0.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2️⃣ 'canvas'类型Media组件
import { Media } from '@tx3d/core';
import echarts from 'echarts';
// 创建echars表格
const { charts, dom, context, options } = createEcharts();
// 加载LED大屏幕模型
engine.loadGLTF( './assets/models/大屏幕/大屏幕.gltf', {
transform: {
position: [ 0, 0, 0 ],
scale: [ 200, 200, 200 ]
}
} ).then( ( entity ) => {
// 添加Media组件
const media = entity.addComponent( Media, {
type: 'canvas',
container: 'Container',
content: context.canvas
} );
} );
// 创建Echarts表格
function createEcharts() {
const dom = document.createElement( 'div' );
dom.style.width = '512px';
dom.style.height = '341px';
const charts = echarts.init( dom );
const options = {
backgroundColor:'rgba(16, 12, 42, 1.0)',
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
charts.setOption( options );
const context = dom.getElementsByTagName( 'canvas' )[ 0 ].getContext( '2d' );
context.clearRect( 0, 0, context.canvas.width, context.canvas.height ); // 初始化一定要清空 直接往上画会卡
return { charts, dom, context, options };
}
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
3️⃣ 'video'类型Media组件
<video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none">
<source src="assets/textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="assets/textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
1
2
3
4
2
3
4
import { Media } from '@tx3d/core';
// 加载LED大屏幕模型
engine.loadGLTF( './assets/models/大屏幕/大屏幕.gltf', {
transform: {
position: [ 0, 0, 0 ],
scale: [ 200, 200, 200 ]
}
} );
// 视频对象
let video = null;
// 监听实体单击事件
engine.addEventListener( 'entityclick', ( event ) => {
if ( !Tx3d.defined( video ) ) {
// 播放视频
video = document.getElementById( 'video' );
video.play();
// 添加Media组件
event.entity.addComponent( Media, {
type: 'video',
container: 'Container',
content: video
} );
}
} );
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
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
提示
Media组件初始化参数，详见MediaParameters。
# 属性
🌏 type 类型，只读。
// 获取类型
const type = media.type;
1
2
2
🌏 content 内容
// 获取内容
const content = media.content;
// 设置内容
media.content = '华夏天信';
1
2
3
4
5
2
3
4
5