# Pyramid组件
使用Pyramid组件可以为实体添加3D"金字塔"(棱柱,棱锥),由 @tx3d/extension 包提供。
import { Pyramid, ChartCrossSectionType } from '@tx3d/extension';
// 创建实体
const entity = engine.createEntity();
// 添加Pyramid组件
const pyramid = entity.addComponent( Pyramid, {
topSize: 0.0,
bottomSize: 4.0,
height: 0,
type: ChartCrossSectionType.Square,
material: {
startColor: '#9bd72d',
endColor: '#ffff00',
// color: '#ffffff',
opacity: 1.0,
metalness: 0.0,
roughness: 0.1,
clearcoat: 1.0,
clearcoatRoughness: 0.1,
sheen: 1.0,
transmission: 0.5
},
edge: {
color: '#9bd72d',
visible: true,
opacity: 1.0,
width: 1.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
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
提示
Pyramid组件初始化参数,详见PyramidParameters。
# 属性
🌏 height 高度设置
// 获取是"金字塔"高度
const height = pyramid.height;
// 设置"金字塔"高度
pyramid.height = 10;
1
2
3
4
5
2
3
4
5
🌏 occluded 是否可被遮挡设置
// 获取是否可被遮挡
const occluded = pyramid.occluded;
// 设置不可被遮挡
pyramid.occluded = false;
1
2
3
4
5
2
3
4
5
🌏 opacity 透明度
// 获取透明度
const opacity = pyramid.opacity;
// 设置透明度
pyramid.opacity = 0.75;
1
2
3
4
5
2
3
4
5
注意
opacity取值应在[ 0.0 ~ 1.0 ]区间
🌏 color 统一控制颜色设置,只写属性
// 设置颜色
pyramid.color = '#de98d3';
1
2
2
注意
初始化创建"金字塔"时,同时传递color参数和(startColor及endColor)参数时,后者参数设置不起作用,以color参数设置颜色为准,设置为统一颜色,如不想统一设置颜色,可不传递color参数
🌏 startColor 起始端颜色设置
// 获取起始端颜色
const startColor = pyramid.startColor;
// 设置起始端颜色
pyramid.startColor = '#ff0000';
1
2
3
4
5
2
3
4
5
🌏 endColor 末端颜色设置
// 获取末端颜色
const endColor = pyramid.endColor;
// 设置末端颜色
pyramid.endColor = '#00ffff';
1
2
3
4
5
2
3
4
5
🌏 edgeOpacity 边框线透明度
// 获取边框线透明度
const edgeOpacity = pyramid.edgeOpacity;
// 设置边框线透明度
pyramid.edgeOpacity = 0.90;
1
2
3
4
5
2
3
4
5
注意
edgeOpacity取值应在[ 0.0 ~ 1.0 ]区间
🌏 edgeColor 边框线颜色设置
// 获取边框线颜色
const edgeColor = pyramid.edgeColor;
// 设置边框线颜色
pyramid.edgeColor = '#ffffff';
1
2
3
4
5
2
3
4
5
🌏 edgeVisible 边框线可见性设置
// 获取边框线可见性
const edgeVisible = pyramid.edgeVisible;
// 设置边框线不可见
pyramid.edgeVisible = false;
1
2
3
4
5
2
3
4
5
🌏 edgeWidth 边框线宽度设置
// 获取边框线宽度
const edgeWidth = pyramid.edgeWidth;
// 设置边框线宽度
pyramid.edgeWidth = 2.0;
1
2
3
4
5
2
3
4
5