# InstancedBars组件
使用InstancedBars组件可以为实体添加InstancedBars组件，由 @tx3d/extension 包提供。
import { InstancedBars } from '@tx3d/extension';
// 创建实体
const entity = engine.createEntity();
// 添加InstancedBars组件
const instancedBars = entity.addComponent( InstancedBars, {
shape: 'cylinder',
bars : [
{
position: [ 10, 1.0, 10 ],
size: [ 4, 5, 4 ],
color: '#ff00ff',
visible: true
},
{
position: [ 20, 1.0, 20 ],
size: [ 4, 5, 4 ],
color: '#0000ff',
visible: true
},
// ......
]
} );
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
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
提示
InstancedBars组件初始化参数，详见InstancedBarsParameters。
注意
目前shape参数支持四种形状：'cylinder', 'square', 'hexagon', 'triangle'。不区分大小写
# 属性
🌏 opacity 统一设置透明度，只写属性
// 设置透明度
instancedBars.opacity = 0.5;
1
2
2
注意
opacity取值应在[ 0.0 ~ 1.0 ]区间
🌏 clipIntersection 设置剪裁平面的剪裁行为（false剪裁并集，true剪裁交集，默认false）只写属性
// 设置剪裁为“剪裁交集”
instancedBars.clipIntersection = true;
1
2
2
# 接口
🌏 setVisible 设置单个bar可见性
// 设置第一个bar不可见
instancedBars.setVisible( 0, false );
1
2
2
🌏 getBar 获取单个bar信息
// 获取第一个bar的信息
const data = instancedBars.getBar( 0 );
1
2
2
🌏 getBasLength 获取一共有多少bar
// 获取一共有多少bar
const number = instancedBars.getBasLength();
1
2
2
🌏 eliminate 剔除接口
// 剔除该范围外部
instancedBars.eliminate(
[
[ 0, 0, -2000 ],
[ 1500, 0, 1000 ],
[ 4000, 0, 1000 ],
[ 2000, 0, 3000 ],
[ 3000, 0, 6000 ],
[ 0, 0, 4000 ],
[ -3000, 0, 6000 ],
[ -2000, 0, 3000 ],
[ -4000, 0, 1000 ],
[ -1500, 0, 1000 ],
], true );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
🌏 setThreshold 设置阈值区间
// 设置阈值大小
instancedBars.setThreshold( 0.75, 1.0 );
1
2
2
🌏 setSize 设置单个bar尺寸
// 更新设置第一个bar尺寸
instancedBars.setSize( 0, [ 6, 10, 6 ] );
1
2
2
🌏 setHeight 设置单个bar高度
// 更新设置第一个bar高度为比当前高度高10
instancedBars.setHeight( 0, instancedBars.getBar( 0 ).size.y + 10 );
1
2
2
🌏 setColor 设置单个bar颜色
// 设置第一个bar颜色为红色
instancedBars.setColor( 0, '#ff0000' );
1
2
2
🌏 setHighlight 设置单个bar高亮
// 设置第一个bar高亮
instancedBars.setHighlight( true, { index: highIndex, color: '#ffff00'} );
1
2
2