# Ruler组件
使用Ruler组件可以为实体添加标尺组件，由 @tx3d/extension 包提供。
# 示例代码段一：
根据绝对坐标（未处理的世界坐标）创建，该创建方式会导致实体节点和渲染对象位置不在一处（实际实体位置在[ 0,0,0 ]处），即渲染的对象与挂载的实体节点有偏移量
import { VerticalOrigin } from '@tx3d/core';
import { Ruler } from '@tx3d/extension';
// 创建实体
const entity = engine.createEntity();
// 添加Ruler组件
const ruler = entity.addComponent( Ruler, {
startPos: [ -80,0,0 ],
endPos: [ 80, 0, 0 ],
headRangeLine: {
verticalOrigin: Tx3d.VerticalOrigin.CENTER,
material: {
transparent: true,
color: '#ffffff',
opacity: 1.0
}
},
tailRangeLine: {
verticalOrigin: VerticalOrigin.CENTER,
material: {
transparent: true,
color: '#ffffff',
opacity: 1.0
}
},
head: {
shape: 'Triangle',
color: '#ffffff',
opacity: 1.0
},
tail:{
shape: 'Triangle',
color: '#ffffff',
opacity: 1.0
},
middle: {
width: 0.8,
material: {
transparent: true,
color: '#ffffff',
opacity: 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
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
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
# 示例代码段二：
根据相对坐标（处理后的世界坐标）创建，该创建方式需要预处理坐标，将预处理后得到的方位数据赋值到挂载实体，以解决实例代码一所面对的问题
import { VerticalOrigin } from '@tx3d/core';
import { Ruler } from '@tx3d/extension';
import { MathUtils } from '@tx3d/app';
import { Vector3 } from 'three';
const startPos = new Vector3( -8000, 0, -6000 );
const endPos = new Vector3( 3000, 0, -1000 );
// 预处理坐标
const center = startPos.clone().add( endPos ).multiplyScalar( 0.5 );
const quaternion = MathUtils.calcQuaternionFromVectors( startPos, endPos );
startPos.sub( center );
endPos.sub( center );
startPos.applyQuaternion( quaternion.clone().invert() );
endPos.applyQuaternion( quaternion.clone().invert() );
// 创建实体
const entity = engine.createEntity( { transform: { position: center, quaternion: quaternion } } );
// 添加Ruler组件
const ruler = entity.addComponent( Ruler, {
startPos: startPos,
endPos: endPos,
headRangeLine: {
verticalOrigin: VerticalOrigin.CENTER,
material: {
transparent: true,
color: '#ffffff',
opacity: 1.0
}
},
tailRangeLine: {
verticalOrigin: VerticalOrigin.CENTER,
material: {
transparent: true,
color: '#ffffff',
opacity: 1.0
}
},
head: {
shape: 'Triangle',
color: '#ffffff',
opacity: 1.0
},
tail:{
shape: 'Triangle',
color: '#ffffff',
opacity: 1.0
},
middle: {
width: 12,
material: {
transparent: true,
color: '#ffffff',
opacity: 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
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
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
提示
Ruler组件初始化参数，详见RulerParameters。
提示《使用说明》
标尺组件分为五部分：'headRangeLine'， 'tailRangeLine'， 'head'， 'tail'， 'middle'。仅'middle'必选，根据标尺样式指定参数，不存在部分即不传递相应参数，可自由配置。
注意
Ruler组件除以下"属性"外（样式，长度等其他参数）, 均不可动态修改，即通过初始化参数配置构建目标样式的Ruler。
:::
# 属性
🌏 occluded 统一可遮挡设置，只写属性
// 设置是否可遮挡
ruler.occluded = false;
1
2
2
🌏 opacity 统一设置透明度，只写属性
// 设置透明度
ruler.opacity = 1
1
2
2
注意
opacity取值应在[ 0.0 ~ 1.0 ]区间
🌏 color 统一设置颜色，只写属性
// 设置颜色值
ruler.color = '#ff00ff';
1
2
2