# 管线
# 加载管线
1️⃣ 使用引擎（Engine）的loadPipelines接口加载管线。
// 加载管线
engine.loadPipelines( 'assets/jsons/pipeline.json', {
// 管线样式配置参数
material: {
// 方案 目前支持三种方案：'glow' 'pbr' 'gradient'
scheme: 'pbr',
options: {
arrowMap: './assets/textures/arrow2.png', // 流动纹理
transparent: true, // 透明通道是否开启
clearcoat: 0.0,
metalness: 0.5,
toneMapped: false // 是否允许色调映射
}
}
} ).then( ( result ) => {
// 管线实体
const pipelines = result.pipelines;
// 接头实体
const joins = result.joins;
// 外包范围
const bounds = result.bounds;
} );
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
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
2️⃣ 使用引擎（Engine）的loadPipelinesByData接口加载管线。
import { AdditiveBlending } from 'three';
// 通过数据加载管线
const result = engine.loadPipelinesByData( data, {
// 管线样式配置参数
material: {
scheme: 'glow', // 方案
options: {
arrowMap: './assets/textures/arrow2.png', // 流动纹理
transparent: true, // 透明通道是否开启
edgeStrength: 1.25, // glow边缘强度
blending: AdditiveBlending, // 混合方式
toneMapped: false // 是否允许色调映射
}
}
} );
// 管线实体
const pipelines = result.pipelines;
// 接头实体
const joins = result.joins;
// 外包范围
const bounds = result.bounds;
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
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
提示
管线样式配置参数，详见PipelineConfiguration。
# 导出管线
使用引擎（Engine）的mineManager属性的pipelinesToJSON接口导出管线数据。
// 导出管线JSON数据
const data = engine.mineManager.pipelinesToJSON();
// TODO:生成JSON文件或入库
1
2
3
4
2
3
4
# 管线属性
提示
管线使用Pipeline组件渲染，更新属性或调用接口时需要先获取管线渲染组件。
import { Pipeline } from '@tx3d/core';
// 获取管线渲染组件
const pipeline = entity.getComponent( Pipeline );
1
2
3
4
2
3
4
🌏 code 管线编码，只读。
// 获取管线编码
const code = pipeline.code;
1
2
2
🌏 name 管线名称，只读。
// 获取管线名称
const name = pipeline.name;
1
2
2
🌏 material 管线材质名称，只读。
// 获取管线材质名称
const material = pipeline.material;
1
2
2
🌏 startJoin 起点接头，只读。
// 获取管线起点接头
const startJoin = pipeline.startJoin;
1
2
2
🌏 endJoin 终点接头，只读。
// 获取管线终点接头
const endJoin = pipeline.endJoin;
1
2
2
🌏 color 管线外壁颜色
// 获取管线外壁颜色
const color = pipeline.color;
// 设置管线外壁颜色
pipeline.color = '#ff00dd';
1
2
3
4
5
2
3
4
5
提示
该属性会同时修改管线起点和终点颜色。
🌏 startColor 管线外壁起点颜色
// 获取管线外壁起点颜色
const startColor = pipeline.startColor;
// 设置管线外壁起点颜色
pipeline.startColor = '#fd00de';
1
2
3
4
5
2
3
4
5
🌏 endColor 管线外壁终点颜色
// 获取管线外壁终点颜色
const endColor = pipeline.endColor;
// 设置管线外壁终点颜色
pipeline.endColor = '#de00f3';
1
2
3
4
5
2
3
4
5
🌏 arrowVisible 管线外壁箭头可见性控制
// 获取管线外壁箭头可见性
const arrowVisible = pipeline.arrowVisible;
// 设置管线外壁箭头可见性
pipeline.arrowVisible = true;
1
2
3
4
5
2
3
4
5
🌏 arrowSpace 管线外壁箭头间距
// 获取管线外壁箭头间距
const arrowSpace = pipeline.arrowSpace;
// 设置管线外壁箭头间距
pipeline.arrowSpace = 2.0;
1
2
3
4
5
2
3
4
5
🌏 flowSpeed 管线外壁箭头流动速度
// 获取管线外壁箭头流动速度
const flowSpeed = pipeline.flowSpeed;
// 设置管线外壁箭头流动速度
pipeline.flowSpeed = 5.0;
1
2
3
4
5
2
3
4
5
🌏 flowDirection 管线外壁箭头流动方向
// 获取管线外壁箭头流动方向
const flowDirection = pipeline.flowDirection;
// 设置管线外壁箭头流动方向
pipeline.flowDirection = 1;
1
2
3
4
5
2
3
4
5
注意
flowDirection取值为+1或-1，其中+1表示从起点流向终点，-1表示从终点流向起点。
# 接头属性
提示
接头使用PipelineJoin组件渲染，更新属性或调用接口时需要先获取接头渲染组件。
import { PipelineJoin } from '@tx3d/core';
// 获取接头渲染组件
const pipelineJoin = entity.getComponent( PipelineJoin );
1
2
3
4
2
3
4
🌏 topoID 接头拓扑编码，只读。
// 获取接头拓扑编码
const topoID = pipelineJoin.topoID;
1
2
2
🌏 type 接头类型，只读。
// 获取接头类型
const type = pipelineJoin.type;
1
2
2
🌏 name 接头名称，只读。
// 获取接头名称
const name = pipelineJoin.name;
1
2
2
🌏 material 接头材质名称，只读。
// 获取接头材质名称
const material = pipelineJoin.material;
1
2
2
🌏 color 接头外壁颜色
// 获取接头材质颜色
const color = pipelineJoin.color;
// 设置接头材质颜色
pipelineJoin.color = '#ff00de';
1
2
3
4
5
2
3
4
5