# WaterFlowEffect组件

使用WaterFlowEffect组件可以创建管道水流效果，由 @tx3d/extension 包提供。


import { Vector3 } from 'three';
import { WaterFlowEffect, TubePathType } from '@tx3d/extension';

 // 构建参数
const parameters = {

    pathData:[new Vector3(0,0,0),new Vector3(10,0,0)],

    geometry: {
        pathType: TubePathType.KeyPoint,// 根据关键节点构建 默认是TubePathType.CatmullRom 根据插值点构建
        arcLengthDivisions: 200, // 曲线分段数
        tension: 0.82,
        radialSegments: 20,  // 管道壁分段数
        radius: 0.16,           // 管道半径
    },

    material: {
        alpha: 0.5,
        color: 0x7abfff,
        colorIntensity: 1,

        uvScaleX: 50,
        uvScaleY: 50,
        timeSpeed: 0.24,
        flowScale: 3.3,
        waterSpeed: 3.3,
        waterSize: 0.04,
        waterOffset: 0.0,
        waterResolution: 0.32,
        waterWaveCount: 4,
    }

};
// 创建实体
const entity = engine.createEntity();

// 添加水渲染组件
const flow = entity.addComponent( WaterFlowEffect, parameters );

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

提示

WaterFlowEffect组件初始化参数，详见WaterFlowEffectParameters。

# 属性

🌏 material 获取材质

// get
flow.material;

1
2

🌏 pathData 路径数据

//get set
flow.pathData = [new Vector3(0,0,0),new Vector3(10,0,0)];

1
2

🌏 arcLengthDivisions 曲线分段数

//get set
flow.arcLengthDivisions = 200;

1
2

🌏 tension 曲线张力

//get set
flow.tension = 0.1;

1
2

🌏 radius 半径

//set
flow.radius = 0.5;

1
2

🌏 radialSegments 半径分段数

//set
flow.radialSegments = 20;

1
2

# 材质属性

🌏 alpha 透明度

//set
flow.material.alpha = 0.8;

1
2

🌏 color 颜色

//set
flow.material.color = "#ff0000";

1
2

🌏 colorIntensity 颜色强度

//set
flow.material.colorIntensity = 1;

1
2

🌏 uvScaleX 纹理X轴缩放

//set
flow.material.uvScaleX = 1;

1
2

🌏 uvScaleY 纹理Y轴缩放

//set
flow.material.uvScaleY = 1;

1
2

🌏 flowScale 流向强度

//set
flow.material.flowScale = 3;

1
2

🌏 timeSpeed 水流扰动速度

//set
flow.material.timeSpeed = 0.3;

1
2

🌏 waterSpeed 水流移动速度

//set
flow.material.waterSpeed = 1;

1
2

🌏 waterSize 水波大小

//set
flow.material.waterSize = 0.3;

1
2

🌏 waterResolution 水波分辨率

//set
flow.material.waterResolution = 0.3;

1
2

🌏 waterOffset 水波偏移

//set
flow.material.waterOffset = 0;

1
2

🌏 waterWaveCount 水波叠加数

//set
flow.material.waterWaveCount = 4;

1
2

# 材质接口

🌏 startPoint 设置水流起点位置（单位米）

flow.startPoint(0);

🌏 endPoint 设置水流结束点位置（单位米）

flow.endPoint(2);

← WaterPolygon组件面积测量工具 →